ARIA: region Rolle

Die region Rolle wird verwendet, um Dokumentbereiche zu identifizieren, die der Autor als bedeutend erachtet. Sie ist ein generischer Orientierungspunkt, der zur Navigation unterstützt, wenn keine der anderen Rollen für Orientierungspunkte geeignet ist.

html

<div role="region" aria-label="Example">
  <!-- region content -->
</div>

Beschreibung

Die region Rolle ist eine ARIA-Orietierungspunkt Rolle. Die region Rolle sollte für Inhaltsabschnitte reserviert werden, die so wichtig sind, dass Benutzer wahrscheinlich leicht zu diesem Abschnitt navigieren möchten und ihn in einer Übersicht der Seite aufgelistet haben möchten. Eine region Rolle ist ein allgemeinerer Begriff und sollte nur verwendet werden, wenn der zu identifizierende Abschnitt nicht genau von einer der anderen Rollen für Orientierungspunkte beschrieben werden kann, wie z.B. banner, main, contentinfo, complementary oder navigation.

Jedes Element mit einer region Rolle sollte ein Label enthalten, das den Zweck des Inhalts in der Region beschreibt, vorzugsweise mit einem aria-labelledby, welches auf eine sichtbare Überschrift verweist. Wenn keine geeignete sichtbare Überschrift vorhanden ist, sollte aria-label verwendet werden.

Der Inhalt der region Orientierungspunktsrolle sollte Sinn machen, auch wenn er vom Hauptinhalt des Dokuments getrennt ist.

Die Verwendung des <section> Elements kommuniziert automatisch, dass ein Abschnitt eine region Rolle hat, wenn er einen zugänglichen Namen erhält. Entwickler sollten immer das korrekte semantische HTML-Element verwenden, in diesem Fall <section>, anstatt ARIA zu verwenden.

Zugehörige WAI-ARIA Rollen, Zustände und Eigenschaften

aria-labelledby oder aria-label: Verwenden Sie dieses Attribut, um die Region zu kennzeichnen. Oft ist der Wert des aria-labelledby Attributs die ID des Elements, das zur Überschrift des Abschnitts verwendet wird. Wenn keine geeignete sichtbare Überschrift vorhanden ist, sollte aria-label verwendet werden.

Beispiele

html

<div role="region" aria-labelledby="region-heading">
  <h2 id="region-heading">
    This heading's `id` attribute helps this region have an accessible name
  </h2>
  <!-- region content -->
</div>

Barrierefreiheitserwägungen

Sparsam verwenden! Rollen für Orientierungspunkte sollen sparsam verwendet werden, um größere Gesamtabschnitte des Dokuments zu identifizieren. Die Verwendung zu vieler Rollen für Orientierungspunkte kann in Screenreadern "Geräusche" erzeugen, was es schwierig machen kann, das Gesamtlayout der Seite zu verstehen.

Verwenden Sie die region Rolle nur, wenn kein anderer relevanter Inhaltsstrukturierung Element oder Orientierungspunktrolle zutrifft. Wenn mehrere Regionen auf einer Seite existieren, kann es sich lohnen, die Gesamtstruktur der Seite erneut zu überprüfen.

Best Practices

HTML bevorzugen

Die Verwendung des <section> Elements kommuniziert automatisch, dass ein Abschnitt eine region Rolle hat, wenn er einen zugänglichen Namen erhält. Wenn möglich, bevorzugen Sie die Verwendung des <section> Elements.

Kennzeichnung von Orientierungspunkten

Wenn es mehr als eine region Orientierungspunktrolle in einem Dokument gibt, geben Sie jedem eine einzigartige Kennzeichnung. Diese Kennzeichnung ermöglicht es einem Benutzer mit unterstützender Technologie, schnell den Zweck jedes Orientierungspunkts zu verstehen.

html

<div role="region" aria-labelledby="use-discretion">
  <h3 id="use-discretion">Please use the `region` role with discretion</h3>
  <!-- content -->
</div>

…

<div role="region" aria-labelledby="please-reconsider">
  <h3 id="please-reconsider">Please reconsider your document structure</h3>
  <!-- content -->
</div>

In diesem Beispiel wird das Label der Region durch das aria-labelledby Attribut erzeugt.

Scrollbare Inhaltsbereiche mit Überlauftext

Wenn ein Inhaltsbereich mit tabindex="0" versehen ist, fügen Sie role="region" hinzu, um Benutzer von Screenreadern darauf hinzuweisen, dass es sich um eine generische Region handelt. Dies geschieht, um Tastaturbenutzern zu ermöglichen, Bereiche mit Überlauftext zu scrollen.

SVG

role="region" kann in Bereichen von <svg> zusammen mit einem aria-label deklariert werden, um einzelne Abschnitte des SVG zu beschreiben.

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA) # region
Unknown specification