Rolle Landmarke

`complementary`

Ein Landmark für Inhalte, die den Hauptinhalt ergänzen, aber auch für sich allein verständlich sind – Seitenleisten, Kästen mit verwandten Artikeln, ergänzende Hervorhebungen. Das <aside>-Element trägt diese Rolle, wenn es auf oberster Ebene steht.

Wann zu verwenden

<aside> wird für eine Seitenleiste auf oberster Ebene, eine Schiene mit „Verwandten Artikeln“, eine Autorenbiografie neben einem Beitrag oder ein „Was ist neu“-Panel verwendet. Wenn <aside> ein direktes Kind von <body> ist (oder neben <main> steht), wird es als Complementary-Landmark verfügbar gemacht.

Ein <aside>, das innerhalb eines <article> verschachtelt ist, wird NICHT zu einem Landmark befördert – es bleibt eine generische Gruppe. Diese Unterscheidung ist beabsichtigt: Ein Complementary-Landmark ist seitenweit; Seitenleisten innerhalb eines einzigen Artikels sind es nicht.

role="complementary" auf einem <div> ist nur dann angemessen, wenn <aside> nicht verwendet werden kann (veraltetes CMS).

Der Inhalt darin sollte den Hauptinhalt unterstützen, aber für sich allein stehen können – wenn seine Entfernung die Seite unvollständig machen würde, handelt es sich wahrscheinlich nicht um ergänzenden Inhalt.

Wann zu beschriften

Sind mehrere Complementary-Landmarks vorhanden (eine linke Schiene UND eine rechte Schiene), erhält jedes ein eindeutiges aria-label oder aria-labelledby. Bei einem einzelnen Complementary-Landmark ist eine Beschriftung optional – Screenreader kündigen es als „complementary“ an.

Übliche Beschriftungen: „Related articles“, „Tools“, „Newsletter signup“, „Recently viewed“.

Häufige Fehler

<aside> wird für Hervorhebungen innerhalb von Fließtextabsätzen verwendet. Zu kleinteilig – überfüllt das Landmark-Menü.
Der gesamte Bereich mit Sekundärlinks im Footer der Website wird als Complementary-Landmark ausgezeichnet. Navigation auf Footer-Ebene gehört in <nav> innerhalb von <footer>.
Mehrere Complementary-Landmarks ohne Beschriftungen.
role="complementary" wird auf einem <section> platziert, das den Hauptinhalt der Seite darstellt. Stattdessen ist <main> zu verwenden.
<aside> innerhalb von <article> zusammen mit einem expliziten role="complementary", um die Landmark-Verfügbarkeit zu erzwingen – dies ist meist ein Zeichen dafür, dass der Inhalt auf Seitenebene und nicht innerhalb des Artikels gehört.

Beispiel

<main>
  <article>
    <h1>Designing for screen readers</h1>
    <p>…</p>
  </article>
</main>

<aside aria-labelledby="related">
  <h2 id="related">Related articles</h2>
  <ul>
    <li><a href="/articles/aria-landmarks">ARIA landmarks explained</a></li>
    <li><a href="/articles/skip-links">Skip links done right</a></li>
  </ul>
</aside>