15.2.3 Achten Sie insbesondere bei der Formulargestaltung auf Webstandards und barrierefreie Umsetzung

Hintergrund

Die Einhaltung von Webstandards und insbesondere den Techniken zur Barrierefreiheit – laut WCAG 2.0 – sind für eine möglichst einfache und fehlerfreie Bedienung essentiell.Gerade Menschen mit Behinderungen müssen sich hier auf eine korrekte Umsetzung verlassen können, damit z.B. Formularbeschriftungen korrekt zugeordnet werden können (LABELS) und die notwendigen Prozessschritte auch durchlaufen werden können (Erreichbarkeit und Beschriftung von Buttons).

Maßnahmen

  • Versehen Sie Formularfelder mit LABELs und ggf. bei komplexeren Formularen mit FIELDSET und LEGEND.
  • Vermeiden Sie die Verwendung von TABINDEX und Access-Keys.
  • Beachten Sie, dass im Formular-Modus von Screenreadern und bei Navigation mit der Tabulatortaste nur fokussierbare Elemente vorgelesen werden.
  • Bei Gruppen von Radiobuttons oder Checkboxen soll die zugehörige „Headline“ als LEGEND markiert werden, wenn der Kontext aus den LABELS allein nicht klar wird. Da LEGEND aber bei jedem Formularelement wieder mitvorgelesen wird, soll sie so kurz wie möglich sein. Prüfen Sie die Sinnhaftigkeit von Beschriftungen, indem Sie diese einfach laut vorlesen.
  • Verstecken Sie LABELs für Screenreader NutzerInnen, die optisch stören, nötigenfalls außerhalb des Viewports oder verwenden Sie das TITLE-Attribut, das bei fehlendem LABEL vorgelesen wird.
  • Vermeiden Sie, wenn möglich, Tabellenkonstruktionen – außer bei der Eingabe tabellarischer Daten.
  • Achten Sie darauf, dass Formulare auch gezoomt gut lesbar sind (z.B. LABEL rechtsbündig oder oberhalb des Eingabefelds).
  • Machen Sie JavaScript gesteuerte Formulare tastaturbedienbar.
  • Wenn Formularteile mit JavaScript Schritt für Schritt eingeblendet werden, ist besonderes Augenmerk auf die Zugänglichkeit aller Formularteile mit Screenreadern zu achten.Versteckte Elemente sollen auch für Screenreader zuerst unsichtbar und erst bei Anwahl verfügbar sein.
  • Achten Sie dass es bei Tastaturbedienung nicht zum versehentlichen Absenden des Formulars kommt. Insbesondere der onChange Event in Zusammenhang mit Select-Boxes kann leicht zu Lösungen führen, die mit der Tastatur nicht mehr bedienbar sind. Testen Sie solche Lösungen auch in unterschiedlichen Browsern.

Wer profitiert davon

  • Ältere NutzerInnen
  • Wenig interneterfahrene NutzerInnen
  • Blinde NutzerInnen
  • Sehbehinderte NutzerInnen
  • NutzerInnen mit kognitiven Einschränkungen
  • TastaturbenutzerInnen
  • Alle NutzerInnen von assistiven Technologien

Beispiel

Hausfreund Formularproblem Email mit Leerzeichen

hausfreund.at: Das Formular zum Eintragen der Lieferadresse ist grundsätzlich semantisch und optisch gut gestaltet. Da sich unerfahrene KäuferInnen leichter vertippen, ist eine gute Fehlerbehandlung essentiell.