Skip Link Demonstration from Refined Practice, Online Brand Consultants

This technique was written in 2009. For up-to-date advice on skip links please refer to the latest article on our [RPress] site.

This page demonstrates a skip link that is known to work natively in Internet Explorer 5.5, IE 6, IE 7, IE 8, Firefox 2.x and Firefox 3.x. It was developed by Paul Ratcliffe of Refined Practice. The background to this work can be found in this blog post in our 'Refine Your Website' series. It is also known to work with the screenreaders JAWS 10, Window Eyes 7.01 (when browsing with Internet Explorer) and NVDA 0.6.

The skiplink is also known to work in Safari and Chrome, but this functionality requires javascript due to the odd focus model employed by WebKit browsers. To test, use the tab key to navigate the page and trigger the skip link. The same javascript also makes the skip link function in Opera (though most Opera keyboard users are likely to be using alternative methods to skip to the main content rather than skip links – see http://www.opera.com/browser/tutorials/nomouse/).

The skip link moves the keyboard focus (and hence the reading cursor in screenreaders) to directly before the h1 at the top of the main content on the page. Pressing the TAB key after activating the skip link will move the keyboard focus to the link in the first paragraph to the blog post, then on the link about Opera, then to this link for the Refined Practice home page.

This page also implements WAI-ARIA Landmark Roles, which are described rather nicely in this blog post from the Paciello Group. Landmark roles will (hopefully) one day remove the need for skip to content links completely (as well as providing much easier keyboard navigation all-round), so we suggest you start implementing them now (and yes, we know they don't validate, but at the end of the day validation isn't everything).

The skip link has 4 sections:

• Skip link styling: This ensures that the skiplink is made visible when it receives keyboard focus. Usually held in a separate CSS file, embedded in the HTML for this demonstration.
• The skip link itself: Appears right at the start of the page content.
• The skip target: Appears just before where you want the keyboard focus to move to (usually just before the main content).
• Skip link javascript: Used to make the skip link function on WebKit browsers such as Safari and Chrome, and on Opera.

View the source of this page to see how the skip link works. Have fun! Post any comments/feedback to the Refined Practice blog here.

More examples and tutorials

If you found this useful please check out the rest of our Refine Your Website series. Our article on the importance of headers might be particularly interesting.

This tutorial originally appeared on the website of Paul's previous company, Communis Ltd. Thanks to Liam McGee of Communis for his help in developing the original skip link code on which this is based.