ARIA: region role

Die region-Rolle wird verwendet, um Dokumentbereiche zu kennzeichnen, die der Autor für bedeutsam hält. Es ist ein generisches Landmark verfügbar, das bei der Navigation hilft, 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 sein, die so wichtig sind, dass Benutzer wahrscheinlich leicht zu diesem Abschnitt navigieren möchten und ihn in einer Zusammenfassung der Seite aufgeführt haben möchten. Eine Region-Rolle ist ein generischerer Begriff und sollte nur verwendet werden, wenn der zu identifizierende Abschnitt nicht genau durch eine der anderen Landmark-Rollen wie banner, main, contentinfo, complementary oder navigation beschrieben wird.

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 geeignete Überschrift vorhanden ist, sollte aria-label verwendet werden.

Der Inhalt der region-Landmark-Rolle sollte Sinn ergeben, wenn er vom Hauptinhalt des Dokuments getrennt wird.

Die Verwendung des <section>-Elements kommuniziert automatisch, dass ein Abschnitt eine region-Rolle hat, wenn ihm ein zugänglicher Name gegeben wird. Entwickler sollten immer das korrekte semantische HTML-Element, in diesem Fall <section>, der Verwendung von ARIA vorziehen.

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

aria-labelledby oder aria-label: Verwenden Sie dieses Attribut, um die Region zu kennzeichnen. Oft wird der Wert des aria-labelledby-Attributs die ID des Elements sein, das zur Titelgebung des Abschnitts verwendet wird. Wenn keine sichtbare geeignete Ü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>

Barrierefreiheitshinweise

Sparsam verwenden! Landmark-Rollen sind darauf ausgelegt, sparsam eingesetzt zu werden, um größere Gesamtabschnitte des Dokuments zu kennzeichnen. Die Verwendung zu vieler Landmark-Rollen kann in Bildschirmlesern "Rauschen" erzeugen, was das Verständnis des Gesamtlayouts der Seite erschwert.

Verwenden Sie die region-Rolle nur, wenn kein anderes relevantes Inhaltsabschnitts- Element oder Landmark-Rolle zutrifft. Wenn auf einer Seite mehrere Regionen existieren, könnte es sinnvoll sein, die Gesamtstruktur der Seite erneut zu prüfen.

Beste Praktiken

HTML bevorzugen

Die Verwendung des <section>-Elements kommuniziert automatisch, dass ein Abschnitt eine region-Rolle hat, wenn ihm ein zugänglicher Name gegeben wird. Wo immer möglich, sollte die Verwendung von <section> bevorzugt werden.

Kennzeichnung von Landmarks

Wenn in einem Dokument mehr als eine region-Landmark-Rolle vorhanden ist, geben Sie jedem eine eindeutige Kennzeichnung. Dieses Label ermöglicht einem Benutzer von unterstützender Technologie, den Zweck jeder Landmark schnell 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.

Rollende Inhaltsbereiche mit Überlauftext

Wenn es einen Inhaltsbereich mit tabindex="0" gibt, fügen Sie role="region" hinzu, um Benutzern von Bildschirmlesern mitzuteilen, dass dies eine generische Region ist. Dies ermöglicht es ausschließlich Tastaturnutzern, Regionen mit Überlauftext zu scrollen.

SVG

role="region" kann auf Bereiche 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