Visual structure is not enough. We must use Semantic HTML to communicate the structure of our content to assistive technologies. A `div` that looks like a button is not a button; a `span` that looks like a heading is not a heading.

Regulatory Context

Info and Relationships (WCAG 1.3.1) requires that information, structure, and relationships conveyed through presentation can be programmatically determined.

Headings and Labels (WCAG 2.4.6) requires headings to describe the topic or purpose.

EN 301 549 (9.1.3.1) mirrors this requirement for all ICT products.

1. Semantic HTML

Always use the correct HTML element for the job. Use `button` for actions, `a` for links, `table` for tabular data, etc.

Do this

<button onClick={save}>Save</button>

Native keyboard support, focus handling, and role announcement.

Don't do this

<div className="btn" onClick={save}>Save</div>

No keyboard focus, no "button" role, "clickable" div hell.

2. Headings Hierarchy

Screen reader users often browse by headings to get an overview of the page. Structure your page like a document outline.

One `h1` per page: Usually the page title.
Don't skip levels: Do not jump from `h2` to `h4`.
Don't pick by size: Use CSS to style the heading, not the tag (e.g., <h2 className="text-sm">).

3. Landmarks

Landmarks allow users to jump between major sections of the page.

<body> <header> <!-- Banner --> <nav> <!-- Navigation --> ... </nav> </header> <main> <!-- Main Content --> <h1>Page Title</h1> ... <aside> <!-- Complementary --> ... </aside> </main> <footer> <!-- Contentinfo --> ... </footer> </body>