What are Skip Links?

Skip links are internal page links which aid navigation around the current page, rather than to completely new pages. They are mainly used by screen reader users for bypassing or ‘skipping’ over repetitive web page content. Skip links are not usually visible on a web page for sighted users as these users can easily skip over any information such as navigation to the specific content that interests them. Screen reader users, however, can not easily do so unless provided with a specific link to the main content. This article outlines what skip links are, what the issues are with current approaches, and a best-practice method of implementing them.

The Problems with Skip Links

The layouts of many web sites include a consistent set of navigation links at the top of a page followed by the main content further down. Consistent navigation greatly increases the usability of a site, but a long series of links can greatly hinder screen reader and text-browser users. Providing long lists of links at the top of a web page means these users must tab through each link on every page before reaching the main content. One of the main advantages of a CSS based layout is the ability to order the HTML. Skip links should be first in the source code followed by the main content, then after this, the navigation. This allows screen reader users to read the content of the page first, as this is the information most people will be interested in. The skip link provides the option of ‘skipping’ over the content to access the navigation. Ordering source code in this way will not affect the design of a CSS based layout, because positioning can be used to structure the visual display of content. This technique is used on this particular web site and is useful for screen reader users, text-browser users and those viewing the site without CSS enabled devices such as mobile phones and PDA’s. For screen reader users this removes the frustration of listening to the same links every time they access a new page of a web site.

How are Skip Links Implemented?

Before developers were aware of ordering HTML to aid screen reader users, previous methods of implementing skip links include using a 1 pixel transparent graphic at the beginning of the document. The ALT text of the image would be set to ‘Skip to content.’ This method allowed screen reader users to access the skip link as well as rendering it completely invisible to sighted users. Problems with this method arose for sighted users whose disabilities do not allow them to use a mouse and instead must use a keyboard. To access navigation options keyboard users must tab through each available link within that page. If a skip link option is invisible these users may not be aware that it is even on the page, let alone use it. A commonly used method of implementing skip links uses the CSS display: none; rule. A skip link is a normal HTML tag providing a link to a section of content or navigation within your web page.

skip to navigation

With CSS this link is removed from a visual layout using:

.rm { display: none;}

In theory this allows screen reader users to hear and use the skip link option while sighted users will not be aware of its existence. While this method sounds plausible, the results in practise are quite different. The majority of screen readers will actually never find or read a link set to display: none. This in fact hides the link from screen readers in the same way it is hidden from sighted users. As this method hides the skip link from the very users it is supposed to help, another method of implementing these links needs to be used.

The Nomensa Method

The skip links used on this site are accessible to all users. A different method of implementing skip links has been used where the link ‘pops’ into view. As the CSS rule display: none; can not be used, a different way of removing the link from view should be used. The solution to this is to display the link off the screen using the following CSS code:

   .skip {
       position: absolute;
       left: -999em;
       width: 990em;
   }

This displays the link off the left of the screen by -999em, thus hiding it from view but still allowing it to be read by screen readers. To produce the pop-up affect which allows sighted users to only see the link when they tab through it, the link must be brought into view when selected and then positioned where it will be most appropriate. The following code does exactly this:

    a.skip:active,  a.skip:focus {
        left: -8.5em;
        border: 3px #3399cc solid;
        background-color: #fff;
    }

When the keyboard focus is on the skip link, it positions the link within the ‘about this site’ menu. The link is displayed with a blue border and white background. This highlight makes sighted keyboard users aware there is a skip link option when they are tabbing through navigation options as this link is displayed differently to other links within the page. This technique can be viewed on this site by tabbing through the links of this web page.

Conclusion

Skip links are an extremely useful feature of any web page. They are simple to implement and assist users with both physical and visual disabilities. With a CSS layout specifically ordering the HTML source code to display content first will benefit users without CSS enabled devices and screen readers. This reduces the need for unnecessary ‘skip to content’ links as well as allowing users to access the main content of your web pages immediately.

Browser Support

The ‘pop up’ skip link technique has been tested in the following browsers:

Supported Browsers

• IE 6.0;
• IE 5.5;
• IE 5.0;
• Mozilla FireFox 1.0;
• Safari 1.0 (Tabbing with links must be turned on, slight visual discrepancies).

Unsupported Browsers

• Opera 7.1;
• Mac IE 5.1.

Start building accessibility into your projects at the beginning to save time and money, don’t just leave it hanging on the backlog letting it gather up dust. Drill it in.

Can we help?

Nomensa is an award-winning UX design agency with offices in Bristol, London and Amsterdam.

If you would like us to help you with your accessibility challenges or to provide you with an accessibility evaluation of your website/mobile app, please don’t hesitate to get in touch.

You can give us a call on +44 (0) 117 929 7333 or submit this short form. In the meantime, take a full look at the digital accessibility services that we offer.

References

1. Allow users to bypass redundant links
2. Dive into Accessibility
3. Screen Reader Visibility