Web pages Images Conferencing Chat Audio/Video PowerPoint PDF Advanced Multimedia

Students Affected:

Principles: Build Usable Navigation, Write for Comprehension

What It Means

Most sites use navigation bars or menus to list common hypertext links and provide quick access to all parts of the Web site. These menus should be consistent, understandable, and easy to use. They should also be unobtrusive to students who use screen readers and/or the keyboard to navigate.

If You Do It Wrong: Inconsistent and confusing menus make it difficult for students to navigate. Screen reader users have to listen repeatedly to navigation links on every page before hearing the content.

Try to follow along as a screen reader reads this Web page from top to bottom. Notice that you are forced to listen to everything in the order it appears—you cannot immediately start "reading" the content. This kind of repetition can be very frustrating to screen reader users. (Links open in a new window.) Listen to the audio file. [Windows Media || RealOne] Read the transcript. (Audio files require the free Windows Media Player or RealOne Player. Netscape users may experience problems with Windows Media files.)

If You Do It Right: Students can easily navigate and find relevant content. Students who use screen readers or the keyboard to navigate can skip over repetitive navigation links and jump directly to the main content.

Now listen as a screen reader reads this Web page when the Skip Navigation hyperlink in the upper right corner of the page is clicked. (Links open in a new window.) Listen to the audio file. [Windows Media || RealOne] Read the transcript. (Audio files require the free Windows Media Player or RealOne Player. Netscape users may experience problems with Windows Media files.)

How it Works

1. Include a menu, or a link to the main menu, on every page. Also include a link to the Home page.
   
   
2. Make sure navigation links are consistent from page to page and match the titles of the pages to which they link.
   
   
3. Include a "skip navigation" or "jump to content" link at the top of every page.
   
   a. Create an anchor at the beginning of the main content (after all the navigation links).
   
   

   Example <a name="content">Consistent Navigation</a>

   
   b. Then, create a hyperlink at the very top of your page (before any of the navigation links) that links to the anchor.
   
   

   Example <a href="#content">Skip Navigation</a>

   
   

   Web Page Editor Instructions Microsoft FrontPage Netscape Composer Dreamweaver MX

   
   

   Some Web developers prefer invisible skip navigation links. Although this benefits users who are blind, it does not benefit people with mobility impairments who use the keyboard to navigate. Always try to provide visible skip navigation links, even though it may intrude on page design.

© 1996-2005 University of Maryland University College • 3501 University Blvd. East, Adelphi, MD 20783 • USA
Phone: 800-888-UMUC (800-888-8682)