Klare Formulare
Von zentraler Bedeutung für die Barrierefreiheit von Formularen ist deren Semantik.
Einsatz der standardisierten HTML-Steuerelemente:
Label für jedes Input vorsehen und verknüpfen.
<label for="vorname">Vorname:</label>
<input type="text" name="vorname" id="vorname" />
Visuell verborgenes Label
<label for="vorname" class="sr-only">Vorname</label>
<input type="text" id="vorname" />
<input type="text" id="vorname" aria-label="Vorname" />
Tastaturbedienung
Ein weiteres Kriterium für barrierefreie Formulare ist die Tastaturbedienbarkeit.
Tipps
- Informationen nicht nach dem Senden-Button platzieren. z.B. * Pflichtfelder
- sinnvolle Fehlermeldungen anbieten
- Fehler nicht ausschließlich Farbe anzeigen
- ausreichende Ausfüllzeit
- Korrekturmöglichkeit über Bestätigungsseite mit "zurück"-Button
Eine zusätzliche Inline-Validierung ist eine große Usability- und Accessibility-Verbesserung:
- Die Standard-Tastatursteuerung darf nicht verändert werden.
- Screenreader müssen Fehlermeldungen via aria-alive vorlesen können.