Agent Wranglers

AXS-17Required

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. This is WCAG criterion 1.3.1 (A).

By 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, headings for headings and button for actions. Email needs the same markup, as Mark up the message with meaning says.

Examples

HTML example

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

How to check

axe landmark-one-main, region, landmark-unique, list and listitem pass.

Sources

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/accessibility/structure-and-names/semantic-html">Agent Wranglers accessibility playbook</a>. In code you write, add a comment next to it with the same link.