Skip Navigation Link: Why Your Website Needs One

There are many ways to check the accessibility of your website. There is also one very easy thing you can do to make your website more navigable and accessible for sighted users and screen reader users. That is to add a skip link.

What Is a Skip Link?

A skip link, which may also be called a “skip navigation,” “skip to content,” “skip to main content” or even “bypass link,” is a link on a web page that allows keyboard and screen reader users to skip repeated areas on a website.

The most common type of skip link, which most people refer to, is a “skip navigation” link. This is a link that allows different types of keyboard users to bypass repeated links in the header, such as the navigation menu.

A website may also include a skip link to quickly navigate to another section of a website, such as a “skip to footer” link.

Purpose of a Skip Link

The Web Content Accessibility Guidelines (WCAG) accessibility guidelines—specifically WCAG 2.4.1, Bypass Blocks—states:

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

WCAG does not require a skip link, but that is the best way to achieve this.

Without a skip link, most keyboard users have to start navigating a web page from the top of every page and go through all of the links in the header. This can be time consuming, especially if the header has a lot of menu items and if they visit multiple pages on your website.

Sighted keyboard users are forced to tab on the keyboard to the header, to the navigation and then to every single menu item until they get to the main content of the page.

Sighted keyboard users could be individuals with fine-motor issues who cannot use a mouse, such as people with multiple sclerosis or a broken arm or wrist. They could also be individuals with limited hand or arm mobility, such as from carpel tunnel.

Some of these individuals may use an assistive device that interacts with the keyboard, such as a sip-and-puff device, which allows someone to use part of the mouth, cheek, chin or tongue to use the computer; a mouth stick; or head wand.

Without a skip link, they have to move their mouth, cheek, chin or tongue, or tap their head just to get to the start of the page content. Then they go to another page on the website and have to do it all over again.

Imagine if there are 20 items in the navigation to get through!

For those who would have to repeatedly tab on the keyboard, this could make a repetitive stress injury such as carpel tunnel worse. For those who have to tap their heads or puff through their mouth many times simply to get to the page content, that could be uncomfortable or exhausting.

In any case, that makes for an unhealthy workout! If users have to do that much work on your website, they likely won’t stay.

Screen reader users, who also use the keyboard, at least also have the ability to pull up a list of headings on the page so that they can quickly navigate to the page content. However, that depends on whether or not headings on the page have been added in the first place and then formatted properly.

Testing a Skip Link

It’s easy to test a skip link after you add one or to see if your site has one already.

Simply put your cursor in or tab to the URL area of the browser.

Tab through any browser elements until you get to the web page itself.

The skip link should appear once you tab to it, then hide once you tab to the next hyperlink in the header.

How to Add a Skip Link

If your website doesn’t have a skip link, it’s probably not an accessibility-ready WordPress theme. Having said that, many accessibility-ready themes are not all that accessible either.

Your web designer or developer can easily manually add a skip link to your website. They just need to add a hyperlink in the code that appears toward the beginning of the web page, just inside the body tag. That hyperlink should link to the main content of the web page.

So you would have something like this in the code:

<a class="skiplink" href="#main">Skip to main content</a>

The wording could potentially be “Skip navigation.” It just needs to make it clear to the user that they are skipping the navigation and going straight to the page’s main content.

Then, where the main content starts—typically right before the h1 tag—you would have the following code:

<main id="main"> or <div id="main">

The actual tag it gets added to depends on how your website is set up and the theme you’re using. So it may not be the main tag.

The text that appears after the # sign in the skip link must match exactly to the id attribute assigned to the tag where the main content starts.

Styling a Skip Link

How a skip link looks is important too.

First off, the skip link does not need to always be visible to all users. In fact, if it were, it could take up space in the header that may not be available or make the header area look cluttered. That wouldn’t be helpful to sighted users.

So you can create a skip link that is visibly hidden until it is tabbed to. That means it won’t be revealed at all sighted users, only those who use the keyboard to get to it.

To do this, your web designer or developer can use CSS to visually hide the skip link until it gets tabbed to. Only then will it be visible.

 position: absolute;
 overflow: hidden;
 top: auto;
 left: -10000px;
 width: 1px;
 height: 1px;

.skip-link:focus {
 top: 0px;
 left: 0px;
 width: auto;
 height: auto;

It’s also important that once the skip link appears that its text have sufficient contrast with its background.

So this is a two-step process to make sure the skip link appears and that it is actually legible to all sighted users as well.

Number of Skip Links

Once you understand how useful skip links are, you may wonder if your website could benefit from adding more of them.

The answer is fewer is better. Having a couple of skip links is OK if it’s even warranted. But the very purpose of a skip link is to avoid having to tab through a lot of items. So if you create a lot of skip links, you’re just adding in more links, which recreates the very problem you’re trying to avoid.

Need help making your website accessible?

Contact us.

Leave a Reply

Your email address will not be published. Required fields are marked *