If a page contains multiple <nav> or <aside> elements, each one should have an aria-label
or aria-labelledby attribute so that they can be differentiated. The same rule applies when multiple elements have
a role attribute with the same "landmark" value.
Landmark roles are: banner, complementary, contentinfo, form, main,
navigation, search, application.
The use of ARIA markup helps users of screen readers navigate across blocks of content. For example it makes groups of links easier to locate
or skip.
Noncompliant code example
Multiple <nav> element
<nav> <!-- Noncompliant -->
<ul>
<li>A list of navigation links</li>
</ul>
</nav>
<article>
<nav> <!-- Noncompliant -->
Another list of navigation links
</nav>
</article>
Repeated "landmark" role "navigation"
<div id="mainnav" role="navigation"> <!-- Noncompliant -->
<h2 id="mainnavheading">Site Navigation</h2>
<ul>
<li>List of links</li>
</ul>
</div>
<div id="secondarynav" role="navigation"> <!-- Noncompliant -->
<h2 id="secondarynavheading">Related links</h2>
<ul>
<li>List of links</li>
</ul>
</div>
Compliant solution
<nav aria-label="Site menu">
<ul>
<li>A list of navigation links</li>
</ul>
</nav>
<article>
<nav aria-label="Related links">
Another list of navigation links
</nav>
</article>
<div id="mainnav" role="navigation" aria-labelledby="mainnavheading">
<h2 id="mainnavheading">Site Navigation</h2>
<ul>
<li>List of links</li>
</ul>
</div>
<div id="secondarynav" role="navigation" aria-labelledby="secondarynavheading">
<h2 id="secondarynavheading">Related links</h2>
<ul>
<li>List of links</li>
</ul>
</div>
