Zum Inhalt springen

WCAG 3.3.2

Ein Formular, das seine Felder vergisst

Jedes Eingabefeld braucht eine Beschriftung, die dauerhaft sichtbar und technisch mit dem Feld verbunden ist. Der graue Text im leeren Feld ist keine Beschriftung, sondern ein Platzhalter.

Der Unterschied wird in dem Moment sichtbar, in dem jemand tippt: Der Platzhalter verschwindet und nimmt die Information mit. Wer beim Ausfüllen unterbrochen wird, hat danach vier ausgefüllte Felder ohne Namen vor sich.

Bitte wirklich beide durchklicken, das dauert zwei Minuten

Wer mit Barrierefreiheit noch nichts zu tun hatte, versteht unsere Studie danach deutlich besser: Aus einer Prozentzahl wird eine Sache, die man am eigenen Rechner gemerkt hat. Auf beiden Seiten steht dieselbe Anleitung, und der Unterschied liegt allein im Ergebnis.

Wen das trifft

Menschen mit kognitiven Einschränkungen und Gedächtnisproblemen, blinde Nutzer, deren Screenreader dann nur „Eingabefeld“ ansagt, und alle, die zwischendurch abgelenkt werden. Also alle.

Was unsere Prüfung hier leistet

Genau dieses Muster prüft unsere Engine automatisch: Ebene 5 liest den aufgelösten Accessibility-Tree, in dem der Browser den Namen jedes Feldes tatsächlich berechnet, und erkennt, wenn dieser Name ausschließlich aus dem Platzhalter stammt, ohne label, aria-label, aria-labelledby oder title. Ein Scan dieser kaputten Seite meldet den Fund an allen vier Feldern.

Bestätigt wird der Fund trotzdem von einem Menschen, nicht automatisch veröffentlicht: Zu diesem Kriterium braucht es an vielen Stellen eine inhaltliche Einschätzung, etwa ob eine nötige Anweisung fehlt, die eine Maschine nicht leisten kann. Deshalb landet jeder Fund zu diesem Kriterium grundsätzlich in der menschlichen Prüfung, dieser hier eingeschlossen. Die Maschine findet zuverlässig, der Mensch entscheidet den letzten Meter.

Wie häufig das vorkommt

Fehlende oder nicht verknüpfte Beschriftungen gehören in beiden Stichproben unserer EU-Studie zu den zehn häufigsten Verstößen.

Zur vollständigen Studie

Sie wollen wissen, wie man das behebt?

Die Beispielseiten hier zeigen absichtlich keine Lösungen: Sie sind zum Erleben da, nicht zum Nachbauen. Die Anleitung mit Code steht im Tutorial.

Zum Tutorial

Alle Beispiele ansehen