Technique H97:Grouping related links using the nav element
About this Technique
This technique relates to:
1.3.1: Info and Relationships
(Sufficient
when used for making information and relationships conveyed through presentation programmatically
determinable)
This technique applies to HTML documents that contain related links.
Description
The objective of this technique is to group navigation links using the HTML nav element. The nav element is one of several sectioning elements in HTML. 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-labelledby or aria-label 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 2: Multiple nav elements and aria-labelledby
The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a nav element is used multiple times on a page, each instance may have a unique label specified using aria-labelledby:
<nav aria-labelledby="site-nav-heading">
<h2 id="site-nav-heading">Site</h2>
<ul>
<li><a href="...">nav link 1</a></li>
<li><a href="...">nav link 2</a></li>
<li><a href="...">nav link 3</a></li>
</ul>
</nav>
<nav aria-labelledby="related-nav-heading">
<h2 id="related-nav-heading">Related Topics</h2>
<ul>
<li><a href="...">topic link 1</a></li>
<li><a href="...">topic link 2</a></li>
<li><a href="...">topic link 3</a></li>
</ul>
</nav>
Example 3: Multiple nav elements and aria-label
The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label:
<nav aria-label="Site">
<ul>
<li>< href="...">nav link 1</a></li>
<li>< href="...">nav link 2</a></li>
<li>< href="...">nav link 3</a></li>
</ul>
</nav>
<nav aria-label="Tags">
<ul>
<li><a href="...">tag link 1</a></li>
<li><a href="...">tag link 2</a></li>
<li><a href="...">tag link 3</a></li>
</ul>
</nav>