Navigation Bar Rules

HTML Markup Details

ul element and other container elements
The ul element is the preferred navigation bar container element.
Other container elements that are identified as navigation bars include nested table elements that contain mostly links and map elements that contain area elements. These containers are not as accessible or interoperable as the ul element.
li and a elements
The li element should be used as the container for individual a elements in the ul element navigation bar.
h2-h6 elements
Heading elements (h2-h6) should provide descriptive labels for a collection of links for page and site navigation; the h2 element is preferred for most navigation bars.
The heading should immediately precede the navigation bar container element.
Heading elements can be hidden in a graphical rendering by using CSS absolute positioning.

Accessibility Evaluation Rules

no. Testing Description Implementation
FAE Firefox
Accessibility
Extension
1 Fail/Pass

The h2 element or another heading element must precede ul and ol elements that appear to be navigation bars.

Implementation Notes

  • FAE will consider only ul and ol elements that appear before the last h1 element in a page as a navigation barfor the purpose of evaluation.
  • FAE will consider ul and ol elements whose li elements are all links or mostly links as navigation bars (only one cell can contain a non-link element).
  • The h2 element, or other heading element, is considered to precede the navigation bar if they are the last element with text content before the navigation bar.
1.0 1.5
2 Fail/Pass

The h2 element or another heading element must precede map elements containing area elements that appear to be a navigation bars.

Implementation Notes

  • FAE will consider only map elements that appear before the last h1 element in a page for the purpose of evaluation as a navigation bar.
  • The h2 or other heading element are considered to precede the navigation bar if they are the last element with text content before the navigation bar.
1.0 1.5
3 Warning/Pass

Each area element should have a redundant text link (a element) with href values matching the href values of the area elements.

1.0 1.5
4 Check/Pass

Most pages should contain at least one navigation bar.

NI NI

FAE Rule Implemetation

Illinois Functional Accessibility Evaluator 1.0
The Illinois Functional Accessibility Evaluator is a web based tool to help developers evaluate web resources for the use of the iCITA HTML best practices.
Web interface cannot currently analyze content generated dynamically with javascript.
Illinois Firefox Accessibility Extension
The Illinois Firefox Accessibility Extension is a Firefox add-in that is designed to identify accessibility features for both static and dynamically generated html content.
Useful for identifying the location of specific accessibility problems for failures and warnings indentified in FAE reports.
Create FAE reports for a page that uses javascript to generate page content with the FAE DHTML Report feature.