Skip navigation
Skip navigation
Web A11y Checklist
- Overview
- Where do I start?
- Build structure/content
- Provide alternative means of accessing information
- Use color appropriately
- Make tables/docs accessible
Skip Navigation (sometimes called Skip to Main) allows a user to jump to the main content of a page without needing to read the heading and navigation on every page they click on.
Appropriate use
Skip to Main is a hidden link that allows screen readers to skip reading through the navigation bar every time they get to a new page, allowing them to quickly jump to the main content.
There are a few ways to implement this, but one common method is to add the following code directly after the opening body tag on your site:
<body>
<a href="#main" class="skip-to-main-content-link"> Skip to main content </a>
...
...
<main id="main">
...
</main>
</body>
To hide this button off screen, you can add the below line of code to your .CSS file:
.skip-to-main-content-link {
position: absolute;
left: -9999px;
z-index: 999;
padding: 1em;
background-color: black;
color: white;
opacity: 0;
}
.skip-to-main-content-link:focus {
left: 50%;
transform: translateX(-50%);
opacity: 1;
}
How to test for compliance
When the page loads, you should press your Tab Key. An element should appear on the screen that reads “Skip to Main” or “Skip Navigation.”
Common mistakes
Link doesn’t point to a location: A very common mistake we see is for a “Skip to Nav” to exist in the template, but the end user has not identified the point on the page to link to. This essentially creates a dead link on your page. It’s important that at the beginning of your main content you are identifying id=”main” for the link to work.
Link takes you to the top of the page: This link should not bring you to the top of the page, as it then does not serve any purpose. It needs to bring you to a location after the main navigation.