Grouping related links using the nav element

From WCAG WG

Status

New Technique

Applicability

HTML5 documents that contain related links.

This technique relates to:

  • Success Criterion 1.3.1 (Info and Relationships)
    • How to Meet 1.3.1 (Info and Relationships)
    • Understanding Success Criterion 1.3.1 (Info and Relationships)

User Agent and Assistive Technology Support Notes

  • Some assistive technology will announce the presence of nav elements when navigating into a nav section.
    • Supported: JAWS, NVDA (Windows), VoiceOver (iOS and OS X)
    • Not supported: Window-Eyes
  • Some assistive technologies allow users to navigate to or between page regions such as the nav element.
    • Supported: JAWS, NVDA (Windows), VoiceOver (iOS and OS X)
    • Not supported: Window-Eyes

Description

The objective of this technique is to group navigation links using the HTML5 nav element. The nav element is one of several sectioning elements in HTML5. Use of this markup can make groups of links easier to locate and skip past by users of assistive technology such as screen readers. Using semantic structures allow custom style sheets to be used to change the presentation of groups of links while preserving their relationship. When the NAV element is employed more than once on a page, distinguish the navigation groups by using an aria-label or aria-labelledby attribute.

Not all groups of links need to use the nav element for markup. For instance, links may be grouped in other structure such as lists or may use ARIA markup if they do not represent a discrete section of the page.

Examples

Example 1: Navigation links enclosed in a nav element.

This example uses an nav element to group navigation links in an accessibility curriculum. 

 <nav>
   <a href="../webaccessibility.html">Web Accessibility</a>
   <a href="../docaccessibility.html">Document Accessibility</a>
   <a href="../mobileaccessibility.html">Mobile Accessibility</a>
 </nav>

Example 2: Multiple nav elements

This example uses an nav element with an aria-label attribute to identify the navigation group when there is more than one nav element in a document. 

<nav aria-label="Site menu">
  <ul>
    <li>...a list of links site navigation link here ...</li>
  </ul>
</nav>
...
<article>
  <nav aria-label="Related links">
    ...a list of related links here ...
  </nav>
</article>

Example 3: Generic multiple nav elements

The following example shows a best practice of situation where there are more than two navigation menus on the same page, and there is no existing text on the page that can be referenced as the label. 

<nav aria-label="primary">
<a href="home.html">Home</a>
<a href="about-us.html">About Us</a>
<a href="products.html">Products</a>
</nav>

<nav aria-label="secondary">
<a href="adverts.html">Our Advertisers</a>
<a href="related.html">Related Links</a>
<a href="subsidiaries.html">Subsidiaries</a>
</nav>

Resources

Resources are for information purposes only, no endorsement implied.

HTML5 nav element

Related Techniques

Tests

Procedure

  1. Check that links that are visually grouped and represent a section of the page are enclosed in a nav element.

Expected Results

  • All the checks above are true.

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.

Retrieved from "https://www.w3.org/WAI/GL/wiki/index.php?title=Grouping_related_links_using_the_nav_element&oldid=4845"