Adding Skip Navigation Links for Better Web Accessibility (2024)

Improve the accessibility and usability of the websites you design by adding a skip navigation link for keyboard users. Find out why skip links are important, who they help, how to check for a skip link and how to add one to an existing website.

If you’re new to web accessibility or find it daunting, you’ll be happy to know there are some small things you can do when you build websites that have big impact. One of them is adding a skip link. It will improve the accessibility and usability of your websites.

If you’re already building accessible websites, you may have heard about skip links but maybe you don’t know exactly why they’re useful or who they’re for.

So whichever camp you fall into, I’m going to talk all about skip links today—what they are, who skip links benefit, how to add a skip link and how to test your site for one.

First, I want to explain what a skip link is. It’s a hyperlink that links to another part of the same web page. Usually, we see a skip link in the form of a “skip navigation” link or “skip to main content” link.

Individuals who use a keyboard to get around a website use this type of link to skip areas on a website, such as the header and navigation. They are repeated at the top of each page. Without a skip link, they would have to go through every single link to get to the main page content. Not only that, but they would have to do it on every page.

It’s not uncommon to also encounter a “skip to footer” link on websites, which takes you directly to the footer. This may be beneficial in certain situations.

If you’re familiar with the Web Content Accessibility Guidelines (WCAG), you may know that there is a guideline, 2.4.1, called Bypass Blocks, which says that:

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

A skip link is not specifically required, but it’s the best way to be able to skip blocks of repeated content.

A skip link is not used by everyone and is helpful for certain individuals—keyboard users.

The first group is sighted keyboard users, who prefer or cannot use a mouse. They may be individuals with a motor disability, such as arthritis, multiple sclerosis, carpal tunnel, or a broken arm or wrist.

Another group is sighted users who use an assistive device that interacts with the keyboard, such as a sip-and-puff device, mouth stick or head wand.

With a sip-and-puff system, individuals can use the computer with their mouth, cheek, chin or tongue. With a mouth stick, they place the stick in their mouth and use it to press keys on the keyboard. A head wand is used by individuals who tap their head.

Whether or not they also use an assistive device, sighted keyboard users use the Tab key to tab from the top of a web page downward through the interactive elements on the page—hyperlinks, form fields and buttons, for example.

If the web page does not have a skip navigation link, then they have to tab through every single hyperlink in the navigation and any other hyperlinks that may be in the header just to get to the main content of the page.

Imagine a menu with five hyperlinks under the first menu item, five more under the second menu item, 10 under the next and so on.

That’s a lot of hyperlinks to tab through! That’s a lot of work for someone to do to get to the content they’re looking for on a website.

It’s not just an inconvenience, like of their time, either. It can make things uncomfortable or painful for individuals with a motor issue or repetitive stress injury.

Now imagine what someone using a keyboard along with an assistive device might have to go through to get around a web page without a skip link!

Should someone be expected to tap their heads 20 times to get to the main page content? Should they have to puff out of their mouth 20 times? It is definitely not OK to ask people to do this, but yet many websites are requiring this.

Another group that is served by skip links is screen reader users. They use the keyboard along with the screen reader.

You may be surprised to find out that they are not as inconvenienced by blocks of repeat header hyperlinks as sighted keyboard users are. Screen reader users are at least able to use keyboard commands to bring up a list of headings or hyperlinks on a page, for example. But that is only helpful for them if those things have been added to the page and formatted properly.

It’s easy to check a website to see if the header includes a skip link or not.

All you have to do is put the cursor in the URL field of the browser or put it at the top of the web page and then hit the Tab key until you get onto the page itself and then to the navigation links.

If there is a skip link, it usually appears before you tab to the hyperlinked logo (if the logo is hyperlinked) or the navigation or other hyperlinks in the header area. You should see it when you tab to it.

If the website does not have a skip link, it’s probably not an accessibility-ready theme, so it likely has other accessibility issues. On the other hand, just because it has a skip link doesn’t mean it’s a good theme either. Check out my episode on accessibility-ready WordPress themes for more on that.

But if you need to add a skip link, it’s actually very simple to do so.

Since you want it to be on every page, you’ll want to add it to the header template for the website. If there is more than one header template file, you’ll want to add it to all of them.

Then, in the HTML code, add a hyperlink that appears toward the beginning of the web page, usually right after the body tag. It should be one of the first hyperlinks that someone can tab to.

It’s just a line of code—a hyperlink that links to the main content area of the web page:

<a href="#main" class="skip-link">Skip to main content</a>

It could potentially say “Skip navigation” instead. Just make it obvious to the user what the link is for.

Then, where the main content starts—usually the <main> tag, but it could potentially be a <div> tag, as it depends on the theme setup—you would add an id with the exact same name as the anchor in the hyperlink you just added:
<main id="main">

Now, you could potentially have a skip link that shows all the time. But this takes up space in the header area, which is usually limited. It also isn’t necessary for all users, so you can just present it to those who will use it.

This requires some minor CSS work.

In the CSS file, to only visually hide the skip link, add the following code, but also name it the same class that you applied to the skip link hyperlink:

.skip-link {
 position: absolute;
 overflow: hidden;
 top: auto;
 left: -10000px;
 width: 1px;
 height: 1px;
}
.skip-link:focus {
 top: 0px;
 left: 0px;
 width: auto;
 height: auto;
}

It is crucial to avoid using visibility: hidden or display: none. Doing so will hide the skip link from all users.

You can style the colors and the exact position and width however you like. But it is important that the skip link have sufficient contrast with its background when it appears on screen.

So the skip link needs to be functional (taking keyboard users to the main content on the page) but also readable by all sighted keyboard users, including those who may have low vision.

Now that you know how helpful skip links are to many users, you may be asking yourself if you should add multiple skip links to the websites you build.

Probably not, although complex sites could potentially benefit from maybe one more skip link.

But remember the sole purpose of a skip link—at least, a skip navigation link. That is for sighted keyboard users to avoid having to tab through repeated hyperlinks in the header.

If you add additional skip links to a web page, you’re just creating more hyperlinks for those users to have to tab through. That defeats the very purpose of having a skip link to begin with.

Plus, it’s helpful to understand that screen reader users can use keyboard shortcuts to pull up a list of headings or hyperlinks on a web page so that they can easily jump to other areas of the page. Well, that’s as long as those headings and hyperlinks have been formatted properly.

Want to find out 3 other easy things you can do to make your websites more accessible?

Attend my free workshop, where I’ll teach you this as well as share 3 common mistakes most web designers and developers make.

Register for the workshop

Originally published as a podcast and transcript are available at https://creative-boost.com/skip-navigation-links