ARIA: region Rolle

Die region Rolle wird verwendet, um Bereiche eines Dokuments zu kennzeichnen, die der Autor als wichtig erachtet. Es handelt sich um ein generisches Landmark, das zur Navigation verwendet werden kann, wenn keine der anderen Landmark-Rollen geeignet ist.

html

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

Beschreibung

Die region Rolle ist eine ARIA Landmark Rolle. Die region Rolle sollte für Inhaltsabschnitte reserviert werden, die ausreichend wichtig sind, sodass Benutzer wahrscheinlich leicht zu dem Abschnitt navigieren und ihn in einer Zusammenfassung der Seite aufgeführt sehen möchten. Eine region Rolle ist ein mehr generischer Begriff und sollte nur verwendet werden, wenn der zu kennzeichnende Abschnitt nicht durch eine der anderen Landmark-Rollen genau beschrieben wird, 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, das auf eine sichtbare Überschrift verweist. Wenn keine sichtbare passende Überschrift vorhanden ist, sollte aria-label verwendet werden.

Der Inhalt der region Landmark Rolle sollte sinnvoll sein, wenn er vom Hauptinhalt des Dokuments getrennt ist.

Die Verwendung des <section> Elements kommuniziert automatisch, dass ein Abschnitt eine region Rolle hat, wenn ihm ein zugänglicher Name zugewiesen wird. Entwickler sollten immer das richtige semantische HTML-Element verwenden, in diesem Fall <section>, anstatt ARIA zu verwenden.

Zugeordnete WAI-ARIA Rollen, Zustände und Eigenschaften

aria-labelledby oder aria-label: Verwenden Sie dieses Attribut, um die Region zu beschriften. Oft wird der Wert des aria-labelledby Attributs die ID des Elements sein, das den Abschnitt betitelt. Wenn keine sichtbare passende Ü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>

Barrierefreiheitsbedenken

Verwenden Sie es sparsam! Landmark Rollen sollen sparsam verwendet werden, um größere Gesamtabschnitte des Dokuments zu identifizieren. Die Verwendung von zu vielen Landmark-Rollen kann bei Bildschirmlesegeräten "Rauschen" erzeugen, was es schwierig macht, das Gesamtlayout der Seite zu verstehen.

Verwenden Sie die region Rolle nur, wenn kein anderes relevantes Inhaltsabgrenzungs Element oder Landmark-Rolle zutrifft. Wenn auf einer Seite mehrere Regionen existieren, kann es sich lohnen, die gesamte Struktur der Seite erneut zu überprüfen.

Best Practices

Bevorzugen Sie HTML

Die Verwendung des <section> Elements kommuniziert automatisch, dass ein Abschnitt eine region Rolle hat, wenn ihm ein zugänglicher Name zugewiesen wird. Sofern möglich, bevorzugen Sie die Verwendung von <section>.

Beschriftung von Landmarks

Wenn in einem Dokument mehr als eine region Landmark Rolle vorhanden ist, geben Sie jedem eine eindeutige Beschriftung. Diese Beschriftung ermöglicht es einem Benutzer von unterstützenden Technologien, schnell den Zweck jedes Landmarks 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 überfließendem Text

Wenn es einen Inhaltsbereich mit tabindex="0" gibt, fügen Sie role="region" hinzu, um Bildschirmlesegerätebenutzern mitzuteilen, dass es sich um eine generische Region handelt. Dies geschieht, um Tastaturbenutzern das Scrollen von Regionen mit überfließendem Text zu ermöglichen.

SVG

role="region" kann auf Bereiche von <svg> zusammen mit einem aria-label erklärt werden, um einzelne Abschnitte des SVG zu beschreiben.

Spezifikationen

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