Was es ist
Ein korrekt kodiertes Label ist ein Text, der im zugrunde liegenden Code einer Seite explizit mit einem bestimmten Formularfeld verknüpft ist – üblicherweise über ein for-Attribut, das mit der id des Feldes übereinstimmt. So liest ein Screenreader dieses Label vor, sobald ein Besucher in das Feld springt, etwa „E-Mail-Adresse, Eingabefeld". Das ist eine strengere, technischere Anforderung, als nur irgendwo in der Nähe des Feldes label-ähnlichen Text sichtbar zu haben – diesen Aspekt behandeln wir in unserem allgemeinen Ratgeber zu Formularlabels mit Fokus auf Conversion.
Ein Feld kann für einen sehenden Besucher völlig korrekt beschriftet aussehen (Text direkt neben dem Feld), während im Code überhaupt keine echte Verbindung zwischen diesem Text und dem Feld besteht – genau diese Lücke sucht diese Barrierefreiheits-Prüfung.
Warum es wichtig ist
Ein Screenreader sieht das visuelle Layout einer Seite nicht – er liest die zugrunde liegende Codestruktur. Ein Label, das nur optisch neben einem Feld steht, aber nicht explizit im Code damit verknüpft ist, wird möglicherweise nie vorgelesen, wenn ein Screenreader-Nutzer dieses Feld erreicht. Ohne zu hören, wofür ein Feld gedacht ist, bleibt nur Raten oder Überspringen – das kann dazu führen, dass ein Screenreader-Nutzer ein Formular schlicht nicht ausfüllen kann, das für einen sehenden Besucher völlig selbstverständlich ist.
Das ist eine der am klarsten definierten Anforderungen in WCAG (den Standard-Richtlinien für Barrierefreiheit, die viele Organisationen gesetzlich erfüllen müssen) – gerade weil Formulare so zentral dafür sind, im Web überhaupt etwas zu erledigen: sich anmelden, bestellen, Kontakt aufnehmen.
So behebst du es
- Füge für jedes Formularfeld ein
<label>-Element mit einemfor-Attribut hinzu, das exakt mit deriddieses Feldes übereinstimmt. - Alternativ kannst du das Feld direkt in das
<label>-Tag einpacken – das erzeugt dieselbe explizite Verbindung, ohne dass die IDs übereinstimmen müssen. - Hat ein Feld absichtlich kein sichtbares Label (z. B. ein Suchfeld nur mit Lupensymbol), nutze
aria-label="Suchen"direkt am Feld, damit ein Screenreader trotzdem dessen Zweck ansagt. - Verlasse dich nicht allein auf Platzhaltertext als Ersatz für ein echtes Label – Screenreader behandeln Platzhaltertext uneinheitlich, und er verschwindet sowieso, sobald Text eingegeben wird.
- Teste, indem du dein Formular nur mit der Tastatur und einem kostenlosen Screenreader (NVDA, VoiceOver) durchtabst, um zu prüfen, ob jedes Feld einen klaren Zweck ansagt.