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