Formular-Labels sind sichtbare Beschriftungen, die jedem Eingabefeld einen klaren Namen geben. Sie müssen technisch mit dem Feld verbunden sein, damit Hilfsmittel wie Screenreader sie korrekt zuordnen. Das fordern die WCAG-Erfolgskriterien 3.3.2 Beschriftungen oder Anweisungen (Stufe A), 1.3.1 Info und Beziehungen (A) und 4.1.2 Name, Rolle, Wert (A).
Warum Labels nicht optional sind
Ein Platzhaltertext im Feld reicht nicht. Er verschwindet beim Tippen und wird von vielen Screenreadern nicht als Beschriftung gewertet. Fehlt ein echtes Label, hört eine blinde Nutzerin nur „Eingabefeld“ und weiß nicht, was hineingehört. Auch Menschen mit kognitiven Einschränkungen profitieren von dauerhaft sichtbaren Beschriftungen.
So verknüpfst du Labels korrekt
- Nutze das
<label>-Element mitfor, das auf dieiddes Feldes zeigt. - Alternativ kannst du das Feld in das Label einbetten.
- Pflichtfelder klar kennzeichnen, nicht nur über Farbe.
- Bei reinen Icon-Feldern hilft ein aria-label, wenn kein sichtbares Label möglich ist.
Ein korrektes Label trägt zum Accessible Name des Feldes bei. Eng verbunden ist die Fehleridentifikation: Tritt ein Fehler auf, muss klar sein, welches beschriftete Feld betroffen ist. Labels gehören außerdem zum semantischen HTML und zum POUR-Prinzip der Verständlichkeit.
In WordPress liefern viele Formular-Plugins Labels automatisch, doch nicht immer korrekt verknüpft. Prüfe bei Contact Form 7 oder Gravity Forms, ob jedes Feld ein echtes Label mit passendem for-Attribut hat.