ARIA: complementary-Rolle
Die complementary-Landmark-Rolle wird verwendet, um einen unterstützenden Abschnitt zu kennzeichnen, der sich auf den Hauptinhalt bezieht, aber eigenständig bestehen kann, wenn er davon getrennt wird. Diese Abschnitte werden häufig als Seitenleisten oder hervorgehobene Kä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 Projektsponsoren.
Beschreibung
Die complementary-Rolle ist eine Landmark-Rolle. Landmarks können von unterstützenden Technologien verwendet werden, um große Abschnitte des Dokuments schnell zu identifizieren und zu ihnen zu navigieren. Inhalte, die in einem Container mit der complementary-Landmark-Rolle aufgeführt sind, sollten auch dann sinnvoll 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 die Verwendung des korrekten semantischen HTML-Elements 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
Landmark-Rollen sollten sparsam verwendet werden, um größere übergeordnete Abschnitte des Dokuments zu kennzeichnen. Die Verwendung zu vieler Landmark-Rollen kann in Screenreadern „Rauschen“ erzeugen, wodurch es schwierig wird, das allgemeine Layout 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 <aside>-Element anstelle der complementary-Rolle.
Landmarks beschriften
Mehrere Landmarks
Wenn ein Dokument mehr als eine complementary-Landmark-Rolle oder ein <aside>-Element enthält, versehen Sie jedes Landmark mit einer Beschriftung, indem Sie das Attribut aria-label verwenden oder, falls das aside einen passend beschreibenden Titel hat, mit dem Attribut aria-labelledby darauf verweisen. Diese Beschriftung ermöglicht es Nutzern unterstützender Technologien, den Zweck jedes Landmarks schnell zu verstehen.
<aside aria-label="Note about usage">
<!-- content -->
</aside>
…
<aside id="sidebar" aria-label="Sponsors">
<!-- content -->
</aside>
Redundante Beschreibungen
Screenreader kündigen den Rollentyp eines Landmarks an. Daher müssen Sie in seiner Beschriftung nicht beschreiben, um welches Landmark es sich handelt. Beispielsweise kann eine Deklaration von role="complementary" mit einem aria-label="Sidebar" redundant als „complementary sidebar“ angekündigt werden.
Zusätzliche Vorteile
Bestimmte Technologien wie Browser-Erweiterungen können Listen aller auf einer Seite vorhandenen Landmark-Rollen erstellen. Dadurch können auch Nutzer ohne Screenreader große Abschnitte des Dokuments schnell identifizieren und zu ihnen navigieren.
Spezifikationen
| Spezifikation |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # complementary |
| Unknown specification |