Tutorials from WAC. Click or press ALT+T to return to the Tutorials main page.

Understanding and Applying
Section 508 Standards

divider

Skip Navigation Link:

(o) A method shall be provided that permits users to skip repetitive navigation links.

Consider this page from OSU's Department of Microbiology:

Image of the What's New page from the Department of Microbiology at OSU: http://www.osumicrobiology.org/whatsnew.htm.

Before a screen-reader begins reading the main content, beginning with "What's New" title and "We welcome new faculty . . .", it must read all the "header" information, including 14 separate links. If a nondisabled user returns to the web page and knows that he or she wants to view the contents of that particular page instead of selecting a navigation link to go to another page, he or she may simply look past the links and begin reading wherever the desired text is located. For those who use screen readers or other types of assistive technologies, however, it can be a tedious and time-consuming chore to wait for the assistive technology to work through and announce each of the standard navigational links before getting to the intended location.

To avoid this problem, developers can include a simple "skip navigation" link somewhere near the top of the page (preferably before any other content). This in-page link then directs the screen-reader to the first word of "content" on the page.

Here is an example from the OSU ADA Coordinator's Office web site:

Example of skip navigation used by the ADA Coordinator's site: http://ada.osu.edu.

Because the "skip navigation" link is designed to be used primarily by screen-readers, it does not need to be located in a prominent or even visible part of the page. The barely visible link at the top of the ADA Coordinator's Office pages directs screen-readers to the first word of the main body of text in the center of the page.

Here is how the link appears in HTML code:

  • Skip navigation link:
    < a href="#content">skip navigation</a>
  • Anchor is placed before the start of the main body of text:
    <a name="content"></a>Welcome to the ADA Coordinator's Office . . .

Another useful method for including a skip navigation link is to use a small, blank graphic link. Skip Navigation Link ExampleCan you find the link that appears just before this sentence? It is made from an image file that is 1 pixel wide by 1 pixel tall. Thus, sighted users will not see the link, but screen-readers will read the image ALT tag and link information.

Here is the code that created this skip navigation image link:

<a href="#content"><img src="../images/skipnav_image.gif" alt="Skip Navigation Link Example" name="skipnav" width="1" height="1" border="0" id="skipnav"></a>

Next  Link and graphic of hand pointing to the next page.

divider

(a) Alternate Descriptions for Non-Text Elements | (b) Synchronization with Multimedia | (c) Use Color for Design, not Context | (d) Using Style Sheets | (e) Server-Side Image Maps | (f) Client-side Image Maps | (g & h) Data Table Headers | (i) Using Frames | (j) Flashing or Flickering Elements | (k) Updating Text-Only Versions | (l) Using Scripts to Create Dynamic Pages | (m) Using Applets and Plug-Ins | (n) Using Online Forms | (o) Skip Navigation Link | (p) Using Time Out Scripts | 508 Checklist | Testing for 508 Compliance |

Return to Start of Section 508 Tutorial

Information in this tutorial adapted from the Section 508 web site: http://www.section508.gov and the Access Board's Guide to the Section 508 Standards for Electronic and Information Technology.