16f6c0aecf
Inline adoc files when they are included exactly once. Also fix language tags because this inlining gives us better information on what language the code is written in.
107 lines
2.7 KiB
Plaintext
107 lines
2.7 KiB
Plaintext
== 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
|
||
|
||
[source,html]
|
||
----
|
||
<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"++``
|
||
|
||
[source,html]
|
||
----
|
||
<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
|
||
|
||
[source,html]
|
||
----
|
||
<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>
|
||
----
|
||
|
||
[source,html]
|
||
----
|
||
<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
|
||
|
||
* https://www.w3.org/TR/WCAG20-TECHS/ARIA11.html[WCAG2, ARIA11] - Using ARIA landmarks to identify regions of a page
|
||
* https://www.w3.org/TR/WCAG20-TECHS/H97.html[WCAG2, H97] - Grouping related links using the nav element
|
||
* https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&showtechniques=131#qr-content-structure-separation-programmatic[WCAG2 1.3.1] Info and Relationships
|
||
|
||
|
||
ifdef::env-github,rspecator-view[]
|
||
|
||
'''
|
||
== Implementation Specification
|
||
(visible only on this page)
|
||
|
||
=== Message
|
||
|
||
Add an “aria-label” or “aria-labbelledby” attribute to this element
|
||
|
||
|
||
=== Highlighting
|
||
|
||
Highlight the HTML element that needs to provide the attribute. <nav> or <div> for example
|
||
|
||
|
||
endif::env-github,rspecator-view[]
|