Diecomplementarylandmark 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 dasHTML <aside> Element anstelle dessen.

<div role="complementary">  <h2>Our partners</h2>  <!-- complementary section content --></div>

Dies ist eine Seitenleiste mit Links zu Projektsponsoren.

Beschreibung

Diecomplementary Rolle isteine 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 dercomplementary Landmarke aufgeführt ist, sollte sinnvoll sein, wenn er vom Hauptinhalt des Dokuments getrennt ist.

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 Rollecomplementary hat. Wenn möglich, bevorzugen Sie die Verwendung des semantischen<aside> Elements statt dercomplementary Rolle.

Landmarken beschriften

Mehrere Landmarken

Wenn es mehr als einecomplementary Landmarke oder<aside> Element in einem Dokument gibt, versehen Sie jede Landmarke mit einem Label mit demaria-label Attribut oder, wenn das Aside einen entsprechend beschreibenden Titel hat, zeigen Sie darauf mit demaria-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 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 vonrole="complementary" mitaria-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.

• Landmarks Browser-Erweiterung

Spezifikationen

Siehe auch

• <aside>: Das Aside-Element
• Verwendung von HTML-Abschnitten und Gliederungen
• Landmarkenrollen: Verwendung von ARIA: Rollen, Zustände und Eigenschaften
• Verwendung von WAI-ARIA Landmarken – 2013 | The Paciello Group
• Barrierefreie Landmarken | scottohara.me
• Aside Revisited | HTML5 Doctor