3.3.2 Beschriftungen oder Anweisungen

Was bedeutet das?

Wer etwas eingeben soll, muss wissen, was erwartet wird. Jedes Feld bekommt daher eine sichtbare Beschriftung wie „Vorname“ oder „Telefonnummer“. Wenn ein bestimmtes Format nötig ist, etwa ein Datum als TT.MM.JJJJ, steht das vorher dabei.

Ein Platzhaltertext im Feld ersetzt keine Beschriftung, denn er verschwindet beim Tippen. Pflichtfelder werden erkennbar gekennzeichnet, und die Bedeutung des Sternchens wird erklärt. Die Beschriftung soll mit dem Feld im Code verknüpft sein, damit Screenreader sie vorlesen.

Wem hilft das?

• Menschen mit kognitiven Einschränkungen oder Lernschwierigkeiten
• Ältere Menschen, die vergessen, wofür ein Feld gedacht war, sobald der Platzhalter weg ist
• Screenreader-Nutzer, die ohne Beschriftung nur „Eingabefeld“ hören
• Menschen mit Sehbehinderung, die blasse Platzhalter kaum lesen können

Typische Fehler

• Felder haben nur einen grauen Platzhalter wie „Name“ und keine Beschriftung.
• Das Datumsformat wird erst in der Fehlermeldung genannt.
• Pflichtfelder sind nur mit einem Sternchen markiert, dessen Bedeutung nirgends erklärt ist.
• Eine Gruppe von Optionsfeldern hat keine gemeinsame Frage oder Überschrift.

So prüfen wir das

• axe-core Automatisch: axe-core findet typische Verstöße. Ein Verstoß wird als „nicht erfüllt“ vorausgefüllt.
• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Jedes Eingabefeld hat eine sichtbare Beschriftung oder Anweisung, inkl. Pflichtfeld- und Formathinweisen.

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

<input type="text" placeholder="Geburtsdatum">

<p>Felder mit * sind Pflichtfelder.</p>
<label for="geb">Geburtsdatum *</label>
<input id="geb" name="geb" required autocomplete="bday"
       aria-describedby="geb-format">
<p id="geb-format">Format: TT.MM.JJJJ</p>

Beschriftung, Pflichtfeld-Hinweis und Format sind dauerhaft sichtbar und mit dem Feld verknüpft.

Praxistipps

• Fassen Sie zusammengehörige Optionen mit <fieldset> und <legend> zusammen.

Ratgeber und Muster dazu

• Formulare, die jeder ausfüllen kannAm Formular entscheidet sich, ob jemand kauft, bucht oder aufgibt. Hier lesen Sie, wie Beschriftungen, Pflichtfelder und Fehlermeldungen gebaut sein müssen, damit es mit Tastatur, Screenreader und Vergrößerung klappt.
• BFSG für kleine Unternehmen: Wann die Ausnahme greift und wann nichtKleinstunternehmen mit Dienstleistungen sind vom BFSG ausgenommen. Doch die Ausnahme hat klare Grenzen, und wer wächst, verlässt sie schneller als gedacht.
• Fehlermeldungen, die helfen statt verwirrenFehler als Text, verknüpft, mit Lösung und Fehlerübersicht.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 3.3.2 Labels or Instructions