[Skip to Contents]

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.

Learn more about 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 title or alt attribute: 'Skip navigation', 'Skip to main text', or something similar.

WAI priorities

| Access Guide Home | Table of Contents | Definitions | Glossary |