Accessibility Required

Let people skip to the content

Make a "Skip to main content" link the first thing that takes focus on every page. It meets WCAG criterion 2.4.1 (A) together with landmarks.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Put the skip link first in body, hidden until it gets focus. Point it at <main id="main" tabindex="-1">.

Example

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

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

How to check

A browser test presses Tab once after load. Focus is on a visible link to #main. Pressing Enter moves focus into main.

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/skip-links.