WCAG-konformes Kontaktformular – Best Practices?

[d.hupp]

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!

[Spooky]

Herausforderungen / offene Punkte:

• Bei Pflichtfeldern fehlt die dynamische Anzeige von Fehlern mit: aria-invalid="true"
• Fehlertext mit role="alert"
• Eine Fehlerbox über dem Formular
• dynamische Fehlermeldung unter jedem Feld
• aria-live="assertive" für Fehlermeldungen
• Fokus auf die Fehlerbox nach dem Submit

Poste diese Dinge als Issue auf GitHub, am besten mit Quellenangabe.

[Spooky]

Herausforderungen / offene Punkte:

• Input aria-describedby erweitert um id="error_<feld>" Beispiel: E-Mail, Telefon, Name, Wochentage. Ohne diese Änderungen werden Screenreader-Nutzer nicht auf Eingabefehler hingewiesen.

Was genau meinst du hier? aria-describedby existiert ja schon.