Navigation Bar Overview

Overview

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

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 as the styling of navigation bars is more consistent and identifying them on web resources is easier.
2. Navigation bars will be more accessible to users of wider range of technologies.

Benefits to Developers

1. Styling of navigation bars can be easier and more consistent across web resources when headings and lists are used in conjuction with CSS.
2. The more web developers separate structure from styling, the easier it is for them to create and update resources.

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 ul element.

li and a elements

The li element should be used as the container for individual a elements in 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.