ARIA: complementary Rolle
Die complementary landmark Rolle wird verwendet, um einen unterstützenden Abschnitt zu bezeichnen, der sich auf den Hauptinhalt bezieht, aber auch allein stehen kann, wenn er getrennt wird. Diese Abschnitte werden häufig als Seitenleisten oder Hervorhebungsboxen präsentiert. Wenn möglich, verwenden Sie das HTML <aside> Element anstelle dessen.
<div role="complementary">
<h2>Our partners</h2>
<!-- complementary section content -->
</div>
Dies ist eine Seitenleiste mit Links zu Projektsponsoren.
Beschreibung
Die complementary Rolle ist eine Landmarke. Landmarken können von unterstützender Technologie verwendet werden, um große Abschnitte des Dokuments schnell zu identifizieren und zu navigieren. Der Inhalt, der innerhalb eines Containers mit der complementary Landmarke aufgeführt ist, sollte sinnvoll sein, wenn er vom Hauptinhalt des Dokuments getrennt ist.
Hinweis:
Die Verwendung des <aside> Elements kommuniziert automatisch, dass ein Abschnitt die Rolle complementary hat. Entwickler sollten immer das korrekte semantische HTML-Element der Verwendung von ARIA vorziehen.
Beispiele
<div role="complementary">
<h2>Trending articles</h2>
<ul>
<li><a href="#">18 tweets that will make you feel all the feels</a></li>
<li>
<a href="#">Stop searching! I've found the perfect lunch containers.</a>
</li>
<li>
<a href="#">The time has come to decide how to call these foods</a>
</li>
<li><a href="#">17 really good posts we saw on Tumblr this week</a></li>
<li><a href="#">10 parent hacks we know work because we tried them</a></li>
</ul>
</div>
Barrierefreiheitsbedenken
Landmarkenrollen sollten sparsam verwendet werden, um größere übergeordnete Abschnitte des Dokuments zu identifizieren. Die Verwendung von zu vielen Landmarkenrollen kann zu "Geräuschen" in Screenreadern führen, was es schwierig macht, das gesamte Layout der Seite zu verstehen.
Beste Praktiken
HTML bevorzugen
Die Verwendung des <aside> Elements kommuniziert automatisch, dass das Element die Rolle complementary hat. Wenn möglich, bevorzugen Sie die Verwendung des semantischen <aside> Elements statt der complementary Rolle.
Landmarken beschriften
Mehrere Landmarken
Wenn es mehr als eine complementary Landmarke oder <aside> Element in einem Dokument gibt, versehen Sie jede Landmarke mit einem Label mit dem aria-label Attribut oder, wenn das Aside einen entsprechend beschreibenden Titel hat, zeigen Sie darauf mit dem aria-labelledby Attribut. Dieses Label ermöglicht es einem Benutzer mit unterstützender Technologie, schnell den Zweck jeder Landmarke zu verstehen.
<aside aria-label="Note about usage">
<!-- content -->
</aside>
…
<aside id="sidebar" aria-label="Sponsors">
<!-- content -->
</aside>
Redundante Beschreibungen
Screenreader geben die Art der Rolle der Landmarke an. Aus diesem Grund müssen Sie nicht beschreiben, was die Landmarke in ihrem Label ist. Zum Beispiel kann eine Deklaration von role="complementary" mit aria-label="Sidebar" redundanterweise als "complementary sidebar" angekündigt werden.
Zusätzliche Vorteile
Bestimmte Technologien wie Browsererweiterungen können Listen aller auf einer Seite vorhandenen Landmarkenrollen generieren, sodass auch Benutzer, die keine Screenreader verwenden, große Abschnitte des Dokuments schnell identifizieren und navigieren können.
Spezifikationen
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # complementary |
| Unknown specification |