Rolle Landmarke

`region`

Ein generisches Landmark für Inhalte, die nicht zu banner, main, navigation, complementary oder contentinfo passen — aber dennoch wichtig genug sind, um direkt angesteuert zu werden. Ein <section>-Element wird nur dann zu einem Region-Landmark, wenn es einen zugänglichen Namen besitzt.

Verwendung

Für einen bedeutsamen Seitenabschnitt, der keinem anderen Landmark entspricht und zu dem Screenreader-Nutzer direkt navigieren können sollen: ein „Empfohlene Produkte“-Bereich, der aktuelle Schritt eines mehrstufigen Formulars oder ein Chat-Transkriptbereich innerhalb einer größeren Anwendung.

<section> wird als region-Landmark ausgegeben, WENN es einen zugänglichen Namen besitzt (aria-label oder aria-labelledby). Ein <section> ohne Namen ist lediglich eine generische Gruppe — ohne Landmark-Exposition. Dies ist beabsichtigt: Zu viele Landmarks machen das Landmark-Menü unübersichtlich.

role="region" auf einem <div> funktioniert auf dieselbe Weise — ein Name ist erforderlich.

Verwendung im Vergleich zu group

`role="region"` (oder `<section aria-label>`) verwenden	`role="group"` verwenden
Wesentlicher Seitenabschnitt, der Landmark-Navigation rechtfertigt	Gruppe zusammengehöriger Steuerelemente ohne Landmark-Status
Ein oder zwei pro Seite	Kann mehrfach pro Seite vorkommen
Immer mit zugänglichem Namen	Name optional

Im Zweifelsfall: „Soll ein Screenreader-Nutzer direkt hierher springen können?“ Wenn ja: region. Wenn nein: group.

Häufige Fehler

<section> ohne aria-label oder aria-labelledby. Kein Landmark; die Struktur leistet für die Barrierefreiheit nichts.
Jede <section> als region kennzeichnen. Überflutet das Landmark-Menü und mindert den Nutzen aller Landmarks.
aria-label="Section" — nichtssagend. Das Label sollte beschreiben, was diesen Abschnitt auszeichnet.
role="region" für eine Seitenleiste verwenden — das ist complementary. Das spezifischste Landmark sollte gewählt werden.
role="region" auf dem umschließenden <div> UND auf einem inneren <section> — doppelte Landmarks für denselben Inhalt.

Beispiel

<section aria-labelledby="recent">
  <h2 id="recent">Recently published</h2>
  <ul>
    <li><a href="/articles/aria-roles">ARIA roles overview</a></li>
    <li><a href="/articles/wcag-22">WCAG 2.2 changes</a></li>
  </ul>
</section>