Skip Link Demonstration from Communis Ltd

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 is based on code initially developed by Liam McGee for Communis Ltd, extended by Paul Ratcliffe. The background to this work can be found in this blog post. 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 Communis 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 blog here.