org.sonar.l10n.web.rules.Web.S5255.html Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of sonar-html-plugin Show documentation

Code analyzer for HTML

The newest version!

Why is this an issue?
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>

Resources

   WCAG2, ARIA11 - Using ARIA landmarks to identify regions of a page 
   WCAG2, H97 - Grouping related links using the nav element 
   WCAG2
  1.3.1 Info and Relationships