99 lines
2.5 KiB
Plaintext
99 lines
2.5 KiB
Plaintext
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>
|
||
----
|
||
|
||
|
||
== See
|
||
|
||
* 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)
|
||
|
||
include::message.adoc[]
|
||
|
||
include::highlighting.adoc[]
|
||
|
||
endif::env-github,rspecator-view[]
|