Beschriftungen oder Anweisungen

Was gefordert wird

Wenn Nutzereingaben erwartet werden — in einem Textfeld, einem Kontrollkästchen, einem Optionsfeld, einem Auswahlmenü, einem Datumsfeld oder einem Datei-Upload — muss eine Beschriftung oder Anweisung vorhanden sein, die erklärt, was erwartet wird. Die Beschriftung kann sichtbarer Text, ein <label>-Element, ein aria-label oder aria-labelledby sein; Anweisungen können das erforderliche Format, erlaubte Werte oder Beispiele umfassen.

Pflichtfelder, erwartete Formate (z. B. „TT.MM.JJJJ“) und besondere Einschränkungen (z. B. „mindestens 8 Zeichen, Groß- und Kleinschreibung gemischt“) fallen alle unter dieses Erfolgskriterium.

Wie die Anforderung erfüllt wird

• Jedes <input>-, <textarea>- und <select>-Element wird mit einem <label for="…"> verknüpft, dessen for-Attribut mit der id des Eingabefeldes übereinstimmt.
• Platzhaltertext darf nicht die einzige Beschriftung sein — Platzhalter verschwinden beim Fokus und haben in der Regel schlechten Kontrast.
• Pflichtfelder werden sichtbar gekennzeichnet (Sternchen, das Wort „Pflichtfeld“ oder aria-required="true"), und die verwendete Konvention wird am Anfang des Formulars erläutert.
• Das erwartete Format wird im Voraus angegeben, nicht erst nach einem Fehler: „Datum (TT.MM.JJJJ)“ oder „Telefonnummer, z. B. 030-123456.“
• Gruppen von Kontrollkästchen oder Optionsfeldern werden mit <fieldset> und <legend> als Gruppe beschriftet.
• Symboleingaben oder Filter-Leisten erhalten ein aria-label mit aussagekräftigem Namen.

Häufige Fehler

• Formulare, bei denen Platzhaltertext die einzige Beschriftung ist und in dem Moment verschwindet, in dem der Nutzer zu tippen beginnt.
• Pflichtfelder, die nur mit roten Sternchen markiert sind, ohne programmatische Verknüpfung.
• Geburtsdatumseingaben, die ein bestimmtes Format erwarten und den Nutzer erst nach einem Validierungsfehler darüber informieren.
• Sucheingaben, die nur durch ein Lupensymbol beschriftet sind und keinen zugänglichen Namen haben.
• Anmeldeformulare, bei denen Nutzername- und Passwortfelder visuell neben Beschriftungen positioniert sind, diese aber nicht programmatisch verknüpft sind.

Warum das wichtig ist

Formulare sind der Ort, an dem die meisten Nutzer eine Website aktiv nutzen — zum Registrieren, Kaufen, Kontaktieren, Anfragen oder Buchen. Fehlende oder unzureichende Beschriftungen schließen Screenreader-Nutzer vollständig aus, da sie nicht erkennen können, welche Daten in ein Feld eingetragen werden sollen. Auch Nutzer mit Legasthenie sind betroffen: Sobald ein Platzhalter verschwindet, fehlt ihnen der Kontext. Menschen mit kognitiven Beeinträchtigungen profitieren davon, das erwartete Format von Anfang an zu sehen.

Beschriftungen sind außerdem funktional notwendig für Passwortmanager, Autofill und Spracheingabe-Software, die alle auf Beschriftungstext zurückgreifen, um Felder zuzuordnen. Ein gut beschriftetes Formular nützt allen.