Skip Link Demonstration from Refined Practice, Online Brand Consultants
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 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).
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
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.