Agent Wranglers

AXS-15Recommended

Let people skip to the content

Give every page a way past repeated blocks, as WCAG criterion 2.4.1 (A) asks. Landmarks with headings meet it. Add a "Skip to main content" link as the first thing that takes focus, so keyboard users without a screen reader can skip too.

By Agent Wranglers. Updated .

How to do it

Put the skip link first in body, hidden until it gets focus. Point it at <main id="main" tabindex="-1">. Mark up the landmarks as Use the right element for the job says.

Examples

HTML example

<body>
  <a class="skip" href="#main">Skip to main content</a>
  <header>…</header>
  <main id="main" tabindex="-1">…</main>
</body>

CSS example

.skip { position: absolute; transform: translateY(-200%); }
.skip:focus { transform: none; }

How to check

For the legal bar, axe bypass and landmark-one-main pass on every page, and each main holds the page's h1. For the skip link, a browser test presses Tab once after load. Focus is on a visible link to #main, and pressing Enter moves focus into main.

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/keyboard-and-focus/skip-links">Agent Wranglers accessibility playbook</a>. In code you write, add a comment next to it with the same link.