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.
<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
oderaria-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, solltearia-label
verwendet werden.
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>
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
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.
<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 |
Siehe auch
- Das
<section>
Element - region (Role): Accessible Rich Internet Applications (WAI-ARIA) 1.1
- ARIA:
banner
Rolle - ARIA:
main
Rolle - ARIA:
contentinfo
Rolle - ARIA:
complementary
Rolle - ARIA:
navigation
Rolle - Landmark Rollen: Nutzung von ARIA: Rollen, Zustände und Eigenschaften
- Using WAI-ARIA Landmarks – 2013 | The Paciello Group
- Accessible Landmarks | scottohara.me