A A A A A

Navigation: Menu and Navigation Bars

Evaluation Rules

The Accessibility Extension does not provide automated evaluation of the rules 1, 2, 4 and 5.

Navigation Bar Evaluation Rules
no. FAE 2007 FAE 2008 Description
1 N/A Pass/Fail

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 web 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.
  • Other rules related to subheadings.
2 N/A Pass/Fail

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 web 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.
  • Other rules related to subheadings.
3 Pass/Fail Pass/Warning

Each area element should have a redundant text link (a element) with href values matching the href values of the area elements.
4 N/A Pass/Check

Most web pages should contain at least one navigation bar.
5 Pass/Fail N/A

Each ul and ol element that contains li elements that are mostly links must be immediately preceded by a heading element.

Identification of List Elements as Navigation Bars

The Extension identifies navigation bars in three ways:

Dialog Box

Menu and Navigation Bars List (top list)

  1. This list itemizes all elements identified as navigation bars.
  2. Selecting an item in the list, by clicking on the item or by using the arrow keys, highlights the corresponding navigation bar in the browser, and populates the Details List.
  3.   Selecting an item with yellow background, by clicking on the item or by using the arrow keys, displays warning statement in the Accessibility Information area.
  4. Columns
    • Order (hidden) - the sequence in which the items appear on the page is displayed.
    • Role - BP (Best Practices) indicates a list element identified as a navigation bar via the use of HTML Best Practices. Menubar/Navigation indicates a list element identified via role attribute. Lastly, the rel attribute of a link element, identified as a navigation bar by link element, is displayed.
      Note: If an item satisfies more than one set of identifying conditions, it is displayed multiple times, once for each case of identification.
    • Navigation Bar Title - The Extension follows the hierarchy listed below to look for content to display as the title for each identified navigation bar. The Accessibility Extension moves down the hierarchy until it finds the non-empty content.
      • If a navigation bar is identified for the use of HTML Best Practices,
        • the heading that immediately precedes the element;
        • or the message   (Missing Title) is displayed. Selecting the item, by clicking on the item or by using the arrow keys, displays warning statement in the Accessibility Information area.
      • If a navigation bar is identified by the role attribute,
        • the preceding heading that has the same id attribute as the aria-labelledby attribute of the element;
        • the title attribute of the element;
        • or the message (No Labelledby or Title) is displayed.
      • If a navigation bar is identified by rel attribute of a link element,
        • the title attribute of the link element is displayed;
        • or the entry is left blank.

Details List (center list)

  1. This list is populated when an item in the top list is selected.
  2. Detailed information pertaining to the item selected in the top list is displayed.
  3. Selecting an item in this list, by clicking on the item or by using the arrow keys, highlights the corresponding link content in the broswer; and activates the Go To URL button.
  4. Columns
    • Link Text - The Accessibility Extension follows the hierarchy listed below to look for content to display as the Link Text for each link of the selected navigation bar. The Accessibility Extension moves down the hierarchy until it finds the non-empty content.
      • the title attribute of the li element
      • the alt attribute of img element if the content is an image
      • or the text content of the li element is displayed.
    • HREF - The href attribute of each a element is displayed.
    • Number (hidden) - The sequence in which the items appear on the page is displayed.

Accessibility Information

Buttons

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.

Extension Documentation