Tutorial
So beschriftest du Formularfelder richtig
Kurz gesagt
Jedes Eingabefeld braucht ein sichtbares <label>, das per for-Attribut mit der id des Feldes verbunden ist. Ein Placeholder ersetzt kein Label: Er verschwindet beim Tippen und wird nicht zuverlässig als Name angesagt. Pflichtangaben und Hinweise gehören zusätzlich in den Text und per required bzw. aria-describedby an das Feld.
In Kürze
Label mit dem Feld verbinden
Gib jedem Feld eine id und verbinde ein <label> per for-Attribut mit dieser id.
Placeholder nicht als Label nutzen
Der Placeholder darf nur ein Beispiel zeigen, nie die einzige Beschriftung sein.
Pflichtfelder kennzeichnen
Nenne die Pflicht im sichtbaren Label und setze zusätzlich das required-Attribut.
Hinweise anbinden
Verknüpfe Format- oder Hilfetexte per aria-describedby mit dem Feld.
Fehlende oder nicht verbundene Labels sind einer der häufigsten Befunde in automatischen Scans, weil sie mehrere Erfolgskriterien gleichzeitig verletzen. Ein Screenreader liest ein Feld ohne Label nur als "Eingabefeld" vor: Der Nutzer weiss nicht, was er eintragen soll.
Das Problem: Placeholder statt Label
<!-- Placeholder statt Label: verschwindet beim Tippen, oft zu kontrastarm,
kein zuverlaessiger Name fuer Screenreader -->
<input type="email" placeholder="E-Mail-Adresse" />
<!-- Sichtbarer Text, aber nicht mit dem Feld verbunden -->
<span>Telefon</span>
<input type="tel" />- Der Placeholder verschwindet, sobald man tippt: Die Beschriftung ist weg.
- Placeholder-Text ist oft zu kontrastarm (siehe 1.4.3 Kontrast).
- Sichtbarer Text neben dem Feld ohne for/id-Verbindung wird nicht als Name angesagt (1.3.1 / 4.1.2).
- Ein Klick auf die Beschriftung fokussiert das Feld nicht.
Die Lösung: echtes Label plus Anbindung
Das for-Attribut des Labels zeigt auf die id des Feldes. Damit ist die Beziehung programmatisch bestimmt (1.3.1), das Feld hat einen Namen (4.1.2), und ein Klick auf das Label fokussiert das Feld. Der sichtbare Labeltext sollte im zugänglichen Namen enthalten sein (2.5.3 Label in Name), was bei dieser Technik automatisch der Fall ist.
<label for="email">E-Mail-Adresse</label>
<input id="email" type="email" name="email" autocomplete="email" />
<!-- Pflichtfeld sichtbar UND programmatisch kennzeichnen -->
<label for="phone">Telefon (Pflichtfeld)</label>
<input id="phone" type="tel" name="phone" autocomplete="tel" required />
<!-- Zusatzhinweis mit aria-describedby anbinden -->
<label for="pw">Passwort</label>
<input id="pw" type="password" aria-describedby="pw-hint" />
<p id="pw-hint">Mindestens 12 Zeichen.</p>Pflichtfelder und Hinweise
- Pflicht: nenne sie im sichtbaren Label (nicht nur per Sternchen-Farbe) und setze required, damit auch die Software es kennt (3.3.2).
- Format-Hinweise: binde sie per aria-describedby an, damit der Screenreader sie zusammen mit dem Feld vorliest.
- Autocomplete: setze passende autocomplete-Werte (email, tel, name): hilft allen und erfüllt 1.3.5 Identify Input Purpose.
Ein rein visuell markiertes Pflichtfeld (nur roter Stern) reicht nicht: Die Information muss auch im Text und im Code stehen. Bei Fehlern gilt dasselbe, siehe unser separates Vorgehen zur Fehler-Identifikation (3.3.1).
Zugehörige WCAG-Kriterien
Häufige Fragen
- Reicht aria-label statt eines sichtbaren Labels?
- Nur wenn wirklich kein sichtbares Label möglich ist (z. B. ein Suchfeld mit Lupensymbol). Sichtbare Labels helfen allen, nicht nur Screenreader-Nutzern. Wenn ein sichtbares Label existiert, muss dessen Text im zugänglichen Namen enthalten sein (2.5.3).
- Ist ein Placeholder verboten?
- Nein. Er darf als zusätzliches Beispiel dienen (z. B. "name@firma.de"), aber nie die einzige Beschriftung sein. Label und Placeholder ergänzen sich.
- Wie kennzeichne ich ein Pflichtfeld barrierefrei?
- Schreibe die Pflicht in den Labeltext (z. B. "(Pflichtfeld)") und setze das required-Attribut. Verlasse dich nicht allein auf Farbe oder ein Sternchen ohne Erklärung.
Kostenlosen Scan anfragen
Sagen Sie uns Ihre Domain — wir führen einen kostenlosen Erst-Scan durch und zeigen Ihnen die wichtigsten Barrieren.