Synonyme: Formularfeldgruppe, Gruppenfeld, Gruppierung, Groupbox

Siehe auch: Überschriften, Formular, Werkzeugleiste

Gruppen dienen der Zusammenfassung von inhaltlich zusammengehörigen Elementen (siehe DIN EN ISO 9241-161: 8.15). Die Gruppe besitzt eine Beschriftung, die als Gruppenbeschriftung für die enthaltenen Elemente dient.

Abbildung: Gruppierte Radiobuttons mit einer Gruppenbeschriftung

Darstellung

Permalink "Darstellung"
Nr.EigenschaftBeschreibungKlassifizierungReferenz
366KontrastDer visuelle Indikator für die Gruppe (z. B. der Rahmen um die Gruppe) muss zum Hintergrund oder benachbarten Farben ein Kontrastverhältnis von mindestens 3:1 aufweisen.

Ausnahmen:
  • Der visuelle Indikator wurde nicht farblich, sondern räumlich gestaltet (z. B. mittels geeigneter Abstände zwischen der Gruppe und Inhalten außerhalb der Gruppe).
  • Ein visueller Indikator ist nicht notwendig, weil z. B. die Gruppe die gesamte Maske umfasst.
MussEN 301 549:
9.1.4.11, 11.1.4.11
367KontrastDie Beschriftung der Gruppe muss zum Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 aufweisen.

Hinweis: Bei großer Schrift (ab 24 px bzw. ab 18,7 px bei fettem Schriftschnitt) ist ein Kontrastverhältnis von mindestens 3:1 ausreichend.

MussEN 301 549:
9.1.4.3, 11.1.4.3
368BeschriftungDie Beschriftung der Gruppe muss aussagekräftig sein.

Hinweis: Um das zu erreichen, soll die Beschriftung der Gruppe knapp und eindeutig sein.

MussEN 301 549:
9.2.4.6, 11.2.4.6
369BeschriftungDie Beschriftung der Gruppe soll eindeutig und innerhalb des Kontexts verständlich sein.SollDIN EN ISO 9241-171: 8.1.2, 8.1.3
370BeschriftungInhaltlich zusammengehörige Formularelemente sollen gruppiert und mit einer Beschriftung versehen werden.

Hinweis: Dies gilt insbesondere für Gruppen von [](Radiobuttons) und Checkboxen.

SollDIN EN ISO 9241-125: 5.1.8

Programmierung/Schnittstellen

Permalink "Programmierung/Schnittstellen"
Nr.EigenschaftBeschreibungKlassifizierungReferenz
370RolleDie Rollen „Gruppe“ oder ggf. eine spezifische Rolle für den jeweiligen Gruppentyp muss an die Accessibility API übermittelt werden (siehe Accessibility API).MussEN 301 549: 9.1.3.1, 11.1.3.1, 11.5.2.5
371Web: GliederungAlle visuell wahrnehmbaren Seitenbereiche müssen auch programmatisch wahrnehmbar sein, z. B. über
  • Überschriften,
  • Regionen,
  • sonstige Gruppierungen.
MussEN 301 549: 9.1.3.1
372NameDie Gruppe muss einen knappen und aussagekräftigen Accessible Name besitzen.MussEN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5
373Desktop: ElementhierarchieDie Eltern-Kind-Beziehungen der Elemente innerhalb der Gruppe müssen an die Accessibility API übermittelt werden.MussEN 301 549: 11.5.2.9

Praxistipp Formularfeldgruppen in Web-Anwendungen

Permalink "Praxistipp Formularfeldgruppen in Web-Anwendungen"

Screenreader-Ausgabe

Permalink "Screenreader-Ausgabe"
  • JAWS: [Beschriftung] Gruppe … Gruppe Ende
  • NVDA: [Beschriftung] Gruppierung … außerhalb von Gruppierung
  • Windows Sprachausgabe: -

