Skip Navigation

Accessibility Example 4. B.

4. Provide clear and consistent navigation and links.

B. REQUIRED Provide a way that permits users to skip repetitive navigation links.

The following example comes from the W3C:
In this example, the MAP element groups a set of links, the "title" attribute identifies it as a navigation bar, and a link at the beginning of the group links to the anchor after the group. Also, note that the links are separated by non-link, printable characters, surrounded by spaces (See next recommendation).

<BODY> 
<MAP title="Navigation Bar"> 
<P>
[<A href="#how">Bypass navigation bar</A>]
[<A href="home.html">Home</A>]
[<A href="search.html">Search</A>]
[<A href="new.html">New and highlighted</A>]
[<A href="sitemap.html">Site map</A>]
</P>
</MAP> 
<H1><A name="how">How to use our site</A></H1>
<!-- content of page --> 
</BODY> 

End of W3C information.

The following examples come from the IBM Accessibility Center:

Image Link to the Main Content

An effective technique is to have a link at the top of the page attached to an unimportant image. The target of the image link is the beginning of the page's main content. This technique is effectively used at the IBM Accessibility Center site.

A person using speech synthesis can activate the link and skip to the main content of the page. The alternative text for the image is skip to main content, which is displayed in graphical browsers when the user moves the mouse over the image.

<a href="#navskip"><img src="http://www.apsu.edu/blank.gif" alt="skip to main content"></a>
...
<a name="navskip"></a><h1> The main content...</h1>

If you use a template on your Web site, ensure that it includes this technique. The target can be part of the template because it does not have to be associated with unique content.

Text Link to the Main Content

A text link is a simple alternative to the first technique. A textual skip navigation link is displayed at the top of the page instead of an image. The American Council of the Blind (ACB) was the first to use this technique.

<a href="#navskip">Skip Navigation Links</a>
...
<a name="navskip"></a><h1> The main content...</h1>

End of IBM information