Zum Inhalt springen

WCAG 3.3.1 · WCAG-Modul

Barrierefreie Formulare

Klare Labels, programmatische Fehlerführung, Validierung — keine Browser-Bubbles, kein „Bitte ausfüllen".

Was ist das?

Was bedeutet „Barrierefreie Formulare"?

Ein barrierefreies Formular zeichnet sich durch drei Eigenschaften aus: (1) jedes Feld hat ein sichtbares, programmatisch zugeordnetes <label>; (2) Fehlermeldungen erscheinen als Text in Klartext, nicht als Browser-Bubble; (3) Fehler werden mit dem Feld verknüpft (aria-describedby, aria-invalid), sodass Screenreader Feld + Fehler in einem Atemzug ansagen.

Warum wichtig?

Pflicht und Nutzen — WCAG 3.3.1.

WCAG 3.3.1 (Error Identification) + 3.3.3 (Error Suggestion) sind Level-A-/AA-Pflicht. Formulare sind die häufigste Conversion-Stelle und gleichzeitig die häufigste Stelle, an der Barrierefreiheit scheitert. Browser-Standard-Tooltips („Bitte E-Mail-Adresse ausfüllen") sind weder semantisch noch screenreader-tauglich — man muss sie ersetzen.

Unsere Umsetzung

Wie wir es konkret lösen.

  • Jedes Feld: <label for="…"> sichtbar, nicht nur Placeholder.
  • Native Validierung mit invalid-Event abgefangen, eigene Inline-Meldung im <span class="field-error">.
  • aria-describedby verknüpft Feld mit Fehler-Span, aria-invalid="true" setzt den Status.
  • Klare Hilfetexte vor Eingabe — keine Surprises („Telefon mit Vorwahl, ohne Leerzeichen").
  • Submit-Button per Tastatur erreichbar; bei Fehler Fokus auf erstes ungültiges Feld.
  • Im DigElite-Plugin live: SP_Anfragen-Formular + JS-Modul site-pages.js.
Weitere WCAG-Module

Verwandte Bausteine unserer Modulsuite

Alle Module in der BFSG-Übersicht →

Brauchen Sie genau dieses Modul?

15 Minuten Erstgespräch — wir klären, ob es für Ihre Site relevant ist.

Erstgespräch buchen

Weiterführend:
BFSG-Übersicht ·
Leistungs-Übersicht ·
BAFA-Förderung ·
FAQs

Leichte Sprache