- Stufe
- A
- Seit
- WCAG 2.0
- Einträge
- 3 / 193
3.3.2 Beschriftungen (Labels) oder Anweisungen
Jede Stelle, an der ein Mensch etwas eingeben muss, braucht eine sichtbare Beschriftung oder eine Anweisung, die sagt, was erwartet wird.
/ Was es verlangt
Überall, wo Inhalt eine Eingabe verlangt, müssen Menschen wissen, was sie eintragen sollen, bevor sie anfangen. Das heißt: eine sichtbare Beschriftung für jedes Feld, eine Frage für jede Gruppe von Kontrollkästchen oder Optionsfeldern und eine Anweisung dort, wo die Eingabe einem Muster folgen muss, etwa bei einem Datumsformat oder einem Pflichtfeld. Das hilft allen, und entscheidend ist es für Menschen mit kognitiven Einschränkungen oder Lernbehinderungen, für Menschen, die den Bildschirm vergrößern und jeweils nur ein Feld sehen, und für alle, die einen Screenreader nutzen.
Das Kriterium verlangt, dass Beschriftungen oder Anweisungen vorhanden sind. Es sagt nicht, dass sie im Code mit dem Feld verknüpft sein müssen, das fällt unter 1.3.1 und 4.1.2, und auch nicht, dass sie gut formuliert sein müssen, das ist 2.4.6. Ausnahmen nennt es nicht. Ein Platzhalter, der beim ersten Tastendruck verschwindet, lässt das Feld genau dann ohne Beschriftung, wenn man seine Eingabe prüft, deshalb erkennen Prüfer ihn nicht als einzige Beschriftung an.
/ Woran Seiten scheitern
- Ein Feld hat nur einen Platzhalter wie „E-Mail“, der verschwindet, sobald man zu tippen beginnt.
- Pflichtfelder sind mit einem Sternchen markiert, und nichts auf der Seite sagt, was das Sternchen bedeutet.
- Ein Datums- oder Telefonfeld erwartet ein festes Format und zeigt es nicht an.
- Eine Gruppe von Optionsfeldern bietet „Ja“ und „Nein“ an, ohne sichtbare Frage darüber.
- Die Anweisung zu einem Feld steht unter der Absendeschaltfläche, also hinter der Stelle, an der sie gebraucht wurde.
/ So prüfen Sie es selbst
- Sehen Sie sich jedes Feld bei leerem Formular an. Sichtbarer Text sollte sagen, was hineingehört.
- Tippen Sie etwas in jedes Feld und prüfen Sie, ob seine Beschriftung noch auf dem Bildschirm steht.
- Suchen Sie die Pflichtfelder und prüfen Sie, ob die Markierung vor dem ersten Feld erklärt oder in jeder Beschriftung als Wort ausgeschrieben ist.
- Prüfen Sie Felder mit festem Format, etwa Datumsangaben, Telefonnummern und Passwörter, auf einen sichtbaren Hinweis, was akzeptiert wird.
- Suchen Sie bei jeder Gruppe von Kontrollkästchen und Optionsfeldern nach der Frage oder Überschrift, zu der die Optionen gehören.
/ So beheben Sie es
- Geben Sie jedem Feld ein sichtbares label-Element und verbinden Sie es über das for-Attribut mit der id des input-Elements.
- Umschließen Sie zusammengehörige Kontrollkästchen oder Optionsfelder mit einem fieldset-Element und schreiben Sie die Frage in dessen legend.
- Nennen Sie das erwartete Format in der Beschriftung oder in einem Hinweis unter dem Feld und verknüpfen Sie den Hinweis über aria-describedby mit dem input-Element.
- Kennzeichnen Sie Pflichtfelder mit dem Wort „erforderlich“ in der Beschriftung oder erklären Sie das Sternchen über dem Formular. Ergänzen Sie am input-Element außerdem das Attribut required oder aria-required="true".
- Nutzen Sie das placeholder-Attribut nur für einen Beispielwert, niemals als einzigen Namen des Feldes.
/ Was unser Scanner prüft
Hier ist eine Prüfung einsortiert, required-not-announced. Enthält der zugängliche Name eines sichtbaren Feldes ein Sternchen oder die Wörter „(required)“ oder „(wymagane)“, und hat das Feld weder das Attribut required noch aria-required="true", meldet sie das Feld. Sie prüft nicht, ob eine sichtbare Beschriftung oder ein Formathinweis vorhanden ist. Felder ganz ohne Beschriftung werden unter 1.3.1 und 4.1.2 gemeldet.
/ Wer es verletzt, nach unseren eigenen Messungen
| Stelle | Sektor | Vorkommen | Wert |
|---|---|---|---|
| Bundesministerium des Innern | government · DE | 1 | 10 |
| Gdynia | city · PL | 1 | 7 |
| Muzeum Narodowe w Warszawie | culture · PL | 1 | 11 |
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Reicht ein Platzhalter als Beschriftung eines Formularfelds?
Nein. Ein Platzhalter verschwindet, sobald man zu tippen beginnt, das Feld hat also keine Beschriftung, während man es ausfüllt oder danach prüft. Platzhaltertext ist außerdem oft zu blass, um ihn bequem zu lesen. Verwenden Sie ein sichtbares label-Element, das stehen bleibt, und nutzen Sie den Platzhalter, wenn Sie einen möchten, für ein Beispiel eines gültigen Werts.
Wie kennzeichnet man Pflichtfelder barrierefrei?
Sichtbar und im Code. Schreiben Sie auf dem Bildschirm „erforderlich“ in die Beschriftung, oder verwenden Sie ein Sternchen und erklären Sie es vor dem ersten Feld. Ergänzen Sie im Markup das Attribut required am input-Element oder aria-required="true" an einem eigenen Bedienelement, damit ein Screenreader das Feld als Pflichtfeld ansagt. Ein Sternchen ohne Erklärung und ohne Attribut lässt sehende wie blinde Nutzer raten.
Worin unterscheiden sich 3.3.2 und 1.3.1 bei Formularbeschriftungen?
3.3.2 fragt, ob es eine Beschriftung oder Anweisung gibt, die ein Mensch lesen kann. 1.3.1 Info und Beziehungen fragt, ob diese Beschriftung im Code mit ihrem Feld verknüpft ist, sodass Software beides zusammen melden kann. Ein Formular kann das eine bestehen und am anderen scheitern: Sichtbarer Text neben einem Feld ohne for-Attribut erfüllt 3.3.2 und verletzt 1.3.1.