Navigation amd Menu 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 Everyone

  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.

Markup

area (HTML4)

map (HTML4)

a (HTML4)

ul, ol and li (HTML4)

h2-h6 (HTML4)

Related Accessibility Requirements

Section 508

Illinois Information Technology Accessibility Standards

Web Content Accessibility Guidelines (WCAG) 2.0

Web Content Accessibility Guidelines (WCAG) 1.0