Navigation Bar Overview


It is important to use HTML markup for navigation bars and other groupings of links that allows users to identify the links as a navigation bar, easily move to these navigation bars and skip them when needed. Users can easily identify navigation bars when a list is used with the role attribute and a heading.

Benefits to People with Disabilities

  1. Keyboard users, including people with physical disabilities and screen reader users, can use keyboard heading navigation commands to move to or pass navigation bars.
  2. Screen reader users can easily locate and identify the navigation bars on web resource.

Benefits to All Users

  1. Web resources are more usable and navigation bars more identifiable when navigation bar styling is consistent.
  2. Navigation bars will be more accessible to users with a wider range of technologies.

Benefits to Developers

  1. Navigation bar styling is easier and more consistent across web resources when headings and lists are used in conjuction with CSS.
  2. As web developers separate structure from styling, creating and updating resources becomes easier.

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.

Related Accessibility Requirements

Illinois Information Technology Accessibility Standards
1.4 Use headings to introduce sections and sub-sections, and use them in the correct order.
1.5 Use lists to identify series of related items, including navigation menus.
9.2 Provide a means of skipping past repetitive navigation links.
Section 508
1194.22 (o) A method shall be provided that permits users to skip repetitive navigation links.
W3C Web Content Accessibility Guidelines 2.0
2.4.1 Bypass Blocks
2.4.10 Section Headings
3.2.3 Consistent Navigation
3.2.4 Consistent Identification
W3C Web Content Accessibility Guidelines 1.0
3.1 When an appropriate markup language exists, use markup rather than images to convey information.
3.3 Use style sheets to control layout and presentation.
3.5 Use header elements to convey document structure and use them according to specification.
13.4 Use navigation mechanisms in a consistent manner.
13.5 Provide navigation bars to highlight and give access to the navigation mechanism.