Semantic structure for understandable business applications

Business applications often display filters, results, record details and actions at the same time. People navigate this interface visually, through a keyboard or through a spoken structural representation. Understandable organization connects these approaches.

Derive structure from tasks

First establish which information belongs together and which action affects each area. Use that understanding to define headings, regions and clear labels. Font size and color alone do not express these relationships technically.

Native HTML elements already convey meaning and provide certain interaction behaviors. Using the appropriate elements supports consistency. Add roles and states where a complex control actually requires them.

Align meaning with function

• Use links for navigation and buttons for actions.
• Order headings by content structure rather than desired font size.
• Identify related form fields as a group.
• Give repeated actions unambiguous labels in context.

Visual design remains flexible. Semantics and appearance do not need to compete with each other.

A record list may contain an “Open” action in every row. Its relationship to the row may be visually apparent but unclear through another navigation method. An accessible label should identify the relevant record.

Connect lists and details

The detail view also needs an understandable starting point. Its title, main content and available actions should be apparent from the structure. If details appear in a dialog, also verify focus management and return to the initiating control.

Assessment starts with content organization and ends with actual interaction. A formally present element helps only when its meaning fits the content.

Practical review questions

• Do headings describe the following area?
• Is the target of an action clear?
• Does reading order reflect the business workflow?
• Does orientation remain understandable after a dynamic change?

Shared page structures and components simplify implementation, while checks in the actual page context remain necessary.

A sound semantic structure makes an application understandable through different access methods. It also supports maintenance because components have recognizable purposes.

Preserve structure over time

Place new areas within the existing hierarchy. Editorial changes should not use headings solely to achieve a visual effect. This keeps content, technical meaning and interaction connected as the application grows.

Representative list and detail views provide a useful starting point for revision. Review their content areas, actions and commonly reused elements together.

Useful starting material

• Typical user tasks and relevant roles.
• Existing components and design guidance.
• Examples of unclear orientation or ambiguous labels.

The W3C WAI page structure tutorial explains the underlying building blocks. Test their concrete combination against the application's real content.