Klare Namen für Eingabefelder. Keine Browser-Meldungen wie "Bitte ausfüllen".
Ein barrierefreies Formular hat drei Merkmale. Jedes Eingabefeld hat einen sichtbaren Namen. Fehler sind als Text sichtbar. Fehler sind mit dem Feld verbunden. Screenreader lesen Feld und Fehler zusammen vor.
Die Richtlinien WCAG 3.3.1 und 3.3.3 sind Pflicht. Formulare sind oft der Grund für Barrieren. Standard-Meldungen von Browsern sind nicht für Blinde geeignet. Ersetze diese Meldungen.
Das erste Gespräch dauert 15 Minuten. Wir prüfen, ob unsere Hilfe passt. Weitere Infos: BFSG-Übersicht, Leistungs-Übersicht, BAFA-Förderung, häufige Fragen.
Barrierefreie Formulare
Klare Labels, programmatische Fehlerführung, Validierung — keine Browser-Bubbles, kein „Bitte ausfüllen".
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.
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.
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-describedbyverknü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-Modulsite-pages.js.
Verwandte Bausteine unserer Modulsuite
-
AAA-Kontraste, geprüft pro Komponente
WCAG 1.4.6≥ 7:1 für Text, ≥ 4,5:1 für große Schrift — geprüft pro Komponente, nicht pro Page-Stichprobe.
-
Leichte Sprache (KI-gestützt)
WCAG 3.1.5Inhalte auf Knopfdruck vereinfacht — für Menschen mit Lese-Einschränkungen, Sprachlerner und Eilige.
-
Kontrast-Scanner mit Auto-Audit
WCAG 1.4.3Laufende Kontrast-Prüfung im Backend — Regression wird gemeldet, bevor die Redaktion etwas merkt.
-
Heading-Hygiene & Struktur-Manager
WCAG 1.3.1Saubere Outline für Screenreader und Suchmaschinen — eine H1 pro Page, keine Sprünge.
Brauchen Sie genau dieses Modul?
15 Minuten Erstgespräch — wir klären, ob es für Ihre Site relevant ist.
Weiterführend:
BFSG-Übersicht ·
Leistungs-Übersicht ·
BAFA-Förderung ·
FAQs
