WCAG-konformes Kontaktformular – Best Practices?
Hallo zusammen,
ich arbeite gerade an einem Formular in Contao 5.6 und möchte es im Auftrag unseres Kunden vollständig barrierefrei gestalten (WCAG 2.1 konform).
Aktuell funktioniert alles technisch, aber es gibt noch ein paar Stolpersteine hinsichtlich der Validierung und Barrierefreiheit, die ich gern verbessern möchte.
Umgesetz ist:
- Pflichtfelder sind korrekt markiert (*)
- Fehleranzeigen bei Pflichtfeldern
- Labels sind sauber mit Inputs via for/id verknüpft
- Fieldsets + Legends sind für Gruppen wie „Anrede“ oder „Wochentage“ vorhanden
- Hilfetexte werden via aria-describedby referenziert
- Fokus-Styling für Inputs ist vorhanden
Herausforderungen / offene Punkte:
- Bei Pflichtfeldern fehlt die dynamische Anzeige von Fehlern mit: aria-invalid="true"
- Fehlertext mit role="alert"
- Input aria-describedby erweitert um id="error_<feld>" Beispiel: E-Mail, Telefon, Name, Wochentage. Ohne diese Änderungen werden Screenreader-Nutzer nicht auf Eingabefehler hingewiesen.
- Eine Fehlerbox über dem Formular
- dynamische Fehlermeldung unter jedem Feld
- aria-live="assertive" für Fehlermeldungen
- Fokus auf die Fehlerbox nach dem Submit
Dazu meine Frage:
Ich möchte möglichst kein externes JS einbinden, sondern innerhalb des Contao-Formularsystems arbeiten. Gibt es bewährte Methoden oder Erweiterungen, die diese Anforderungen abdecken?
Ich freue mich über Tipps, Code-Beispiele oder Hinweise auf Erweiterungen, die die barrierefreie Validierung direkt unterstützen.
Vielen Dank schon mal!
