Include a skip to main content mechanism
Applicable Role(s): Developer
Overview
Users that navigate by keyboard need a way to quickly jump over repeated sections of the content like headers and navigation. Adding a skip to main content link helps users get to the main content quicker, with less fatigue and frustration.
Best Practices and Tips
- The skip to main content link should be the first focusable element on the page.
- The skip link should either be always visible, or visible on keyboard focus.
Examples/Patterns
On Western sites, the skip link is visible on focus:
Code
The skip link goes to the element with the matching ID, in this case the main content.
Version 1
<body>
<a href="#main-content"
class="visually-hidden focusable">
Skip to main content
</a>
...
<main id="main-content">
...
</body>
Version 2
<body>
<header>
<a href="#main-content"
class="visually-hidden focusable">
Skip to main content
</a>
...
</header>
...
<main id="main-content">
...
</body>
Putting the skip link within the header will nest it in a landmark, which makes it detectable to people navigating by landmark.
Styles for skip link visible on focus
These styles are based on the visually-hidden class.
.focusable:focus {
position: absolute !important;
z-index: 3;
top: 0;
left: 12px;
clip: initial;
width: inherit;
height: inherit;
/* other styles as needed */
}