12.4. Provide “skip links”
A “Skip to content” link must be placed on each page to help keyboard users navigate the page.
This should be the first interactive element in the HTML code.
This internal link will take the user directly to the main content.
<body>
<a class="skiplink" href="#content">Skip to content</a>
[…]
<main role="main" id="content">
[…]
</main>
[…]
</body>
Note
The skip link may be hidden by default. However, it must become visible when it receives keyboard focus.
Therefore, the “skip to content” link should never be hidden using CSS properties display: none; and/or visibility: hidden; which would make it completely unusable with keyboard navigation.
A better approach would be to use the code below:
a.skiplink {
display: inline-block;
color: #555;
background: #fff;
padding: .5em;
position: absolute;
left: -99999rem;
z-index: 100;
}
a.skiplink:focus {
left: 0;
}
Tip
In some situations, it takes a lot of tabbing to reach the main and secondary menus and/or search engine from the top of the page.
In these cases, add skip links, as in the following example:
<ul id="skiplink">
<li>
<a href="#content">Skip to content</a>
</li>
<li>
<a href="#nav">Skip to navigation</a>
</li>
<li>
<a href="#search">Skip to search</a>
</li>
</ul>
Find out more
- Associated accessibility guideline for the graphic design: 1.7. Provide skip links.
- Simple off-screen skip link nav.
- SkipTo, a replacement for old classic “Skipnav” link by PayPal Accessibility Team.
- A lightweight script to animate scrolling to anchor links.