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

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:

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.