ARIA: region-Rolle

Die region-Rolle wird verwendet, um Dokumentbereiche zu identifizieren, die der Autor als bedeutend erachtet. Es ist ein generisches Landmark, das zur Unterstützung der Navigation dient, 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 Inhaltsbereiche reserviert werden, die so wichtig sind, dass Nutzer wahrscheinlich leicht zu diesem Bereich navigieren möchten und er in einer Zusammenfassung der Seite aufgelistet werden sollte. Eine Region-Rolle ist ein allgemeinerer Begriff und sollte nur verwendet werden, wenn der zu identifizierende Abschnitt nicht genau durch eine der anderen Landmark-Rollen beschrieben wird, wie 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 geeignete Überschrift vorhanden ist, sollte aria-label verwendet werden.

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

Die Verwendung des <section>-Elements kommuniziert automatisch, dass ein Abschnitt eine Rolle von region hat, wenn ihm ein zugänglicher Name gegeben wird. Entwickler sollten immer das korrekte semantische HTML-Element bevorzugen, in diesem Fall <section>, statt 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. Oftmals wird der Wert des aria-labelledby-Attributs die ID des Elements sein, das zur Titulierung 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>

Barrierefreiheitsbedenken

Sparsam verwenden! Landmark-Rollen sollen sparsam verwendet werden, um größere, übergreifende Abschnitte des Dokuments zu identifizieren. Die Verwendung zu vieler Landmark-Rollen kann Bildschirmleser beeinträchtigen, da es schwierig wird, das Gesamtlayout der Seite zu verstehen.

Verwenden Sie die region-Rolle nur, wenn kein anderes relevantes Inhaltsstrukturierungselement oder Landmark-Rolle zutrifft. Wenn mehrere Regionen auf einer Seite existieren, könnte es sich lohnen, die gesamte Struktur der Seite neu zu überprüfen.

Beste Praktiken

Bevorzugen Sie HTML

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

Kennzeichnung von Landmarks

Wenn es mehr als eine region-Landmark im Dokument gibt, geben Sie jeder einen eindeutigen Namen. Dieser Name ermöglicht es einem Benutzer von unterstützenden Technologien, den Zweck jedes Landmarks 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.

Scrollende Inhaltsbereiche mit Überlauftext

Wenn ein Inhaltsbereich mit tabindex="0" versehen ist, fügen Sie role="region" hinzu, um Bildschirmlesernutzern zu signalisieren, dass es sich um eine generische Region handelt. Dies ermöglicht es Tastaturbenutzern, Bereiche mit Überlauftext zu scrollen.

SVG

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

Spezifikationen

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