Die WCAG-Kriterien

WCAG 1.3.1: Info und Beziehungen von Beschriftungen von Formularelementen

Zurück zu allen WCAG-Kriterien

ÜBERBLICK

Umsetzbarkeit:

Komplexität:Einfach
Dauer:Schnell

Wichtig für Rolle:

Entwicklung

Zum WCAG-Kriterium:

Informationen und Beziehungen (englisch)

Worum gehts?

Formulare müssen so aufgebaut sein, dass ihre Struktur und Zusammenhänge auch im Code richtig hinterlegt sind. Dazu gehört, dass jedes Feld einen verständlichen Namen hat und dass Gruppen von Feldern programmatisch als Einheit ausgezeichnet werden.

Eine Illustration von einem Kontaktformular. Man sieht das Input-Feld für Vorname. Darüber ist eine Beschriftung des Feldes, die durch das HTML "for"-Element mit dem Input-Feld darunter verknüpft ist.

Umsetzung

Mindestens eine der folgenden Möglichkeiten muss umgesetzt werden, um das Kriterium zu erfüllen. Nähere Informationen dazu findest du in den jeweils verlinkten WCAG-Techniken.

Gib Formularfeldern einen zugänglichen Namen
Ein einfaches HTML-Formularfeld (<input>) hat an sich keinen zugänglichen Namen. Ohne kann ein Screenreader-User aber nicht verstehen, was er in das Formularfeld eingeben soll. Deswegen braucht es einen Text, der programmatisch mit dem Input verknüpft ist, um dem Feld einen Namen zu geben. Der empfohlene Weg dafür ist, ein <label> zu nutzen und dieser per for-Attribut mit dem <input> zu verknüpfen.

Wenn es nicht möglich sein sollte, einen Namen per Label zu setzen, dann ist es auch ok, dem Input mit einem aria-labelledby einen Namen zu geben.
WCAG-Technik(en) in Englisch:

Gruppiere zusammengehörende Formularfelder
Formularfelder wie Checkboxen und Radio-Groups, die zusammengehören und auch visuell gruppiert sind, müssen auch programmatisch als eine Einheit ermittelbar sein. Dazu müssen sie durch <fieldset> oder durch ein <div> mit der role=”group” ausgezeichnet sein.

Wenn es für das Verständnis der Gruppe nötig ist, benötigt die Gruppe außerdem eine Beschriftung. Bei einem <fieldset> passiert das über das <legend>-tag. Bei einem <div> mit der role=”group”, braucht es eine Überschrift, die mit einem aria-labelledby verknüpft ist.

Auch die einzelnen <input>-Felder benötigen zusätzlich ein verknüpftes <label>.
WCAG-Technik(en) in Englisch: