Consistent Navigation

Navigation should be logical and consistent from page to page. The sighted person can scan a page in a matter of seconds to look for information or navigation links. The non-sighted person must listen to the entire page before they know what is on the page and where the navigation is located. By keeping navigation logical and consistent from page to page, the non-sighted person will know what to expect as they navigate through the site. It would be disorienting to a blind user if the navigation links or location of the links changed from page to page. The position of the links is not as important as the consistent position of the links on the page.

There is no specific technique for consistent navigation.

Skip Navigation

Some Web sites use navigation menus (as does this site) where the navigation links are repeated from page to page. When blind users navigate through such a site, they are are forced to listen to all the links on each page unless you provide a means for them to skip straight to the content area. The "Skip Navigation" technique allows them to skip straight to the content (or whatever) on a page.

In the example below, you see the outline of a table that is being used for page layout. The table is made up of two rows and two columns. In the upper left corner of the table, you see the words "Skip Nav". In the largest area of the table, the main content area, you see the word "anchor". The idea is to create an link from the "Skip Nav" area at the very top of the page to the "anchor" in the top of the main content area.

When a screen reader begins reading the page, it starts at the top and reads the first row, so in this case, the screen reader would read in following order:

"Skip Nav" "Welcome to My Web Site."

It would then move on to the second row where the links are, and it (hopefully) would read all of links before moving on to the main content area. If the links are repeated on every page of the site, this could become annoying to someone who wants to go straight to the main content. The "Skip Nav" allows them to skip to the main content.

You are not necessarily limited to the number of "skip to" links on a page. For example, there are three invisible links at the top of every page in this site:

• skip to site navigation
• skip to page navigaton
• skip to page content

Of course we don't want this text to be visible to the visual users. There are ways to make the "Skip Nav" text link invisible to the sighted users. The "Skip Nav" link could be text, or it could be a transparent. If you made the "Skip Nav" a text link, you could color it the same color as the background of the page so sighted visitors would not know it is there. To create a transparent image, you would use a graphics editing program like Photoshop. You would then make the invisible image into an image link with alt text.

Link Names

Links should be meaningful. A screen reader can be made to speak just the links on a page to give the blind user a sense of what is on the page. It would not make sense to the listener if the following text and link combination were used:

Click here to continue to page 2.

The screen reader would speak "click here", which, out of context, would not make sense.

A better approach might be:

Continue to page 2

The listener would understand what would happen if the link were clicked.

Java Menus

When pages use scripting languages to display content like navigation menus, or to create interactive elements like dropdown menus, the information provided by the script should be identified with functional text that can be read by assistive technology. Alternately, you can provide standard text links in addition to the script. You should test your Java or other scripts with a screen reader before using them on your site.

The example below is a representation of a Java menu that flashes out to the right when you mouse over the words on the menu. The words in the first column: Home, CEO's Message, Success Stories, etc., can more than likely be read by a screen reader. The text that appears in the part that flashes out cannot be read by the screen reader.

The following example is a rollover link using two graphic images. Java controls the rollover action. Alternate text can be added to the image you see below; thereby, allowing Jaws to speak the link. Hold your mouse over the image below to see the alt text.

Back to top

Navigate to other How To pages with the links below.