Navigation

Screen readers and text based browsers read text from left to right, across and down, from cell to cell, and frame to frame. You can use this knowledge to your advantage as you design your site's architecture so that information will flow logically. You can further improve accessibility by making it easier for users to navigate through a site by using descriptive link terminology and titles, skip links, keyboard shortcuts, and tabbing.

For example, this site has skip links in the cells immediately following the search box. This allows users to jump to content, back to the search box, or to accessibility information about the site. Primary navigation is in the third row (after graphics), followed by page navigation in the first column of the fourth row. Content follows in the second column of the fourth row. The site also provides links to the main sections of the site through access keys.

As a screen reader moves through the site, it will read the skip links first, primary navigation next, secondary navigation after that and content last. Less frequently used links such as contact information and the site map appear after content. This is a conventional hierarchy and provides a logical flow to the page structure.

You can also check the sequence a screen reader follows for a web page by using The Wave evaluation tool (www.temple.edu/instituteondisabilities/piat/wave/).

Return to top

Link Terminology and Titles

Persons who are blind or have low vision often navigate from link to link by tabbing within a web page, with the links read aloud to them by screen readers. Page links can also be read aloud in a list. As a result, it is crucial that the terminology for links make sense by itself.

A link that says "Click Here" is meaningless since there is no description of what it is or where it will take you. Instead, a term such as "More information about accessibility" should be used. Moreover, "Click here" is redundant to blind users since screen readers announce each link, and sighted users understand that text provides a link so long as the accepted protocol of underlining links is followed.

Also, since screen reader users can choose to have either link text or titles read to them, it is important that the <title> tag be used for links. Internet Explorer will also display <title> tag content, creating additional context for sighted users.

Code Example:

<a href="#LinkTitle" 
title="Using titles in links to aid navigation"></a>

Skip Links

Without skip links, page navigation will be read each time a screen reader comes to a page. This will be tedious and time-consuming. Putting a link at the top of each page to the first line of content enables users to skip the navigation at their discretion.

Code Example:

<td><a href="#Content" 
title="Skip to page content"></a></td>
<a name="Content"></a>

Likewise, it is helpful to provide skips in the body of the content to the top of each page. This will reduce scrolling for people using text enlargers.

When creating skip links make sure your page title and headings are descriptive enough to provide context for users, since they become your user's principle means of navigation.

Return to top

Keyboard Shortcuts

For the same reasons it is helpful to provide access keys to the main navigation items and frequently used commands on a site. This enables someone using a screen reader to access an item with a single keystroke combination: alt with the specified key for PCs, command with the specified key for Macs. The convention is to underline the letter associated with the accesskey.

Code Example:

<td><a href="#Content" 
title="Skip to content" 
accesskey="c"></a></td>

Tabbing

Navigation can be facilitated by designating tab order with the Tabindex tag. This is particularly true for sites that do not have a hierarchical structure or layout, for example, those with extensive use of image maps, or those built with tables containing many content areas.

Code Example:

<p><a href="Structure.html" 
tabindex="13">Structure</a></p>

Return to top

Previous Section: Structure

Next Section: Appearance