Barrierefreie Formulare

Labels setzen, hilfreiche Fehlermeldungen und Informationen richtig platzieren.

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
Zum Seitenanfang