Grouping related links using the nav element

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

HTML5 documents that contain related links.

This technique relates to Success Criterion 1.3.1: Info and Relationships (Sufficient as a way to meet an unwritten technique).

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 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.

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

  • Check #1 is true.