Skip-links play an important role in making a website accessible for everybody.
Last week I read a blog post in which the author claims that skip links are unnecessary and don't really improve accessibility. During a user test the author did, none of the screen reader users used skip-links. In his test, most users didn't even understood what they were for. He also argues that navigation should not be the first content that a user should see, but should be placed below the main content on a page. This way users will first see the content they are looking for and then all the meta information.
In an ideal world that might make sense, but that is not how most websites are set up: almost all website start with a header and navigation. Therefore, I think that skip-links have great value in making a website more accessible. Here’s why.
What are skip-links?
Skip-links are internal links at the top of the page that enable keyboard users and users of assistive technology to jump over parts of the UI that are repeated on all pages. When using a skip-link, the focus jumps to the linked content. This is often used to skip over navigation: the user doesn't have to tab over all navigation elements, but can bring the main content immediately into view.
Skip-links are useful
Sighted users can scan a page quickly and then dismiss the repeating content and focus on the main content. Using skip links we can provide the same user experience for users of assistive technology.
Research by WebAIM shows that 30.2% of screen reader users use skip-links frequently. While this research also shows that this number is declining, it is still a significant amount of users. Not providing skip-links for those users will make navigating a web page harder for them.
Because skip-links provide accessibility improvements, they are part of the Web Content Accessibility Guidelines (WCAG). In the WCAG skip-links are described in the section on bypass blocks. Another argument for implementing skip links is that websites must conform to the WCAG for legal reasons. For example, the EU created legislation that makes WCAG compliance mandatory.
Implementing skip-links
Maybe one of the reasons skip-links might be underused or confusing to users is that they are often not consistently implemented. This article describes how to make effective skip-links. When creating skip-links, make sure to do this:
- The skip-link is the first focusable element on the page.
- A skip-link is always an
<a>pointing to an id of the section it links to. - The target section must be focusable.
- The label of a skip-link must describe in easy to understand language which section it points to.
Below is an example of a skip-link done right. Create an anchor with an id pointing to the section the user can skip to. Provide a clear label in the anchor tag.
<a href="#content" class="skip-link">
Skip to main content
</a>Add an id to the element the skip-link points to. Make sure to add a negative tabindex in order to improve screen reader accessibility[1].
<main id="content" tabindex="-1">
...
</main>When a skip-link is not focused, hide the skip link visually, but make sure it stays in the DOM.
.skip-link {
position: absolute;
top: 1rem;
left: -9999rem;
...
}
.skip-link:focus {
left: 1rem;
}Implement skip-links correctly and a lot of users, be it users with or without a disability, will thank you.
Footnotes
[1] Screen readers give users two ways to navigate: using the system focus and the screen reader cursor. The focus is a way to navigate over focusable elements, the cursor is used to access non-focusable elements. What happens when you link to an element without a negative tabindex, is that the page scrolls to the element and the browser will focus on the next focusable element.
However, the cursor will stay behind on the link. This means that when the user moves their cursor the information next to the link will be read aloud instead of the content of the element the focus jumped to. When giving an element a negative tabindex, both the focus and cursor will move to that element.
