What's a "Skip Navigation" link and why do I need one?
If you're in the majority of users (statistically speaking, you probably are), you can look at a page as soon as it loads and start viewing the main content right away. By automatically ignoring the elements that are present on all pages of a site (header navigation, left-side ads, etc), you can dive right into what brought you there in the first place. Grab hold of your mouse and click right on the button or link you want, regardless of where it is on the page.
Unfortunately, many users aren't able to do this. Some examples are:
Users with low vision, blindness, or a cognitive disability may use a screen reader to navigate the web, which reads out elements on web pages one at a time.
Users who have difficulty making the precise movements necessary to use a mouse may primarily or exclusively use a keyboard to interact with the web, using the Tab key to move through each interactive element in order. Many power users also use keyboards to navigate web pages or web applications quickly.
Without the ability to jump to the part of the page they wish to engage with, they have to start at the top and work their way down every page. That's so dang tedious!
This issue is the reason behind WCAG Success Criterion 2.4.1: Bypass Blocks, requiring that "a mechanism is available to bypass blocks of content that are repeated on multiple Web pages."
Luckily for us, there is a simple way to account for this: the "Skip Navigation" or "Skip to Main Content" link.
A "Skip Navigation" link sits at the top of a web page as the very first interactive element. Before proceeding into the page's header elements and nested navigation menus, they have the option to skip past that nonsense and get to the juicy main content.
How do I make a "Skip Navigation" link?
The steps for creating great "Skip Navigation" links are straightforward:
Give the main content an id.
Add a link to the top of the page that targets the main content.
Use JavaScript to change focus (if necessary).
Hide the link with CSS.
Give the main content an id
For the "Skip Navigation" link to know where the main content is on the page, we need to give it a unique identifier that the link can target. This is done by slapping an id property on the wrapping element.
<main id="maincontent">
...
</main>
It's recommended that your page uses a <main> element to wrap the main content of your page so that assistive technologies like screen readers can identify it. That's a topic for a different article, so we'll leave it at that for now.
Add a link to the top of the page that targets the main content
Now that we have a way for our new link to find the main content, we need to add said link to the page. This will be an <a> element with an href property set to the id of the main content (see the previous step), preceded by a #.
<a href="#maincontent" id="skiplink" class="skiplink" >Skip to Main Content</a>
Activating that link will take the user to the main content, skipping past that pesky navigation menu so they can slurp up that sweet sweet main content. Yum.
Note: The text in the Skip Navigation link must be straightforward to understand quickly since this is all about getting users where they need to go faster and more conveniently. With that in mind, it is recommended that the text used for the link is either "Skip Navigation" or, my personal preference, "Skip to Main Content."
Use JavaScript to change focus (if necessary)
Activating our cute little "Skip Navigation" link takes us to the correct spot on the page now, but sometimes that isn't quite enough to get the job done. Depending on the browser and the setup of the page, the focus may not have moved to the main content like we want. Using JavaScript we can make sure that activating the link also moves focus past the unwanted elements.
First, we need to make sure the main content wrapper is focusable by giving it a tabindex property. We don't want it to be added to the page's tab sequence though. If we set the tabindex to -1, the element becomes focusable but doesn't exist in the tab sequence. Perfection.
<main id="maincontent" tabindex="-1">
...
</main>
Next, we just add an event listener to the "Skip Navigation" link so the focus is correctly moved whenever it is activated. We can use the focus() function on the DOM Node class to accomplish this.
const skipNavLink = document.querySelector("#skiplink");
skipNavLink.addEventListener("click", () => {
const mainContent = document.querySelector("#maincontent");
mainContent.focus();
});
With that, clicking or pressing Enter on the "Skip Navigation" link will jump the user to the main content and ensure that the keyboard focus has skipped all prior elements in the tab sequence!
Hide the link with CSS
Whoa whoa whoa whoa whoa. "Hide the link?" Didn't we just go through the trouble of making it? Why would we hide it?!
Well, hear me out.
Yes, we have this incredibly useful link that improves the experience of lots of our users. But what about the majority of users who don't need it? There's no reason to clutter up the UI with links most people don't need. Thus, we hide it!
Using CSS, we can hide the "Skip Navigation" link by default, and only display it when it's needed. Translation: if the link isn't focused, we don't need to see it.
There is a plethora of ways to accomplish making the "Skip Navigation" link only visible when focused. Here is one:
.skiplink {
position: absolute;
left: -9999px;
opacity: 0;
z-index: 1000;
}
.skiplink:focus {
left: 50%;
transform: translateX(-50%);
opacity: 1;
}
As I said, this is just one way of conditionally hiding the link. The important part is that it's completely hidden by default, and is visible when focused.
Also, while you're in the CSS, you might as well style up your link to look just as rad as the rest of your site! The users who need this link must have the same quality experience as other users. Everyone deserves to see your killer designs!
Conclusion
So there you have it. Now you have a dope as heck "Skip Navigation" link that improves the experience of any user of your site that doesn't use a mouse.
Have a question about how to implement any of the above steps? Or maybe you've caught something you think is missing or incorrect? If any of that sounds like you, comment down below so we can chat about it!
