DEMOS Project - Accessibility Guide: Skipping repetitive information

Skipping repetitive information

Make it possible for users of braille or screen readers to skip repetitive information, e.g. company headers and navigation links that occur on every page. This can be achieved by adding a link at the top of the page, before the repetitive information, linking to where the main text begins. There are several ways in which this can be done.

Simple text link

The most straight-forward solution is to include a text link at the top of the page:

<a href="#skip">[Skip to main text]</a>

header and navigation links

<a name="skip"></a>

main text

Invisible text link

The text link can be made invisible by giving it the same colour as the page background. This can be achieved by adding a class in the style sheet.

In the HTML document:

<a class="invisible" href="#skip">[Skip to main text]</a>

In the style sheet:

.invisible { color : #ffffff; }

This will display the text in white. On a white background the text will therefore be invisible. Set the colour in the style sheet to the same as your page's background.

» More on Style sheets

Invisible graphic

Alternatively, you can also use an invisible image:

Include a 1 by 1 pixel transparent graphic and give it a meaningful alt attribute. This will be invisible to most users but will not be ignored by screenreader and voice browsers.

<a href="#skip"><img src="skip.gif" width="1" height="1" alt="[Skip navigation]" title="Skip navigation" border="0"></a>

header and navigation links

<a name="skip"></a>

main text

The problem with this technique is that search engines might penalize its use because it is often abused to add hidden keywords to influence the ranking of a page in search results.

Naming the link

Give the link or image a meaningful name or alt attribute: 'Skip navigation', 'Skip to main text', 'Click here to skip to main content', or similar.

| Previous || Table of Contents || Next |