Navigation

Use labels that clearly indicate the function of links

Use labels that accurately describe the destination and/or resulting action of links. Avoid using meaningless labels such as "Go" or "Click Here." Instead, enable users to scan and quickly identify links they want to take. Vision impaired users scan for links using screen readers. For this feature to be useful, however, link labels must make sense on their own, or out of context.

Provide feedback that tells users where they are in your site

Provide visual feedback that responds when users make a selection, and remains dominant until they make a new selection. Good feedback in the design of links includes visual and possibly audio changes that occur in stages:

Use navigation elements consistently

Once users see a link, they expect when they see it again it will look the same, be in the same location, and function the same. If it has changed, users may be forced to relearn the button, which will delay their completion of tasks.

Provide persistent links to the home page and to high-level site categories

Provide links to the homepage and high-level site categories on every page of your site. These persistent links enable users to easily navigate from one area of the site to another.

Be sure the persistent links include a link to your shopping pages, or links to important sections of your e-commerce pages. Feature these links either in the masthead or in a left-side navigation bar because these are the areas users expect to find them.

Ensure that image maps are accessible to vision-impaired users

In general, use client-side rather than server-side image maps, and provide alt text for each hot spot. For client-side maps, HTML code defines the clickable regions of the image and the destination of links. The processing of the image map occurs on the client's system. Client-side maps provide better accessibility since they can be used with alt text. They also load and process more quickly because they require less communication with the server.

For server-side maps, the server defines the clickable regions of the image and the destination of links. They are useful for maintaining maps with links that change frequently, but screen readers for the blind cannot extract any descriptive information about server-side maps. If you must use a server-side image map because the image and its links will change frequently, provide HTML text links below or near image map that repeat the links that appear in the map.

Include a "skip to main content" link at the top of each page

At the top of each page, include an invisible "skip to main content" link that allows vision-impaired users with screen readers to avoid listening to navigation links, such as those in the top banner, that repeat on every page. This link can be invisible to sighted users by using a tiny image that is the same color as the background with alt text = "skip to main content." The link should take users to the top of the content section of the page. For instance, in these guidelines, it takes users to the heading above the first guideline on the page.

The ability to skip navigation items is particularly useful on sites that use a top banner and left-side navigation bar. On these sites, a link to the main content can save users substantial time. It also eliminates monotony and provides greater control over the interface.

Test the navigation design

To determine whether users can find information easily, test your navigation design as soon as possible. You do not necessarily need all the links to be active or all the pictures to be in place, but you will need the significant navigation mechanisms to be working and some of the content to be placed. Ask representative users to find particular information. In your testing, answer the following questions:

• Do users know how to find the information they need?

• Does your navigation design connect all related information in a sequence that makes sense to users?

• Do users know where they are in the site structure?

• Do users know how to return to points they visited previously?

• Are there any unnecessary links that clutter the navigation design?