Navigation amd Menu Bar
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
- 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.
Benefits to Everyone
- 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.
Benefits to Developers
- 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.
areaelements are used to create menu bars there needs to be redundent text links (
aelement) with the link text indicating the target of the link.
mapelement can be used to create menu bar containers for navigation links, but it is difficult to style and not any better that using
- The link text content should clearly indicate the target of the link
ul, ol and li (HTML4)
lielement to create containers for the navigation links
- Heading content should indicate the relationship between the links in the navigation bar.
- Menu bar heading should immediately preceed the list element container element
h2is preferred heading element to label a navgation bar
h3-h6elements can also be used for complex pages or navigation bars.
- The headings should be used structurally and be properly nested with the web page and the navigation bar.