Accessible Design: Best Practices

Navigation

Function of Navigation | Skip Navigation Link | Using Image Navigation |Repeating Link Text| Plug-in Links|Mystery Meat Navigation | Link Order | Keyboard Shortcuts

Provide Clear Navigation Mechanisms

Understanding the Function of Navigation

The Web offers users multiple entry points to sites, as well as multiple navigation paths within sites. Users may enter your site through the "front door" (home page), or a search engine may lead them straight to a page within the site. Users also bring with them different levels of Internet competency, different languages and cultural backgrounds, and different mental models of finding information (some may prefer to browse, some to search, while others like to go straight to an index). Consistent, predictable navigation will help every user make the most of your site.

Following is a list of things to keep in mind when establishing guidelines related to navigation:

• Include standard navigation information on all pages. As a rule, each page should provide a link to at least the main page, site map, search, and basic contact information. In addition, it is often useful to include links to the main sections of the web site.
• Provide at least some contextual information about where the user is in relation to the section of the web site and the web site as well.
• Give users an indication of where the next link will take them -- for example, what type of information it leads to, and whether it takes them off site.
• Make navigation terms as descriptive and straightforward as possible-"clever" or unusual naming schemes are likely to confuse users.
• Decide on a consistent format for your site and stick to it.
• Provide the shortest possible routes to information.
• Ensure that your overall navigation structure will remain stable in the face of additions to the site. You don't want to have to revise the navigation structure on each page every time a new page is added.

Adapted from: "Visual Design and Navigation Guidelines" By Ann Tothill, Association for Progressive Communications (APC) May 2001.

return to top

Using Pop-up Windows

Links that open in new windows can be extremely disorienting to users of assistive technology. These links break the "BACK" and "HISTORY" list. Screen readers may or may not indicate a new window has opened, causing links to appear "dead" -- e.g., nothing appears to happen when the link is activated because new window opens without notice.

Carefully consider when to use links that open in new windows. Generally, there is little advantage to forcing users to keep your site in an open window unless you are certain they will need to return to your site after viewing other pages (e.g. when leaving a form to get more information on required inputs, users may then be expected to return to the form page without the form being reloaded and entered data being cleared). Identify any links that open in a new window using a referenced symbol or plain text.

Example:

Find out more information about this topic*.
Find out more information about this topic (opens in new window).
Note: Links with an asterisk open in a new window.

Skip Navigation Link

Web developers routinely place a host of routine navigational links at a standard location - often across the top, bottom, or side of a page. If a nondisabled user returns to a 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.

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. It should, however, appear as close to the start of the page as possible, right after the BODY tag.

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 . . .

For more ideas on how to setup your skip navigation link, see the WAC 508 Tutorial: Skip Navigation.

return to top

Using Image Navigation.

Several year's ago, a trend began to make image-based navigation with navigation "buttons." Here is an example of image navigation:

Each box in the above navigation bar is an image with an associated link. With the addition of ALT tags, navigation based on images can still be accessible. However, something else to consider when using text in a graphic: some users with low vision use programs that enlarge the elements on their screen so that they can more easily see them. Unfortunately, when the text in an image is enlarged it often becomes pixilated and difficult to read.

For example, take a look at the Department of Molecular Genetics home page (opens in new window). If you increase the text size of the view (use View, Text Size in Internet Explorer or View, Text Zoom in Netscape Navigator), the text in the menu does not increase. This is because this is an image navigation -- each entry in the menu is a small graphic.

As a general design rule, avoid using images to represent text. Instead, format menu text using a style sheet.

Identify Link Targets .

Repeating Link Text

Link text should be different for each target. Use link text that makes sense in a list.

Repeated terms such as "click here", "more", and "go" should be eliminated from the designers link vocabulary.

Instead of: "To find out more, click here."
Try: "Find out more about our workshops."

Identify Plug-in Links

Identify "plug-in" links: PDS, DOCs, Movies, Audio.

read my dissertation [pdf] then listen to my lecture [mp3]
-- correct!

Keep in mind, it does not help to indicate the type of document outside of the link tag. For example:

read my dissertaion (pdf) then listen to my lecture (mp3)
-- incorrect!

Screen reader users and those using alternate forms of navigation often navigate links through a "links list" generated by their browser. Only the text that is enclosed within the link tag (<A>) is included in this links list. Thus, the indication of a PDF or MP3 file would be lost in the example above.

return to top

Mystery Meat Navigation

While there are ways to make image navigation accessible (e.g., using ALT tags), web designers have moved to an even more disturbing trend -- Mystery Meat Navigation. Notably, Mystery Meat Navigation represents a greater problem for sighted users than blind users. Here is an example of this problematic navigation technique:

There are eight links in this navigation bar, yet, it is unclear where any of them go. Only the home page link, represented by an image of a house, is a somewhat universally recognized link symbol. But where does the arrow-up lead to? How about little man running? Or the open book? Not only will users have to guess where the information they want is, returning visitor's will have to play a version of the memory game to remember which images they clicked on before.

Vincent Flanders' site Web Pages That Suck offers an excellent overview to the problems of Mystery Meat Navigation, along with some examples from current sites. You can avoid the problems of Mystery Meat Navigation by following these simple guidelines:

Do not use images for menu items, or, if you must use images for menu items:

1. Provide visible captions to menu images,
2. Provide detailed ALT tags to menu images, and
3. Indicate visited and non-visited links in menus.

return to top

Link Order.

When a user uses the TAB button to scroll through the links on a page, the page is usually followed left to right, top to bottom. While this read-order may work well for most navigation schemes, some become confusing. Here is an example of navigation table:

If tab order is not specified, the links will be highlighted left to right -- "Registration," "Meetings", "Schedule" -- rather than by column.

To change this, you must set the tabindex attribute in the link element. Example:

1. <a href="#sample" tabindex="1">Registration</a>
2. <a href="#sample" tabindex="2">Course Descriptions</a>
3. <a href="#sample" tabindex="3">Future Course Offerings</a>

Note: If you use the tabindex attribute, it is important to set the tabindex for all links and elements on the page.

return to top

Keyboard Shortcuts.

Keyboard access to active elements of a page is important for many users who cannot use a pointing device. Some assistive technology software may include features that allow users to bind keyboard strokes to certain actions. HTML 4.01 allows content developers to specify keyboard shortcuts in documents via the "accesskey" attribute. In general, it is a good idea to add "accesskey" options to frequently used elements, such as navigation links, as well as any element other than links that might otherwise require the use of a mouse click (such as the SEND button on a form).  The WAC uses access keys for our navigation menus. Here is a sample of our HTML code:

<ul class="ulnobullet">
<li class="smallertxt"><a accesskey="W" href="../why_howi.htm"><acronym title="Web Accessibility Center">WAC</acronym> How and Why?</a></li>
< li class="smallertxt">< a accesskey="L" href="../links.htm"> Links and Resources.</a></li>
< li class="smallertxt">< a accesskey="T" href="../tutorials.htm">Tutorials.</a></li>
<li class="smallertxt"><a accesskey="S" href="../stafflist.htm">Staff.</a></li>
<li class="smallertxt"><a accesskey="A" href="../mission.htm">About the <acronym title="Web Accessibility Center">WAC</acronym>.</a></li>
</ul>

return to top

Next