Using HTML5 nav element

Technique Category

Status

New technique.
Surveyed by TF May 7 2012

Applicability

HTML5
ARIA

This technique relates to:

Success Criterion 1.3.1 (Info and Relationships): [1] (Sufficient)

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 <nav> element is one of them, which will help users find the navigation sections of a page.

Example:The `<nav>` element

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

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

<nav>
<ul>
<li>About us</li>
<li>Services</li>
<li>Contact</li>
<li>Location</li>
<li>Why Groovy?</li>
</ul>
</nav>

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.

<nav role="navigation">
<ul>
<li>About us</li>
<li>Services</li>
<li>Contact</li>
<li>Location</li>
<li>Why Groovy?</li>
</ul>
</nav>

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

Working example: https://awkawk.github.io/using_nav.html

Resources

Related WCAG Techniques

G115: Using semantic elements to mark up structure: [2] (Sufficient)
G140: Separating information and structure from presentation to enable different presentations

[3] (Sufficient)

H42: Using h1-h6 to identify headings: [4] (Sufficient)

Tests

Procedure

Check that <nav> content has been added.
If support for HTML5 within a user agent is in doubt, then add the ARIA role="navigation".

Expected Results

The check #1 and #2 are true. If the author is in doubt about the level of user agent support for a HTML5 element or attribute it is better to err on the side of caution and add the additional ARIA role as outlined.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.