digital media access group

...excellent accessibility research and consultancy

home >  

This is a archived version of the DMAG website, but the information remains for reference. Please visit the new website for updated information.

Implementing Skip Navigation

By Scott Milne


Providing a "skip to main page content" link at the start of a page allows users of assistive technologies to bypass the navigation, improving efficiency.


Most users don't arrive at a page by accident, they arrive there on purpose. So, it is common for those users to scan straight to the content of the page, rather than studying the navigational structure surrounding it. Assuming you have titled your pages appropriately, users will be given an immediate indication of where they are. If they are not where they expected to be, they will then use the navigational structure to help them get there. In other words, navigation is secondary to most users, and should be provided as an option, not a necessity.


For sighted users with graphical browsers, there are no barriers to prevent them from scanning straight to the content of a page. For users of some assistive technologies however, each link in the navigational structure must be traversed in turn before the page content is eventually reached. So, to allow these users to treat navigation as an option, a 'skip to main page content' link can be provided at the start of the page.


Anyone using Lynx, or a screen reading technology, or who is browsing with images turned off, will have discovered that this site also has a 'skip to main page content' link, allowing bypassing of the features at the top of the page and the left-hand navigation bar.


How it works

The "skip to main page content" link is one of the best accessibility features in terms of cost-benefit analysis, because it is so simple to provide. Here are the steps to take:

  1. Create a single pixel image "pixel.gif" in a graphics package, save it as transparent.
  2. Use the image as a link at the very start of the page, before the navigation:

    <body><a href="#content"><img border="0" src="images/pixel.gif" 
alt="skip to main page content" /></a>
  3. Place the anchor immediately before the page content:

    <a name="content"></a><h1>Heading for Page Content</h1>

And that's all there is to it. Users of assistive technologies will now be able to browse your website more efficiently, navigation for them will no longer be a necessity, but an option. The feature will also help you satisfy Checkpoint 13.6 of the W3C's Web Content Accessibility Guidelines (WCAG). Good Luck!