Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

H97: 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.0 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.0.

Applicability

HTML5 documents that contain related links.

This technique relates to:

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.

Example Code:


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

Example Code:


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

Example Code:


			<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

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.