ARIA: Rolle complementary
Die Landmark-Rolle complementary kennzeichnet einen ergänzenden Bereich, der mit dem Hauptinhalt zusammenhängt, aber auch für sich allein verständlich ist. Solche Bereiche werden häufig als Seitenleisten oder hervorgehobene Infokästen dargestellt. Verwenden Sie nach Möglichkeit stattdessen das HTML-Element <aside>.
<div role="complementary">
<h2>Our partners</h2>
<!-- complementary section content -->
</div>
Dies ist eine Seitenleiste mit Links zu den Sponsoren des Projekts.
Beschreibung
Die Rolle complementary ist eine Landmark-Rolle. Mithilfe von Landmarks können assistive Technologien größere Bereiche eines Dokuments schnell erkennen und ansteuern. Inhalte in einem Container mit der Landmark-Rolle complementary sollten auch dann verständlich sein, wenn sie vom Hauptinhalt des Dokuments getrennt werden.
Hinweis:
Das Element <aside> hat implizit die Rolle complementary, es sei denn, es hat keinen zugänglichen Namen und ist in sectioning content verschachtelt. Entwickler sollten stets das passende semantische HTML-Element gegenüber ARIA bevorzugen.
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>
Aspekte der Barrierefreiheit
Landmark-Rollen sollten sparsam eingesetzt werden, um größere Bereiche eines Dokuments zu kennzeichnen. Zu viele Landmark-Rollen können die Ausgabe von Screenreadern unübersichtlich machen und es erschweren, den Gesamtaufbau der Seite zu verstehen.
Bewährte Praktiken
HTML bevorzugen
Das Element <aside> hat implizit die Rolle complementary, es sei denn, es hat keinen zugänglichen Namen und ist in sectioning content verschachtelt. Verwenden Sie nach Möglichkeit das semantische Element <aside> statt der Rolle complementary.
Landmarks beschriften
Mehrere Landmarks
Wenn ein Dokument mehr als eine Landmark mit der Rolle complementary oder mehr als ein Element <aside> enthält, versehen Sie jede Landmark mit einer Beschriftung. Verwenden Sie dazu das Attribut aria-label. Wenn das aside-Element einen passenden, aussagekräftigen Titel hat, können Sie mit dem Attribut aria-labelledby darauf verweisen. Anhand dieser Beschriftung können Nutzer assistiver Technologien den Zweck der einzelnen Landmarks schnell erkennen.
<aside aria-label="Note about usage">
<!-- content -->
</aside>
…
<aside id="sidebar" aria-label="Sponsors">
<!-- content -->
</aside>
Redundante Beschreibungen
Screenreader geben den Rollentyp einer Landmark aus. Daher müssen Sie diesen nicht zusätzlich in der Beschriftung beschreiben. Beispielsweise könnte role="complementary" zusammen mit aria-label="Sidebar" redundant als „complementary sidebar“ ausgegeben werden.
Weitere Vorteile
Bestimmte Technologien, etwa Browser-Erweiterungen, können eine Liste aller Landmark-Rollen auf einer Seite erstellen. So können auch Nutzer ohne Screenreader größere Bereiche des Dokuments schnell erkennen und ansteuern.
Spezifikationen
| Spezifikation |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # complementary |
| Unknown specification |