This guide looks at skip links, why they are useful and how they should be built.
Skip links do a lot to help improve the browsing experience of users who do not use a mouse. This includes keyboard-only users, screen reader users, switch users and those who use a wide range of more specialist assistive technologies.
What is a skip link?
A skip link is one that helps users jump from one section of a page to another. Mouse users can use their scroll wheel and click on the element below that they were looking for. A non-mouse user can scroll the page using arrow keys or page up/down keys, but these do not move their focus. If a user is looking to interact with content down the page without using a mouse, they will need to tab through all the preceding interactive controls before reaching the one they want. A skip link will make this easier for them.
How do skip links help
Most websites will have a header that contains a navigation menu. This will include anywhere upwards from four interactive elements but will be present at the top of every page. This will typically be navigation links, but can also include functionality such as site search. The navigation being consistently found at the top of every page is a separate part of accessibility considerations. However, without a skip link a non-mouse user will need to pass their focus through every interactive item in the header on every page before they interact with any page-specific content. A skip link is a simple way of allowing non-mouse users to skip the header in a similar way to how mouse users can simply disregard the header when they are looking for content on the page.
Building a skip link
A skip link for a site header is fundamentally a very simple HTML element. It is simply an anchor element pointed at an element which wraps the main page content.
HTML structure
<a href="#mainContent" class="skip-link">Skip to page content</a>The tag above is the basic HTML we need for the link itself.
<main id="mainContent">
…Page content…
</main>Here is the wrapper for the page’s main content. I’ve used a <main> landmark here as in a vacuum this makes sense to meet other accessibility requirements. However, landmark usage is not the topic for this article, so this could easily just be a <div> if you are meeting your landmark requirements through other elements.
The other HTML consideration for a skip link for a site header is placement with the DOM. A skip link should be the first element sitting within the opening <body> tag. That way, it is the first element to get focus when a non-mouse user starts passing through the interactive elements of a page. If your site has other vital accessibility elements, such as a button that pauses all animations, consider the correct order for these to be as helpful for your users as possible.
Styling
Having the basic HTML in place, we can now add styling, which is where skip links start to get smart. Firstly, we can hide skip links when they are not being focussed, meaning mouse and keyboard users will likely never know they are there. Since a skip link offers them no value, this makes a lot of sense.
.skip-link {
position: fixed;
top: -100px;
left: 0;
}
.skip-link:focus-visible {
top: 10px;
}This is all we need to keep the link hidden until it receives focus. We can add other styling to help improve things though.
.skip-link {
position: fixed;
top: -100px;
left: 10px;
padding: 10px 30px;
background-color: #eeeeee;
border: 1px solid #000000;
color: #000000;
border-radius: 5px;
}
.skip-link:focus-visible {
top: 10px;
outline: 2px solid red;
outline-offset: 2px;
}We’ve now made the link look more like a button, which also has the added benefit of helping guarantee sufficient colour contrast with whatever the link might sit on top of in terms of page content. We’ve also added a focus state indicator for the link to make absolutely sure it is clear where the focus is when it falls on the link.
Other uses for skip links
Skip links help meet WCAG Success Criteria 2.4.1 Bypass Blocks. This success criteria says that any block that is repeated across multiple pages should have a skip link. In practice, this should also then apply to site footers, but this tends not to be the case as the footer is the end of the page anyway.
In addition to skipping the site header, any other repeated block should also have a skip link. If an e-commerce site has a sidebar of filters on product listing pages, adding a skip link to jump straight to the product listing will help users. This can be done in one of two ways; 1) the “skip to product listing” link can be added immediately after the “skip to main content” link, giving users multiple options at the very start of the page; 2) the “skip to product listing” link can be added just before the filters component to allow more context-minded skipping. In this second option, a few styling tweaks would be handy:
.skip-filters-link {
position: absolute;
opacity: 0;
top: 10px;
left: 10px;
padding: 10px 30px;
background-color: #eeeeee;
border: 1px solid #000000;
color: #000000;
border-radius: 5px;
pointer-events: none;
}
.skip-link:focus-visible {
opacity: 1;
outline: 2px solid red;
outline-offset: 2px;
}This time, we’ve got a link that will appear in the top left of the filters component and is hidden with 0 opacity until it receives focus. We’ve also added pointer-events: none; to make sure no-one can accidentally click on it while it is invisible.
Another option for using skip links is on carousels. While carousels might not necessarily be repeated across pages, they can be a nightmare to navigate through without a mouse. With links on each slide on a carousel, as well as the navigation and pagination controls, there are usually many interactive controls in a carousel. This also ignores the minefield that is working out an ideal focus order for a carousel component. Offering a similar skip link to the filters on above will allow users an easy way to skip their focus over a carousel if they want to simply move past it.
Closing thoughts
Skip links are a very useful component. They perform a very specific task and they can do this very simply. They make life much easier for those who need them and can be made to not either appear to or hinder the lives of those who don’t need them. There are some really useful applications for them, and hopefully this article has given you the confidence to make the most of them.
