Ein Formularfeld ohne korrekt verknüpftes Label ist der häufigste Fehler, den wir bei Kontaktformularen, Bestellvorgängen und Anmeldebildschirmen antreffen. Das Label ist oft visuell vorhanden, ordentlich über oder neben dem Eingabefeld angeordnet, aber im Quellcode nicht mit diesem Feld verknüpft. Ein Screenreader liest das Feld dann als "Bearbeiten, leer" vor, ohne zu erklären, wofür das Feld bestimmt ist.
Das Problem entsteht meist, weil ein Label und ein Eingabefeld visuell zusammenhängen, aber der Programmierer (oder das Bausystem) keine technische Beziehung zwischen beiden hergestellt hat. Für einen sehenden Benutzer spielt das keine Rolle: Er sieht das Label einfach dort stehen. Für jemanden, der mit einem Screenreader arbeitet, existiert diese visuelle Nähe nicht. Was zählt, ist die Verknüpfung im Code, und diese fehlt häufiger, als Sie vielleicht erwarten würden, auch auf Websites, die gepflegt aussehen.
Drei Varianten desselben Fehlers
Die häufigste Form ist das Label, das zwar auf dem Bildschirm vorhanden ist, aber im Code unabhängig vom Feld existiert, ohne technische Verknüpfung. Die zweite Form ist die Verwendung eines Platzhaltertexts im Feld selbst als einzige Erklärung: Sobald der Benutzer zu tippen beginnt, verschwindet dieser Text, und ein Screenreader behandelt einen Platzhalter sowieso nicht immer als vollwertiges Label. Die dritte Form sehen Sie besonders bei Symbolen: ein Suchfeld nur mit einem Lupe-Symbol oder eine Schaltfläche nur mit einem Piktogramm, ohne Text, den ein Screenreader vorlesen kann.
All diese Varianten haben gemeinsam, dass der Fehler meist nicht absichtlich ist. Niemand entwickelt ein Formular, um es unzugänglich zu machen. Es geschieht, weil ein Label visuell korrekt aussieht und der Entwickler davon ausgeht, dass damit alles erledigt ist, während die technische Verknüpfung ein separater Schritt ist, der leicht übersehen wird, besonders unter Zeitdruck oder bei einer Vorlage, die ursprünglich nicht mit Barrierefreiheit im Blick entwickelt wurde.
Warum dies schwerwiegender ist, als es scheint
Ein Formular ist oft der Punkt, an dem ein Besucher tatsächlich etwas regeln möchte: eine Bestellung abschließen, ein Konto erstellen, Kontakt aufnehmen. Wenn das Label genau in diesem Moment fehlt, stockt der Prozess für einen Teil Ihrer Besucher, während der Rest der Website einwandfrei funktioniert. Behörden und Prüfer schauen sich bei Formularen daher oft zuerst solche Engpässe an, da sie unmittelbar beeinflussen, ob jemand eine Dienstleistung in Anspruch nehmen kann.
Hinzu kommt, dass sich dieser Fehler leicht verbreitet. Ein Label ohne Verknüpfung in einer Vorlage für ein Adressfeld taucht oft auf Dutzenden von Seiten gleichzeitig auf, weil dieselbe Komponente überall wiederverwendet wird. Eine fehlende Verknüpfung in der Basis wirkt sich somit auf den gesamten Bestellvorgang oder den gesamten Anmeldebildschirm aus.
Wie Sie es testen und wo eine automatische Überprüfung an ihre Grenzen stößt
Eine automatische Überprüfung erkennt einen Teil dieser Fehler gut: Sie sieht, ob ein Label technisch mit einem Feld verknüpft ist und ob ein Eingabefeld überhaupt keinen Namen hat. Was eine Überprüfung schwerer beurteilt, ist, ob ein Label inhaltlich korrekt ist, ob ein Platzhalter als einzige Erklärung ausreichend deutlich ist und ob die Lesereihenfolge für einen Screenreader logisch wirkt. Genau deshalb erwähnen wir in jedem Bericht, was eine automatische Überprüfung leistet und nicht leistet; so wissen Sie, was noch manuell überprüft werden muss.
Wenn Sie selbst einen ersten Eindruck bekommen möchten, ist der einfachste Test, das Formular nur mit der Tastatur durchzulaufen und zu prüfen, ob jedes Feld einen klaren Namen erhält, wenn Sie darauf tabben. Für einen umfassenderen Überblick, einschließlich des Bestellvorgangs und der Anmeldeprozesse, hilft die vollständige Überprüfung, die über die Startseite hinausschaut um zu sehen, wo Labels fehlen oder von ihrem Feld getrennt sind.
Was ein Overlay-Widget hier nicht löst
Ein Barrierefreiheits-Widget, das über die Website gelegt wird, kann eine fehlende Verknüpfung zwischen einem Label und einem Feld nicht herstellen; diese Verknüpfung befindet sich im Quellcode selbst und muss dort geändert werden. Dies ist einer der Gründe, warum wir keine Overlays verkaufen: Sie verbergen solche Fehler vor dem Auge, aber ein Screenreader bemerkt nichts davon.
Die Lösung selbst ist meist begrenzt: Der Entwickler verknüpft das Label mit dem Feld, ersetzt einen Platzhalter-als-Label durch ein echtes Label oder fügt einem Symbol-Button unsichtbaren Text hinzu. Es ist keine große Überholung, aber es ist Arbeit, die gezielt erfolgen muss – pro Formular und pro Vorlage. Unter der Wissensdatenbank mit Erläuterungen pro Thema erfahren Sie, wie diese und ähnliche Fehler sich zu den Anforderungen aus EN 301 549 verhalten.
Nach der Behebung: Dokumentieren und überprüfen
Ein Label, das Sie jetzt reparieren, kann beim nächsten Update der Vorlage wieder verschwinden – zum Beispiel, wenn ein Designer das Formular neu gestaltet, ohne die Verknüpfung erneut zu überprüfen. Deshalb sollte eine Fehlerbehebung nicht nur technisch gelöst, sondern auch in Ihren Verbesserungsplan aufgenommen werden, um klarzumachen, wer verantwortlich ist und wann eine Überprüfung wiederholt wird. Wie wir diese Überprüfung und Wiederholung organisieren, wird erläutert auf der Seite darüber, wie die Bewertung zustande kommt.
Wenn Sie unsicher sind, ob Ihre eigenen Formulare diesen Fehler enthalten, ist das oft mit ein paar Minuten Tastaturnavigation zu sehen. Wenn Sie es strukturiert und mit einer priorisierten Liste wünschen, beginnen Sie mit der kostenlosen Quick-Scan oder schauen Sie sich zunächst an die häufig gestellten Fragen darüber, was ein Scan kontrolliert und was nicht.