Page has no skip navigation link

What’s wrong

The page has no mechanism to skip past repeated navigation and go directly to the main content.

Why it matters

Keyboard-only users — including people with motor disabilities who cannot use a mouse — must Tab through every navigation link on every page load before reaching the content they came for. On a site with 20 nav items, that’s 20 Tab presses on every single page. A skip link fixes this in one keystroke.

How to fix it

Add a visually hidden skip link as the very first focusable element in your HTML. Show it visually when it receives focus so keyboard users can see it.

<header>
  <nav><!-- 20 links --></nav>
</header>
<main><!-- content --></main>

<a href="#main-content" class="skip-link">
  Skip to main content
</a>
<header>
  <nav><!-- 20 links --></nav>
</header>
<main id="main-content" tabindex="-1">
  <!-- content -->
</main>

.skip-link {
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.2s;
}
.skip-link:focus {
  transform: translateY(0);
}

The tabindex="-1" on <main> is needed in some browsers so the element can receive programmatic focus when the skip link is activated.

Learn more

• WCAG Understanding 2.4.1
• WebAIM: Skip navigation links