ARIA: complementary-Rolle
Die complementary
Landmark-Rolle wird verwendet, um einen unterstützenden Abschnitt zu kennzeichnen, der sich auf den Hauptinhalt bezieht, aber auch alleine bestehen kann, wenn er getrennt wird. Diese Abschnitte werden häufig als Seitenleisten oder Hervorhebungsboxen präsentiert. Wo möglich, verwenden Sie 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 genutzt werden, um große Abschnitte des Dokuments schnell zu identifizieren und zu navigieren. Der Inhalt, der innerhalb eines Containers mit der complementary
Landmark-Rolle aufgeführt ist, sollte auch ohne den Hauptinhalt des Dokuments Sinn ergeben.
Hinweis: Die Verwendung des <aside>
-Elements kommuniziert automatisch, dass ein Abschnitt die Rolle complementary
hat. Entwickler sollten stets bevorzugen, das richtige semantische HTML-Element anstelle von ARIA zu verwenden.
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>
Bedenken zur Barrierefreiheit
Landmark-Rollen sollen sparsam verwendet werden, um größere übergeordnete Abschnitte des Dokuments zu identifizieren. Die Verwendung von zu vielen Landmark-Rollen kann in Bildschirmlesern "Geräusche" erzeugen, was es schwierig macht, das Gesamtlayout der Seite zu verstehen.
Beste Praktiken
Bevorzugen Sie HTML
Die Verwendung des <aside>
-Elements kommuniziert automatisch, dass ein Abschnitt die Rolle complementary
hat. Es sollte, wenn möglich, bevorzugt verwendet werden.
Kennzeichnung von Landmarks
Mehrere Landmarks
Wenn es mehr als eine complementary
Landmark-Rolle oder ein <aside>
-Element in einem Dokument gibt, geben Sie jedem Landmark mit dem aria-label
-Attribut eine Bezeichnung oder, wenn das Aside einen entsprechend beschreibenden Titel hat, verweisen Sie mit dem aria-labelledby
-Attribut darauf. Diese Bezeichnung ermöglicht es einem Benutzer der unterstützenden Technologie, schnell den Zweck jedes Landmarks zu verstehen.
<aside aria-label="Note about usage">
<!-- content -->
</aside>
…
<aside id="sidebar" aria-label="Sponsors">
<!-- content -->
</aside>
Redundante Beschreibungen
Bildschirmleser geben die Art der Rolle des Landmarks bekannt. Daher müssen Sie in der Bezeichnung nicht beschreiben, was das Landmark ist. Ein Beispiel: Eine Deklaration von role="complementary"
mit einem aria-label="Sidebar"
könnte 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 generieren, sodass auch Nicht-Bildschirmlese-Benutzer große Dokumentabschnitte schnell identifizieren und navigieren können.
Spezifikationen
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # complementary |
Unknown specification |
Siehe auch
- <aside>: Das Aside-Element
- complementary (role): Accessible Rich Internet Applications (WAI-ARIA) 1.1
- Verwendung von HTML-Abschnitten und -Gliederungen
- Landmark-Rollen: Verwendung von ARIA: Rollen, Zustände und Eigenschaften
- Verwendung von WAI-ARIA-Landmarks – 2013 | The Paciello Group
- Zugängliche Landmarks | scottohara.me
- Aside Revisited | HTML5 Doctor