Semantic foundations

Semantics in UX is about more than how something looks, it’s about what it means. Proper use of semantic HTML and ARIA ensures that content and components convey their role and purpose to both users and assistive technologies.

Without semantic structure, interfaces may look fine visually but break when read by screen readers, indexed by search engines, or navigated by keyboard. Strong semantics form the foundation of accessible, resilient, and scalable design.

Guidelines for semantic foundations in UX.

Use semantic HTML elements whenever possible

Prefer <button> over <div> with click handlers, <nav> over generic containers, and <h1>–<h6> for headings. This preserves meaning and accessibility out of the box.

References:

• HTML5 Specification – W3C
• Semantic structure – WebAIM

Align visual and semantic hierarchy

Headings, labels, and landmarks must match their semantic roles. Do not style a <div> to look like a heading.

References:

• WCAG 1.3.1: Info and relationships
• Visual hierarchy in UX – Nielsen Norman Group

Use ARIA only when necessary

ARIA can fill semantic gaps but should not replace native HTML. “No ARIA is better than bad ARIA.”

References:

• ARIA Authoring Practices – W3C

Provide clear landmarks and regions

Use <header>, <main>, <footer>, <aside>, and <nav> to help assistive technologies and users orient themselves.

References:

• Landmarks regions – W3C WAI
• Landmarks pattern – W3C WAI

Support keyboard navigation through semantics

Semantic elements come with predictable keyboard behaviors. Avoid breaking them with custom scripts.

References:

• WCAG 2.1.1: Keyboard
• Keyboard accessibility – WebAIM

Frequent mistakes when building semantic structure.

Using generic containers for everything

Using <div>s and <span>s without roles create inaccessible, meaningless structures.

Styling elements to look like something else

For example: using a <span> styled as a button. This breaks accessibility and expected behaviors.

Overusing ARIA roles unnecessarily

Adding redundant or incorrect ARIA often causes more harm than good.

Skipping headings or using them inconsistently

Headings must follow logical order. Skipping levels breaks semantic flow for screen readers.

Key takeaways for semantic UX foundations.

• Semantics is about meaning, not just appearance.
• Use native semantic HTML whenever possible.
• Match visual and semantic hierarchy to preserve clarity.
• Use ARIA cautiously, only when necessary.
• Provide landmarks and logical heading structures for navigation.

Strong semantic foundations make interfaces accessible, resilient, and user-friendly for everyone.

Scenario: Page semantic structure

Use when establishing or auditing the semantic HTML structure of a page or component, ensuring interfaces communicate meaning through structure, not just visual appearance.

You are a UX-focused design agent. Establish semantic HTML foundations for [page/component: article page / settings page / product card / navigation].

Rules:
- Use elements for their intended purpose:
  button: actions on the current page
  a href: navigation to a URL or location
  h1-h6: document outline — one H1 per page, never skip levels
  ul / ol: lists of items
  table: tabular data with th scope="col/row" headers
  form: user input with associated label elements
  nav: navigation landmarks
  main: primary page content (one per page)

- Never do this:
  div onclick → use button
  span onclick → use button or a
  table for layout → use CSS Grid or Flexbox
  h3 directly after h1 → skipping heading levels breaks the document outline

- ARIA — use only when native HTML is insufficient:
  First rule of ARIA: if you can use native HTML, use it
  aria-label: adds accessible name when no visible text exists
  aria-describedby: associates descriptive text with an element
  aria-expanded: communicates open/closed state of collapsible elements
  aria-hidden="true": removes decorative elements from the accessibility tree

- Heading outline every page must have:
  H1: page title (one only)
  H2: major section
  H3: subsection within H2
  H4: sub-subsection (use sparingly)

Constraints:
- Never use div or span as interactive elements
- Never use heading elements purely for visual styling — use CSS instead
- Never skip heading levels in the document outline