Technique H97:Grouping related links using the nav element

Applicability

HTML5 documents that contain related links.

This technique relates to:

1.3.1: Info and Relationships (Sufficient when used with Making information and relationships conveyed through presentation programmatically determinable using the following techniques: )
2.4.1: Bypass Blocks (Advisory)

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

Other sources

No endorsement implied.

HTML5 nav element

Tests

Procedure

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.