Standards · ARIA

Rolle Dokumentstruktur

group

Markiert eine generische Gruppierung verwandter Elemente. Semantisch weniger gewichtig als ein Landmark — Screenreader führen Gruppen nicht im Landmark-Menü auf. Für gruppierte Formularelemente ist <fieldset> + <legend> zu verwenden; role="group" kommt für Nicht-Formular-Gruppierungen zum Einsatz.

Verwendung

Für gruppierte Formularelemente ist <fieldset> mit <legend> zu verwenden. Das native Element liefert die Gruppensemantik, den visuellen Rahmen (frei gestaltbar) und die Legende-Verknüpfung.

role="group" ist das richtige Mittel, wenn:

  • Eine Menge verwandter, aber nicht formularbasierter Steuerelemente zusammengefasst werden soll (die drei Kombinationsfelder eines Datumsauswählers, eine Reihe von Symbol-Schaltern).
  • Eine Unterregion innerhalb eines Tree-, Treeview- oder Grid-Widgets ausgezeichnet werden soll, bei der die Kinder jeder Ebene eine logische Gruppe bilden.
  • Eine Gruppierung gewünscht wird, die NICHT als Landmark exponiert wird — für diese Unterscheidung siehe role="region".

Eine Gruppe SOLLTE einen zugänglichen Namen besitzen (aria-label oder aria-labelledby), wenn ihr Zweck aus dem Kontext nicht offensichtlich ist. Ohne Namen ist die Gruppe für Screenreader unsichtbar; die Rolle bietet dann keinen Mehrwert.

Häufige Fehler

  • role="group" ohne zugänglichen Namen. Screenreader ignorieren die Rolle; die Gruppe bleibt unsichtbar.
  • role="group" verwenden, obwohl <fieldset> + <legend> funktionieren würden. Das native Element ist vorzuziehen.
  • role="group" mit role="region" verwechseln. Region ist ein Landmark und erscheint in der Landmark-Navigation; Group nicht.
  • Jeden UI-Abschnitt als Gruppe auszeichnen. Sparsam einsetzen — zu viele Gruppierungen entwerten jede einzelne.
  • role="group" auf dem Wrapper um ein role="tablist". Redundant — die Tabliste ist bereits ein Gruppierungskonstrukt.

Beispiel

<!-- Bevorzugt für Formularelemente -->
<fieldset>
  <legend>Geburtsdatum</legend>
  <label>Tag <input type="text" inputmode="numeric"></label>
  <label>Monat <input type="text" inputmode="numeric"></label>
  <label>Jahr <input type="text" inputmode="numeric"></label>
</fieldset>

<!-- Nicht-Formular-Gruppierung -->
<div role="group" aria-labelledby="ratingLabel">
  <span id="ratingLabel">Artikel bewerten</span>
  <button type="button" aria-label="1 Stern">★</button>
  <button type="button" aria-label="2 Sterne">★★</button>
</div>