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 FAE for ARIA Description
1 N/A Pass/Fail Pass/Fail Each container element that appears to be a navigation bar or menu should be immediately preceded by a h2 or other heading element. Container elements that are considered navigation bars:
  • ul and ol elements that contain li elements that are mostly links and appear before the last h1 elment in a web resource.
  • Nested table element whose table cells are mostly links and the table appears before the last h1 elment in a web resource.
  • map elements containing area elements and appear before the last h1 elment in a web resource.
2 Pass/Fail Pass/Warning Pass/Fail Each area element must have a redundant text link (a element) with matching href values corresponding to the href values of the area elements.
3 N/A Pass/Check Pass/Check Most web pages should contain at least one navigation bar.
4 N/A N/A Pass/Fail Each container elements identified as navigation bar needs to include the role attribute with a value of "navigation".
5 N/A N/A Pass/Fail

Each container elements with role attribute set to the value "navigation" can use the following to provide a title for the navigation bar instead of the header element in Rule 1.

  • Content of the title attribute.
  • Content of the element referenced by a labelledby attribute.
5 Pass/Fail N/A N/A Each ul and ol element that contain li elements that are mostly links must be immediately preceeded 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 container for navigation links.
Other containers elements identified as navigation bars include the nested table elements that contain mostly links and map elements that contain area elements. Although these containers are not as accessible or interoperable as the ul element.
li and a
Use li as a container for individual links in the navigation bar
Headings h2-h6
Heading elements (h2-h6) are used to provide descriptive labels for a collection of links for page and site navigation, the h2 element is preferred for most navigation bars.
The heading needs to immediately proceed the navigation bar container element.
Heading elements can be hidden in a graphical rendering using CSS absolute positioning, for example:<h2 style="position: absolute; left: -200em; top:-20em;">menu title</code>

Extension Documentation