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.
Accessible forms
Clear labels, programmatic error handling, validation — no browser bubbles, no „please fill in".
What does "accessible forms" mean?
An accessible form is characterized by three properties: (1) each field has a visible, programmatically assigned ; (2) Error messages appear as plain text, not as a browser bubble; (3) Errors are linked to the field (aria-describedby, aria-invalid), so that the screen reader can announce the field and error in one breath.
Obligation and Benefit — WCAG 3.3.1.
WCAG 3.3.1 (Error Identification) + 3.3.3 (Error Suggestion) Level A/AA accessibility is mandatory. Forms are the most frequent conversion point and, at the same time, the most frequent point where accessibility fails. Standard browser tooltips ("Please fill in your email address") are neither semantic nor screen reader-compatible—they must be replaced.
How we will solve it specifically.
- Each field:
Visible, not just placeholders. - Native validation with
invalid-Event intercepted, own inline message in<span class="field-error">. aria-describedbylinked field with error span,aria-invalid="true""sets the status.- Clear help texts before input — no surprises („phone with area code, without spaces").
- Submit button accessible via keyboard; in case of error, focus on the first invalid field.
- Live in the DigElite plugin:
SP_Requests-Form + JS modulesite-pages.js.
Related building blocks of our module suite
-
AAA contrasts, tested per component
WCAG 1.4.6≥ 7:1 for text, ≥ 4.5:1 for large font — tested per component, not per page sample.
-
Plain language (AI-supported)
WCAG 3.1.5Content simplified at the touch of a button — for people with reading difficulties, language learners and those in a hurry.
-
Contrast scanner with auto-audit
WCAG 1.4.3Ongoing contrast checking in the backend — regression is reported before the editorial team notices anything.
-
Heading Hygiene & Structure Manager
WCAG 1.3.1Clean outline for screen readers and search engines — one H1 per page, no jumps.
Do you need this exact module?
15-minute initial consultation — we'll clarify whether it's relevant for your site.
Further information:
BFSG overview ·
Performance overview ·
BAFA funding ·
FAQs
