ARIA: region-Rolle
Die region-Rolle kennzeichnet Bereiche eines Dokuments, die der Autor für wichtig hält. Sie ist eine allgemeine Landmarke, die die Navigation erleichtert, wenn keine der anderen Landmarkenrollen passt.
<div role="region" aria-label="Example">
<!-- region content -->
</div>
Beschreibung
Die region-Rolle ist eine ARIA-Landmarkenrolle.
Sie sollte Abschnitten vorbehalten bleiben, die so wichtig sind, dass Benutzer wahrscheinlich direkt zu ihnen navigieren und sie in einer Seitenübersicht sehen möchten. Die region-Rolle ist allgemeiner als andere Landmarkenrollen und sollte nur verwendet werden, wenn keine davon den betreffenden Abschnitt treffend beschreibt, beispielsweise banner, main, contentinfo, complementary oder navigation.
Jedes Element mit der region-Rolle sollte eine Beschriftung haben, die den Zweck des enthaltenen Inhalts beschreibt. Verwenden Sie dafür vorzugsweise aria-labelledby mit einem Verweis auf eine sichtbare Überschrift. Ist keine passende sichtbare Überschrift vorhanden, verwenden Sie aria-label.
Der Inhalt einer region-Landmarke sollte auch dann verständlich sein, wenn er vom Hauptinhalt des Dokuments getrennt betrachtet wird.
Das Element <section> vermittelt automatisch die Rolle region, wenn es einen zugänglichen Namen hat. Entwickler sollten stets das passende semantische HTML-Element – in diesem Fall <section> – gegenüber ARIA bevorzugen.
Zugehörige WAI-ARIA-Rollen, -Zustände und -Eigenschaften
aria-labelledbyoderaria-label-
Verwenden Sie eines dieser Attribute, um die Region zu beschriften. Häufig ist der Wert des Attributs
aria-labelledbydie id des Elements, das als Überschrift für den Abschnitt dient. Ist keine passende sichtbare Überschrift vorhanden, verwenden Siearia-label.
Beispiele
<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>
Bedenken hinsichtlich der Barrierefreiheit
Sparsam verwenden! Landmarkenrollen sollen nur für größere, übergeordnete Abschnitte eines Dokuments eingesetzt werden. Zu viele Landmarkenrollen können in Screenreadern „Rauschen“ erzeugen und es erschweren, den Gesamtaufbau der Seite zu verstehen.
Verwenden Sie die region-Rolle nur, wenn kein anderes passendes Element zur Inhaltsgliederung und keine andere passende Landmarkenrolle infrage kommt. Gibt es mehrere Regionen auf einer Seite, kann es sinnvoll sein, den Gesamtaufbau der Seite noch einmal zu überprüfen.
Bewährte Vorgehensweisen
HTML bevorzugen
Das Element <section> vermittelt automatisch, dass es die Rolle region hat. Verwenden Sie nach Möglichkeit das semantische Element <section> anstelle der region-Rolle.
Landmarken beschriften
Wenn ein Dokument mehr als eine region-Landmarke enthält, geben Sie jeder eine eindeutige Beschriftung. So können Benutzer assistiver Technologien den Zweck jeder Landmarke schnell erkennen.
<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 die Beschriftung der Region durch das Attribut aria-labelledby erzeugt.
Scrollbare Inhaltsbereiche mit überlaufendem Text
Ein scrollbarer Bereich benötigt möglicherweise tabindex="0", damit Benutzer, die ausschließlich die Tastatur verwenden, ihn fokussieren und scrollen können. Dadurch wird der Bereich allein noch nicht zu einer Landmarke. Verwenden Sie role="region" nur für einen ausreichend wichtigen Abschnitt der Seite, den Benutzer über die Landmarkennavigation finden können sollten. Geben Sie jeder solchen Region einen aussagekräftigen, eindeutigen zugänglichen Namen, beispielsweise mit aria-labelledby. Informationen zu gewöhnlichen scrollbaren Inhalten, die keine Landmarke erfordern, finden Sie unter der group-Rolle.
SVG
role="region" kann zusammen mit einem aria-label für Bereiche eines <svg> angegeben werden, damit einzelne Abschnitte des SVG beschrieben werden können.
Spezifikationen
| Spezifikation |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # region |
| Unknown specification |