Was wird geprüft?
Sichtbare Beschriftungen von Formularelementen sind vorhanden.
Eine sichtbare Beschriftung von Formularelementen soll vor (das heißt links neben oder über) dem zugehörigen Eingabefeld vorhanden sein. Nur die Beschriftung von Checkboxes und Radiobuttons kann (und sollte normalerweise) rechts neben dem zugehörigen Eingabefeld angeordnet werden.
Wenn für die Eingabe ein bestimmtes Format verlangt wird, so sind die Anweisungen für alle Benutzer lesbar.
Warum wird das geprüft?
Wenn sichtbare Beschriftungen zur Verfügung gestellt werden, wissen Nutzer, welche Eingaben erwartet werden. Fehler können so vermieden werden.
Die Anordnung von Beschriftungen direkt vor oder über dem Eingabefeld entspricht den üblichen Gestaltungskonventionen. Auch in ausschnitthaften Ansichten (etwa in Vergrößerungssoftware) wird schnell klar, welche Beschriftung zu welchem Feld gehört.
Wie wird geprüft?
1. Anwendbarkeit des Prüfschritts
Der Prüfschritt ist anwendbar, wenn die Seite Formularelemente enthält.
2. Prüfung
Die Seite im Firefox oder Chrome Browser aufrufen.
2.1 Sind Beschriftungen vorhanden?
Sind alle Formularelemente sichtbar beschriftet?
Sind Pflichtfelder über Text gekennzeichnet, etwa durch die Ergänzung (Pflichtfeld) nach der Beschriftung, oder durch die Auszeichnung aller Nicht-Pflichtfelder durch die Ergänzung (optional)? Wenn zur Anzeige der Pflichtfelder Symbole wie Sternchen (*) genutzt werden, sollte deren Bedeutung erklärt sein (am besten am Beginn des Formulars, bei einem mehrstufigen Formular beim ersten Formular).
Wenn Eingabefelder ein bestimmtes Eingabeformat vorgeben, wird dieses vor dem Eingabefeld oder auch im Placeholder-Text klar beschrieben (Beispiele wären "Format der Datumseingabe: TT.MM.JJJJ" oder "Telefonnummer: Nur Zahlen ohne Leerstellen oder Bindestriche eingeben").
2.2 Sind Beschriftungen richtig positioniert?
Mittels Web Developer Toolbar die Funktion Miscellaneous > Linearize page aufrufen und damit die Struktur der Seite linearisieren.
Prüfen, ob in der linearisierten Ansicht die Beschriftung der Eingabefelder klar den Feldern zuzuordnen ist, das heißt, die Beschriftung soll immer direkt über oder vor dem Feld stehen. Die Beschriftung von Checkboxen und Radiobuttons kann (und sollte in der Regel auch) nach dem Formularelement stehen.
3. Hinweise
Das
placeholder-Attribut ist keine ausreichende Beschriftung im Sinne dieses Prüfschritts. Es verschwindet bei (auch versehentlichen) Nutzereingaben.Bei kombinierten Eingabeelementen hat nicht immer jedes Element eine zugeordnete Beschriftung. In diesem Fall sollen Elemente mit einem erklärenden
title-Attribut versehen werden. Beispiel: In einem Formular werden für die Eingabe eines Datums drei Auswahllisten angeboten (Tag, Monat und Jahr). Die drei Auswahllisten haben eine gemeinsame Beschriftung: Datum. Die Auswahllisten für Tag, Monat und Jahr sind mit einem erklärendentitle-Attribut versehen.Es kann sinnvoll sein, dass bei Formularen Hinweise zum Eingabeformat oder zu ausgelösten Aktionen einmal am Beginn des Formulars stehen statt vor jedem einzelnen Eingabefeld.
Wenn ein einfaches Suchformular nur aus einem Eingabefeld und einem Button besteht, ist oftmals keine sichtbare Beschriftung notwendig. Voraussetzung ist jedoch, dass sich die visuelle Gestaltung des Submit-Buttons an übliche Konventionen orientiert. Es muss visuell verständlich sein, dass es sich um eine Suche handelt (z.B. durch Verwendung eines Lupe-Icons). Die programmatische Ermittelbarkeit einer nicht visuellen Beschriftung ist Gegenstand des Prüfschritts 1.3.1h Beschriftung von Formularelementen programmatisch ermittelbar (siehe dort Abschnitt 3.3). Ein Mangel bzgl. der programmatischen Ermittelbarkeit führt in diesem Prüfschritt nicht zu einer negativen Bewertung.
4. Bewertung
Nicht erfüllt
Wichtige Formularelemente (z. B. die Sucheingabe) sind ohne sichtbare Beschriftung, auch angrenzende Elemente erklären nicht die Funktion.
Teilweise erfüllt oder schlechter
Beschriftungen werden nur als Formularfeld-Vorbelegung (
placeholder-Attribut) bereitgestellt.
Einordnung des Prüfschritts
Abgrenzung von anderen Prüfschritten
In diesem Prüfschritt geht es um sichtbare Beschriftungen. Das Vorhandensein programmatisch ermittelbarer Namen von Formularelementen wird dagegen in Prüfschritt 9.1.3.1h "Beschriftung von Formularelementen programmatisch ermittelbar" geprüft.
Einordnung des Prüfschritts nach WCAG 2.1
Guidelines
Success criteria
3.3.2 Labels or Instructions (Level A)
Techniques
General Techniques
HTML Techniques
H44: Using label elements to associate text labels with form controls
H65: Using the title attribute to identify form controls when the label element cannot be used
H71: Providing a description for groups of form controls using fieldset and legend elements
H90: Indicating required form controls using label or legend