Hinweise:

  • Formularfeldgruppen werden von der Windows Sprachausgabe nicht ausgegeben.
  • Bei JAWS und NVDA ist das Ende der Formularfeldgruppe nur beim Lesen mit dem virtuellen Cursor wahrnehmbar. Bei der TAB-Navigation wird die Rolle „Gruppe“ bzw. „Gruppierung“ lediglich beim ersten (bzw. bei UMSCHALT+TAB beim letzten) Formularelement in der Gruppe, d. h. beim Betreten der Gruppe ausgegeben. Das Verlassen der Gruppe ist bei TAB-Navigation nicht wahrnehmbar. In den Elementübersichten der Screenreader wird die Beschriftung der Formularfeldgruppe bei jedem Formularelement innerhalb der Gruppe angezeigt.
  • Damit JAWS und NVDA die Formularfeldgruppen erkennen können, müssen sie beschriftet werden, unabhängig davon, ob sie mit dem HTML-Element <fieldset> oder mit den ARIA-Rollen group bzw. radiogroup ausgezeichnet sind.
  • Befindet sich innerhalb des <fieldset>- und außerhalb des <legend>-Elements eine Überschrift, wird von JAWS die Gruppenbeschriftung nicht korrekt ausgegeben. Somit sollten Überschriften im <fieldset> vermieden werden.

HTML

Permalink "HTML"

Formularfeldgruppen werden mit dem <fieldset>-Element ausgezeichnet und dienen der Gruppierung von zusammengehörenden Formularfeldern, insbesondere bei Radiobuttons. Die Formularelemente, die zur Gruppe gehören, sind im Quellcode innerhalb des <fieldsets> verschachtelt. Die Beschriftung der Formularfeldgruppe erfolgt mit dem <legend>-Element, welches sich als erstes Kindelement im <fieldset> befinden sollte. Weil die Beschriftung der Gruppe vor der Beschriftung der enthaltenen Formularelemente ausgegeben wird, sollte Folgendes beachtet werden:

  • Die Beschriftung der Gruppe sollte möglichst knapp sein, ohne dabei an Aussagekraft zu verlieren.
  • Formularfeldgruppen sollten nicht ineinander verschachtelt werden.

Gemäß HTML-Spezifikation kann das <legend>-Element Bedienelemente enthalten. Dies wird jedoch von den Assistenztechnologien teilweise nicht unterstützt, so dass empfohlen wird, im <legend>-Element lediglich die Beschriftung der Formularfeldgruppe in Textform aufzunehmen. Das <fieldset>-Element kann mit disabled als deaktiviert ausgezeichnet werden. Dies bewirkt, dass alle enthaltenen Formularelemente deaktiviert sind (mit Ausnahme von Formularelementen, die sich im <legend>-Element befinden).

Weitere Informationen: 4.10.15 The fieldset element - HTML Standard (whatwg.org), [4].10.16 The legend element - HTML Standard (whatwg.org)](https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element)

ARIA

Permalink "ARIA"

Wird die Formularfeldgruppe nicht mit dem HTML-Element umgesetzt, sollte zusätzlich Folgendes beachtet werden:

  • Die Rolle der Liste wird mit role=group bzw. role=radiogroup (nur bei Radiobuttons) übermittelt. Bei der Ausgabe durch die Screenreader erfolgt keine Unterscheidung zwischen group und radiogroup.
  • Die Beschriftung der Gruppe kann per aria-label oder aria-labelledby erfolgen.
  • Die ARIA-Rolle radiogroup kann (im Gegensatz zur Rolle group) mit den Attributen aria-readonly als schreibgeschützt, aria-required als Pflichtfeld und aria-invalid als fehlerhaft ausgezeichnet werden. Darüber hinaus kann mit aria-errormessage der ARIA-Radiobuttongruppe eine Fehlermeldung zugewiesen werden.
  • Sowohl die ARIA-Rolle radiogroup als auch die ARIA-Rolle group können mit aria-disabled als deaktiviert ausgezeichnet werden. Dies bewirkt, dass alle enthaltenen Formularelemente von der Assistenztechnologie als deaktiviert ausgegeben werden (d. h. sie sollten auch tatsächlich deaktiviert sein).

Weitere Informationen: group role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), radiogroup role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org)

Informationen zu diesem Artikel

Datum:
5.10.2023
Lizenz:
CC-BY-SA 4.0
Version:
0.5

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!