Designing Web Navigation

NAVIGATION BARS AND TABS

The simplest form of a navigation bar is a horizontal chain of plain hypertext links. These are sometimes separated by a vertical line (pipe) as shown in the main navigation bar on del.icio.us (Figure 3-23).

Figure 3-23. A simple navigation bar on del.icio.us with plain text links

Accessibility

The inclusion of a text-based pipe may cause accessibility issues. Screen readers will read the character aloud between each link name. Alternatively, you can represent the pipe as an image with the ALT attribute set to "" (blank quotes). This, of course, adds weight to the page—though minimal—and requires a hit on the server for the initial image.

Note that this also applies to breadcrumb trails, discussed earlier. The trail shown in Figure 3-10 might be read by a screen reader as: "You are here colon NHS England is greater than news is greater than other health news." Some screen reader users may be used to this; others may find it disorienting.

Navigation bars often have a colored background, or may use graphical images for the options. This creates a strong sense of a bar across the page. The web site for the Russian newspaper Pravda, for instance, uses a navigation bar with white text on a dark blue background (www.pravda.ru, Figure 3-24).

Figure 3-24. The dark blue navigation ...