Agent Wranglers

Accessibility Required

Use the right element for the job

Use landmark elements (header, nav, main, footer) and the right element for each job, with one main per page.

By Erik Bergstedt, Agent Wranglers. Updated .

How to do it

Use header, nav, one main and footer. Name each nav with aria-label when there are several. Use lists for lists and button for actions.

Example

<header>
  <nav aria-label="Main">…</nav>
</header>
<main>…</main>
<footer>
  <nav aria-label="Footer">…</nav>
</footer>

How to check

axe landmark rules pass. A screen reader's landmark list makes sense.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/semantic-html.