HTML 5 navigation

March 23, 2022 – 12:42 pm

Using HTML5 nav element

This technique relates to:

User Agent and Assistive Technology Support Notes

March 2012: These new sectioning elements are used to create a structure and document outline. They can be used in conjunction with traditional HTML structural elements like heading elements to provide nested content. Browser support is currently patchy.
Note that there is an issue with screen readers being able to parse headers that are nested inside section elements. For example, if explicitly ranked h1 to h6 headings are nested in HTML5 sectioning elements, as opposed to using exclusively h1 elements, JAWS 12.0.1170, as well as the JAWS 13.0.171 beta, will misrepresent the heading hierarchy. This issue is outlined in the following article by Jason Kiss of Accessible Culture.

Description

The purpose of this technique is to help users of assistive technology, such as screen readers, to quickly and easility navigate to a section of a page, and to skip over sections of a page that they do not need.

HTML5 has a variety of section elements that can aid in this. The element is one of them, which will help users find the navigation sections of a page.

Example:The element

The element allow the author to mark up major navigation blocks in the HTML5 pages. For more on the element see the HTML 5 specification.

Using the HTML5 element on its own to mark up a navigation list would take the form:

About us
Services
Contact
Location
Why Groovy?

However, in order to make the structure more accessible to user agents that support ARIA as well as ensuring that user agents that don't support HTML5 can also understand the structure, adding the ARIA role="navigation" is advised.

Note: When support for HTML5 improves there may be no need to continue to add the ARIA role="navigation".

Working example: