Formular-Labels: Pflicht für jedes Eingabefeld

Formulare sind Conversion-kritische Elemente: Kontakt, Checkout, Login, Newsletter. Wenn sie nicht barrierefrei sind, verlierst du nicht nur sehbehinderte Nutzer, sondern haftest auch juristisch. Die häufigste Falle: Placeholder-Text wird fälschlich als Label missverstanden.

Die drei richtigen Wege

1. (Best Practice):
<label for="email">E-Mail-Adresse</label>
<input id="email" type="email">

2. umschließt Input:
<label>E-Mail-Adresse <input type="email"></label>

3. aria-label (wenn visuell kein Label möglich):
<input type="search" aria-label="Produkt-Suche">

Warum Placeholder keine Labels sind

Placeholder-Text verschwindet, sobald der Nutzer tippt – ist also im Moment der Eingabe weg. Screenreader-Nutzer hören ihn nicht zuverlässig. Menschen mit Gedächtnisproblemen vergessen, was sie eingeben sollten. WCAG 1.3.1 verlangt programmatische Verbindung – Placeholder ist nur visuell. Regel: Placeholder optional als Hinweis, aber nie alleinig.

Pflichtfelder markieren

WCAG 1.4.1 Use of Color: Pflichtfelder nicht nur farblich (Sternchen in rot) sondern auch textlich markieren. Best Practice: <label>E-Mail *</label> oder "(Pflichtfeld)" ausgeschrieben. Auf Formular-Kopf: "Pflichtfelder sind mit * markiert."

Fehlerhinweise barrierefrei

Fehler nicht nur visuell anzeigen (roter Rahmen). Nutze:
- aria-invalid="true" am Feld
- aria-describedby verweist auf Fehlermeldung
- Fehlermeldung mit Text: "E-Mail-Format ungültig, bitte korrigieren"
- Fokus nach Fehler zum ersten fehlerhaften Feld setzen
- Zusammenfassung oben: "3 Felder haben Fehler (Links anklickbar)"

Autocomplete und Input-Types

WCAG 1.3.5 Identify Input Purpose: nutze autocomplete-Attribute. Beispiele: autocomplete="email", autocomplete="given-name", autocomplete="postal-code". Zusätzlich input-type korrekt: type="email", type="tel", type="url", type="date". Vorteil: bessere Tastatur auf Mobilgeräten, Browser-Autofill, Screenreader-Unterstützung.