Home › Details by Tech

Skip Navigation

Fri, 03/27/2009 - 17:16 — kvl5046

This Page

  1. Why Skip Navigation Links?
  2. An Inaccessible Example
  3. Skip Link Method 1 - Pixel with Alt Text
  4. Alternative Methods

Synopsis

It is recommended that a hidden "Skip to Content" link be included before the site's main navigation, but this one link is usually sufficient.

Users with screenreaders can skip between major headers and subheaders which are tagged H2,H3,H4.

Why Skip Navigation Links?

Having a consistent set of links at the top or left side of a document is beneficial for both usability and for people with some mobility impairments as they may not need to move the mouse as far to reach the navigation.

But for users with screen readers, hearing the same list of links at the beginning of each page is time consuming and potentially irritating. Therefore a Skip Navigation strategy should be included to allow users of screen readers to skip over a block of navigational links.

SECTION 508 - A method shall be provided that permits users to skip repetitive navigation links or very long lists of links.

 

Top of Page

Skip Link Method 1 - Pixel with Alt Text

In the first method, an invisible pixel graphic is placed before the navigation with the ALT tag reading "Skip to Content." This is turned into a link which goes to a page-internal link further down the page. Note that the image BORDER should be set to "0" in order to keep the image hidden from visual browsers.

View Example

Skip Navigation [A Bunch of navigation buttons/tabs]

[Content Starts Here]

In visual browsers, the hidden graphic is marked by a blue dot before the "[A Bunch...]" because the border was not set to 0.

View the Code

<a href="#skip">
<img src="transparent-pixel.gif" alt="Skip Content " border="0" >
</a >

<!-- DIV tags are used to break the pageinto sections. No formatting is visible unless CSS formatting is applied-->

<div id="navigation">[A Bunch of navigation buttons/tabs]</div>

<div id="content">
<a name="skip" > </a > [Content Starts Here]
</div>

Top of Page

Alternative Approaches

The Web AIM Skip Navigation Page lists some alternatives including making the Skip to Content link visible when a user tabs to it on a keyboard. This allows both motion impaired users and screen reader users to take advantage of it.

Links

Top of Page

‹ ScriptsupTables for Data ›