Skip to main content

30 steps to a more accessible website

Step 11: Skipping over navigation links

If you didn't manage to hack your templates to present your main content first, here's a compromise: provide an link to skip over your navigation links. It's not a perfect solution (presenting your main content first is better), but it's an accepted compromise that many sites use.

This "skip link" is just a regular <a> tag, like any other link, but we'll use CSS to hide it from visual browsers like Internet Explorer and Netscape. It won't affect your page layout at all; it will be completely invisible.

Who benefits?

  1. Marcus benefits. When he visits your page, Lynx will display the link and allow him to skip over your navigation bar and go straight to your main content. See Day 10: Presenting your main content first for an example of why this is so important.
  2. Jackie benefits. When she visits your page, JAWS will read the skip link and allow her to skip over your navigation bar and go straight to your main content.

How to do it

First, use Lynx Viewer on your own home page to determine whether your navigation bar is presented before your main content. If your main content comes first, this tip does not apply to you.

Now define a CSS rule for the skip links, to make them invisible to visual browsers. If you have an external stylesheet, put this rule at the end of it. (If you have multiple external stylesheets, put this rule in the Netscape 4-friendly one.) If you just have a <style> section at the top of your template, add this rule immediately after the <style> tag.

 .skiplink {display:none}

Next, insert the actual skip link immediately after your site name and site description. Can't find them? Search for the appropriate template variables.

Found them? Immediately after your site name and site description, insert the skip link:

<a class="skiplink" href="#startcontent">Skip over navigation</a>

OK, now you need an anchor tag where the skip link should point to; this should be at the start of your main content. The format of your anchor tag depends on what kind of HTML you're using. Look at your DOCTYPE, then do one of the following:

  1. If you're using any variant of HTML 4, add this just before your main content:
  • <a name="startcontent"></a>
  • If you're using any variant of XHTML 1.0, add this just before your main content:
  • <a name="startcontent" id="startcontent"></a>
  • If you're using XHTML 1.1, add this just before your main content:
  • <a id="startcontent"></a>

You should include this kind of skip link on every page of your website, so add it to all your templates.

« Step 10: Presenting main content first | Contents | Step 12: Using colour safely »

This guide is adapted from Dive Into Accessibility by Mark Pilgrim and is shared with the GNU Free Documentation License v1.1