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.
- Keyboard users, including people with physical disabilities and screen reader users, can use keyboard heading navigation commands to move to or pass navigation bars.
- Screen reader users can easily locate and identify the navigation bars on web resource.
- Web resources are more usable and navigation bars more identifiable when navigation bar styling is consistent.
- Navigation bars will be more accessible to users with a wider range of technologies.
- Navigation bar styling is easier and more consistent across web resources when headings and lists are used in conjuction with CSS.
- As web developers separate structure from styling, creating and updating resources becomes easier.
ulelement and other container elements
ulelement 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
mapelements that contain
areaelements. These containers are not as accessible or interoperable as the
lielement should be used as the container for individual a elements in the
ulelement navigation bar.
- h2-h6 elements
- Heading elements (
h2-h6) should provide descriptive labels for a collection of links for page and site navigation; the
h2element 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.
- 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.