Using Skip Navigation Links

Skip navigation refers to a link in a web page that lets users go directly to the main content of the page. Here, we will take a look at the factors concerning skip navigation and how to do it properly in your pages.

Also, you might find it useful:

• Creating skip navigation links in WordPress
• Creating a skip navigation link in Drupal

What Exactly Do You Need to Do about Skip Navigation?

Skip navigation is a common and good practice. It is therefore required by two documents: Section 508 and Web Content Accessibility Guidelines (WCAG) 2.0.

According to Section 508:

1194.22 (o) A method shall be provided that permits users to skip repetitive navigation links.

According to WCAG:

2.4.1 – A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)

So Section 508 requires you to provide a method, while WCAG 2.0 requires you to provide a mechanism. This may be quite confusing, given the terms used by each document. However, later on we will try to make things clearer. For now, it is important to know that we need to provide a way to skip repetitive web content.

What Exactly Do You Need to Skip?

Based on the information above, Section 508 tells us to provide a method to skip repetitive navigation links. With this in mind, one may ask what is considered to be repetitive. Is it content that is repeated once on each page? Is it content that is repeated ten times on each page?

Also, WCAG tells us to provide a mechanism to bypass blocks of content that are repeated. But what is a block of content?

Ideally, if you have more than two links before the main content, you should provide a skip navigation to go to the content. Remember not to make users skip information such as a logo. Instead, you should make users skip any block of information or functionality such as a slide slogan or slide navigation.

Why Do You Need to Create Skip Navigation?

Skip navigation helps Internet users with special needs. There are many Internet users who have difficulties in using the keyboard or the mouse. There are also many Internet users with dexterity issues. If there is a block of content or a set of links on every single page, these people would need to tab or arrow down through all the links to get to the main content.

Similarly, there are blind Internet users who cannot see the layout of the screen and quickly scroll down to the main content. When they are frequently working on websites having repetitive links on each page, they would be wasting a lot of time scrolling to get to the page’s main content.

How Skip Navigation Works

To help these groups of Internet users, you need to provide a skip navigation link. A skip navigation is like a bookmark on a page. You first have to make a bookmark at the beginning of the main content. Then you create a link which is going to be the first tab stop on the page. So when you start tabbing down from the very top of the page, this will be the skip navigation link which is the first you hit. That will take you to this bookmark.

Here is a sample code for the skip navigation link:

This is the skipnav link which goes on the top of the page:


<a href="#content">Skip to Content</a>


And this is the code you insert at the beginning of the content or where your block you want to skip ends:


<a name="content"> </a>


There is no conventional naming for the skip navigation link, although “skip navigation” is the most widely used one. You can call it skip navigation, skip to content, or jump to content. It really depends on your preference.

A Common Issue Regarding the Skip Navigation Link

There has been a common belief that skip navigation is only for blind people. As a result, web developers devised this solution. First, they created an image link which is 1 pixel by 1 pixel. In modern resolution, this image is so small that sighted people would not notice it.

Then they attached an alt tag to this image that says “Skip navigation”. So for sighted people, this skip navigation link is virtually invisible. But blind people using a screen reader would find this skip navigation link. They can activate this link which would quickly take them to the main content.

This feature is good, but since people with dexterity issues also need skip navigation links, it doesn’t really help them at all.

Other Alternatives to Skip Navigation

You can also provide an access key to skip a repetitive block of information. In your pages, you can also inform blind users that they can use headings to skip through links. However, with this option, you are only providing a solution for blind people and not for other persons with disabilities.

You can use these alternative techniques, but if at all possible, try to stick with a visible skip navigation link. This ensures that you provide this feature to everyone who needs it.