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.

[d.hupp]

ChatGPT meckert, dass aria-describedby nicht reicht, wenn der Fehler dynamisch angezeigt wird.

Problem:

<input type="email" aria-describedby="help_ctrl_131">
<p class="error">Bitte geben Sie eine gültige E-Mail-Adresse ein!</p>

aria-describedby

verweist nur auf den Hilfetext, nicht auf den Fehler.

Screenreader bekommen den Fehler nicht automatisch mit.

Lösung:

Fehler-ID hinzufügen und in aria-describedby aufnehmen

aria-invalid="true"

setzen

Fehlertext mit role="alert" versehen.

<input type="email" id="ctrl_131" aria-describedby="help_ctrl_131 error_ctrl_131" aria-invalid="true">
<p id="error_ctrl_131" class="error" role="alert">
  Bitte geben Sie eine gültige E-Mail-Adresse ein!
</p>
<p class="help" id="help_ctrl_131">Bitte geben Sie Ihre E-Mail-Adresse ein.</p>

Damit werden dann Pflichtfeld-Hilfetext und Fehlermeldung korrekt an Screenreader kommuniziert.

Hat das schon mal jemand umgesetzt?

[zoglo]

ChatGPT meckert

Lass ChatGPT meckern und halluzinieren.

Hast du weitere Quellen wie WCAG AA(A) Guidelines und Best practices?

[lbableck]

Da hat ChatGPT sogar mal recht https://www.w3.org/WAI/WCAG21/Techni...0data%20format

[Spooky]

ChatGPT meckert

Du musst das, was du brauchst und umsetzen musst selbst eruieren. Du kannst dich nicht auf zufällig erzeugte Wörter verlassen.

Problem:

<input type="email" aria-describedby="help_ctrl_131">
<p class="error">Bitte geben Sie eine gültige E-Mail-Adresse ein!</p>

aria-describedby

verweist nur auf den Hilfetext, nicht auf den Fehler.

Screenreader bekommen den Fehler nicht automatisch mit.

Ist vielleicht sinnvoll - aber du brauchst auch eine entsprechende Quelle dafür. Weil das was ich mich frage ist, ob es wirklich ok ist, wenn das aria-describedby des <input> mal dort hin und mal dorthin verweist.

Da hat ChatGPT sogar mal recht https://www.w3.org/WAI/WCAG21/Techni...0data%20format

Im WCAG Beispiel ist es klar - da gibt es halt das aria-describedby nur im Fehlerfall.

Hat das schon mal jemand umgesetzt?

Wie schon erwähnt sind das eher Dinge, die man im Core verbessern müsste. Wobei du für genau diesen Fall vielleicht mit Template Anpassungen auskommen könntest.

[lbableck]

Im WCAG Beispiel ist es klar - da gibt es halt das aria-describedby nur im Fehlerfall.

Ja stimmt, ein Beispiel mit beidem gibts wohl nicht. Aber wahrscheinlich sollen dann die IDs beider Elemente ins aria-describedby Attribut (Wie ChatGPT oben sogar schon geschrieben hat). Das erlaubt ja mehrere anzugeben.
Müsste man idealerweise dann auch mal mit Screenreadern testen, ob das auch funktioniert.

[Spooky]

@d.hupp du könntest das testen und dann entsprechend mit diesen Informationen das Issue bei GitHub anlegen.