---
title: "Let people skip to the content · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/skip-links
updated: 2026-10-20
licence: "All rights reserved"
---

# Let people skip to the content

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: 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.
- How: Put the skip link first in `body`, hidden until it gets focus. Point it at `<main id="main" tabindex="-1">`.
- Check: A browser test presses Tab once after load. Focus is on a visible link to `#main`. Pressing Enter moves focus into `main`.

Example:

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

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

**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`.

- Previous: [Never hide the focused element](https://agentwranglers.se/playbook/website/accessibility/focus-not-obscured)
- Next: [Lock the page behind open menus](https://agentwranglers.se/playbook/website/accessibility/inert-attribute)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)