Evaluating Navigation Elements

The following navigation elements are necessary for those using assistive technology to orient themselves on a web page.

  • Unique <title> element
  • Unique <h1> element that matches part or all of the <title> element.
  • Proper heading hierarchy: the <h2> tags follow the <h1> tag, the <h3> tags follow the <h2> tags, etc.
  • Desciptive link text

The following procedures can be used to check each element.

Check the <title>

  1. Navigate to the page you wish to check.

  2. Identify <title> by examining the text that appears on the top of the browser window. Alternatively, you may use the “View Source” option for your particular browser to identify the <title>. It will be near the top of the page in the <head> section.

  3. Verify that the page <title> uniquely identifies the page.

Check the <h1> heading and heading hierarchy

  1. If you haven’t done so already, install the WAVE toolbar for firefox.

  2. After restarting Firefox, the following toolbar will appear at the top of the browser window:

    screen shot of webaim toolbar
  3. Select the Outline icon wave outline icon to view the heading hierarchy. The page will refresh, and you will see something like the following display:

    screen shot of wave outline view
  4. Verify that the <h1> heading exists and matches a subset of the <title> text.

  5. Verify that the <h2> tags are listed under the <h1> tag, the <h3> tags are listed under <h2> tags, etc.

In the above screen shot, it is evident that the <h1> is present and, looking at the top of the browser window, it also matches a subset of the <title> element. Perfect!

Also in the above screen shot, note that the WAVE outline view displays the heading hierarchy of the page, in which all of the <h2> tags are nested underneath the <h1> tag. Again, perfect. A common error is to use a lower heading level, such as an <h4>, out of sequence because it displays in a more appealing font size than does, say, an <h2>. This is a job for CSS—use your style sheet to format headings not the heading level.

Note: Technically, all <h2> headings should follow an <h1>, but there can exceptions to this rule. It is often useful to position <h2> headings off-page with CSS when you want a heading to be visible to screen readers but hidden from sighted users. When would you want to do this? You may want to put an off-page <h2> heading before your main navigation. Graphically, the main navigation should be very obvious to sighted users and there is no need to display a heading before the navigation—in fact it would be an intrusive distraction. But an <h2> could be helpful to a screen reader user and could be used to access the navigation from anywhere on the page. Most of the time, the navigation bar precedes the <h1> subject matter heading in the coding (and reading) order, so our <h2> used directly before the main navigation will show up out of order (as it does in this page), preceding the <h1>:

screen shot of wave outline fiew showing out of sequence headings

This apparent out-of-sequence heading structure is not going to confuse a screen reader user, and it does not make sense to give the navigation subheadings <h1> status—there really should be only one <h1> heading per page, and you want that heading directly in front of the main content.

A commonly used feature of a screen reader is to produce a list of links for a page. When links are gathered together in a list, the link text must make sense on its own and out of context. That is why it is inadvisable to use “more” and “here” as link text.

  1. If you have not already done so, download and install the Firefox Accessibility Extension.

  2. After restarting Firefox you should see the accessibility toolbar at the top of the browser window. Choose the Links item under the Navigation menu pick:

    screen shot of the accessibility toolbar for firefox
  3. You will be presented with a new window that lists the links and link information for that page:

    screen shot of accessibility toolbar list of links window
  4. Scan the list of links in the display to ensure that they are unique and adequately descriptive. The Links checker will flag any potential problems by highlighting the row with a yellow background.

In the above screen shot, there are warnings about different link descriptions pointing to the same URL, and these need to be inspected. In general, links that point to the same URL should have the same link description text.

For more information, view the navigation best practices page.

back to top