Skip links
Skip links are links placed at the very beginning of a page that allow keyboard users to jump directly to the main content without tabbing through the navigation menu. Hidden by default, they appear on keyboard focus. WCAG 2.4.1 (Level A) requires them on every page with repetitive blocks.
An e-commerce site with an 80-link mega-menu. You navigate by keyboard. Every new page forces you to tab through those 80 links before reaching the content. The skip link solves this problem in a single keystroke.
#How it works
The skip link is an internal link (<a href="#main-content">) placed as the first focusable element on the page. On click or keyboard activation, it moves focus directly to the main content.
<body>
<a href="#content" class="skip-link">Skip to content</a>
<header>
<nav><!-- 40 navigation links --></nav>
</header>
<main id="content" tabindex="-1">
<!-- main content -->
</main>
</body>The tabindex="-1" on <main> ensures that focus moves correctly to the target in all browsers. Without it, some browsers move the view but not the keyboard cursor.
On the styling side, the link is hidden off-screen and reappears on focus:
.skip-link {
position: absolute;
left: -99999rem;
z-index: 100;
}
.skip-link:focus {
left: 0;
top: 0;
padding: 0.5em 1em;
background: #000;
color: #fff;
}WCAG 2.4.1 (Level A) makes this mechanism mandatory on every page with repetitive blocks. RGAA incorporates this requirement at criterion 12.7.
#The mistakes that break everything
According to the WebAIM Million 2023, only 17% of homepages from the million most visited sites offer a skip link. Among those that do, one in six is broken.
Three mistakes consistently come up:
-
display: noneorvisibility: hiddento hide the link. These properties remove it from the accessibility tree. The link becomes inaccessible to keyboard and screen reader users. -
Non-existent target. The
hrefpoints to anidthat isn't on the page. The link goes nowhere. -
No
:focusstyle. The link works for screen reader users, but sighted users who navigate by keyboard never see it. WCAG 2.4.7 requires it to be visible on focus.
#In summary
An <a> at the top of the page, an id on <main>, a style that appears on focus. Three elements, a few lines of code, and your keyboard users save dozens of tabs on every page.