O'Reilly logo

Designing Web Navigation by James Kalbach

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

A simple navigation bar on del.icio.us with plain text links

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

The dark blue navigation bar on the Pravda site

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required