Barrierefreie Formulare #

Diese Seite richtet sich an Site-Ersteller und Designer, die die Templates öffentlicher Formulare bauen. Ein Formular, das sich nicht mit Tastatur oder Screenreader ausfüllen lässt, schließt Menschen von einer öffentlichen Leistung aus. Die Formulare der Administration von Exponential wurden nach Kriterien der WCAG 2.2 AA gebaut und getestet (Beschriftungen, Fehlerzusammenfassungen, aria-invalid), mit dem Status Teilweise erfüllt; die öffentlichen Formular-Templates gehören zu Ihrem Design und sind nicht geprüft (Standards zur Barrierefreiheit). Die Muster der Administration sind ein gutes Vorbild.

Inhalt #

1. Die wichtigen Kriterien
2. Beschriftungen und Anleitungen
3. Fehler
4. Tastatur und Fokus
5. CAPTCHA und Barrierefreiheit
6. Ein Formular testen

Die wichtigen Kriterien #

Aus den WCAG 2.2:

Beschriftungen und Anleitungen #

Das View-Template des sammelnden Attributs erzeugt das Eingabefeld. Geben Sie in Ihrem Formular-Template jedem Eingabefeld eine sichtbare Beschriftung, die mit for und id daran gebunden ist; das mitgelieferte Template von ezwebin zeigt das Muster (Formulare mit dem Information Collector).

Fehler #

Schlägt die Prüfung fehl, zeigt Exponential das Formular erneut mit dem Prüfergebnis an (collectedinfo_validation.tpl im mitgelieferten Template). Gestalten Sie die Meldung so, dass sie:

• oben als Zusammenfassung erscheint, die auf jedes Feld verlinkt, und den Fokus erhält;
• neben jedem Feld erscheint, mit aria-describedby gebunden, mit aria-invalid="true" am Feld;
• sagt, wie der Fehler zu beheben ist („Geben Sie eine E-Mail-Adresse wie [email protected] ein“).

Das Design admin4 tut genau das für seine eigenen Formulare (tests/tests/design/AdminFormErrorsTest.php sichert es ab), seine Templates sind also eine funktionierende Referenz.

Tastatur und Fokus #

• Das Formular lässt sich mit Tab, Umschalt+Tab, Leertaste und Eingabetaste ausfüllen und senden.
• Der Fokus ist immer sichtbar.
• Kein Zeitlimit, oder eine Möglichkeit, es zu verlängern; ein abgelaufenes Formular-Token zeigt eine Seite, die sagt, dass nichts gespeichert wurde und wie man es erneut versucht (CSRF-Formular-Token).

CAPTCHA und Barrierefreiheit #

Visuelle Rätsel schließen Menschen aus. Wenn Sie ein CAPTCHA verwenden (Spamschutz und Drittanbieter), wählen Sie einen Modus mit einer barrierefreien Alternative und bieten Sie einen anderen Kanal an (Telefon, E-Mail). Für öffentliche Formulare mit geringem Aufkommen genügt oft das Formular-Token plus ein einfaches Honeypot-Feld in Ihrem Template.

Ein Formular testen #

• To do: Füllen Sie es nur mit der Tastatur aus und senden Sie es.
• To do: Füllen Sie es mit einem Screenreader aus: Jedes Feld kündigt seine Beschriftung, Anleitung und den Pflichtstatus an.
• To do: Senden Sie es leer: Die Fehlerzusammenfassung wird angekündigt und verlinkt auf die Felder.
• To do: Zoomen Sie auf 200 % und verwenden Sie ein 320 px breites Fenster: Nichts wird abgeschnitten.
• To do: Führen Sie als ersten Durchgang eine automatische Prüfung aus (Barrierefreiheit testen).

Verwandte Seiten #

• Formulare aufbauen
• Grundlagen des Information Collectors
• Barrierefreiheit für Site-Ersteller
• Freie Dokumentation: Diese Seite darf unter der GNU FDL 1.3 frei kopiert, übersetzt und verbessert werden.