Formularfelder barrierefrei beschriften: Label statt Placeholder

Warum das wichtig ist

Ein Screenreader liest bei einem Feld vor, was mit ihm verknüpft ist. Ohne Verknüpfung bleibt nur "Eingabefeld, bearbeitbar". Bei einem Kontaktformular mit fünf solchen Feldern weiß ein blinder Besucher nicht, wo der Name hinkommt und wo die Telefonnummer. Er bricht ab, und du merkst davon nichts außer weniger Anfragen.

Ein verknüpftes Label lässt sich anklicken und setzt dann den Fokus ins Feld, das hilft bei winzigen Checkboxen und unruhigen Händen. Sprachsteuerung braucht den Namen, um ein Feld anzusprechen. Und wer beim Ausfüllen kurz abgelenkt war, sieht im Placeholder-Formular nach dem Tippen nicht mehr, was in welches Feld gehörte.

Die WCAG regeln das vor allem in den Erfolgskriterien 3.3.2 Beschriftungen oder Anweisungen und 4.1.2 Name, Rolle, Wert. Beide gehören zur Stufe A und damit zu jeder Prüfung auf Stufe AA nach EN 301 549.

So prüfst du es selbst

Der einfachste Test: Klick auf den sichtbaren Text neben einem Feld. Springt der Cursor ins Feld, ist das Label verknüpft. Passiert nichts, steht dort nur Text ohne Verbindung.

Genauer geht es in den Entwicklertools. Chrome und Firefox haben einen Bereich für Barrierefreiheit, der zu jedem markierten Element den berechneten Namen zeigt. Ist er leer oder besteht er nur aus dem Placeholder, fehlt das Label.

checkfrei prüft jedes Eingabefeld auf ein <label>, ein aria-label oder ein aria-labelledby. Ein unbeschriftetes Feld gibt eine Warnung, ab drei ist es ein Fehler. Ein Placeholder zählt bei uns bewusst nicht als Beschriftung. Den kostenlosen Check kannst du jederzeit laufen lassen.

So behebst du es

Am robustesten ist immer ein sichtbares Label, das über for und id mit dem Feld verbunden ist. Ein aria-label ist der Notnagel, wenn wirklich kein Text hinpasst und der Zweck optisch eindeutig ist.

<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" name="email" autocomplete="email" required>

<!-- Suchfeld: Label nur visuell versteckt -->
<label for="suche" class="visually-hidden">Seite durchsuchen</label>
<input type="search" id="suche" name="q">
<button type="submit">Suchen</button>

<label for="cf-name">Dein Name</label>
[text* your-name id:cf-name autocomplete:name]

Label nur visuell verstecken

Manchmal passt ein sichtbarer Text wirklich nicht ins Design. Dann versteckst du das Label nur optisch. display: none und visibility: hidden sind dafür ungeeignet, weil sie das Label auch vor dem Screenreader verbergen. Die folgende Klasse ist seit Jahren erprobt. In WordPress-Themes heißt sie meist screen-reader-text.

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Typische Fehler

• ·Nur Placeholder, kein Label. Sieht aufgeräumt aus, ist nach dem ersten Buchstaben weg und hat oft zu wenig Kontrast.
• ·Ein Label ohne Verbindung: <label>Name</label> steht neben dem Feld, aber ohne for oder ohne passende id.
• ·Checkboxen für Datenschutz und Newsletter ohne eigenes Label. Gerade dort, wo jemand bewusst zustimmen soll, muss klar sein, wozu.
• ·Pflichtfelder, die nur rot oder mit einem Sternchen markiert sind. Schreib "Pflichtfeld" ins Label oder erklär das Sternchen einmal über dem Formular, und setz zusätzlich das Attribut required.