HTML/Tutorials/Formulare/Benutzereingaben zugänglich gestalten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Gerade bei Benutzereingaben in Formularen ist es wichtig, dass diese nach den Grundsätzen der usability (Benutzerfreundlichkeit) und accessibility Barrierefreiheit für alle verständlich und zugänglich sind.

Dieser Artikel behandelt die Grundsätze; weitere Beispiele aus der Praxis erhalten Sie im Kurs:

benutzerfreundliche Struktur

Wenn schreibende Interaktion über Formulare stattfindet, sollte

  • der Zweck jedes Formularelements deutlich sein
  • Pflichtfelder klar gekennzeichnet sein
  • eine Eingabe schon vor dem Absenden überprüft werden
    • valide Eingaben können mit der Pseudoklasse :valid per CSS gekennzeichnet werden
  • eine Vorschau, bzw. Kontrollausgabe angezeigt werden
  • Ein Anwender ist über die Folgen einer Formularabsendung richtig zu informieren.
    • Bei Formularmailern sollte ihm eine archivierbare Version ausgehändigt werden können.
    • Bei Formulareingaben, welche Daten dauerhaft nicht wieder editierbar speichern, sollte immer eine Vorschau verfügbar sein.

Beschriftungen

Damit der Benutzer überhaupt weiß, was er eingeben soll, sind Beschriftungen und weitergehende sinnvoll. Beschriftungen von Formularfeldern sollten immer sichtbar sein und mit den Formularfeldern mittels label-Element und einem for-Attribut logisch verknüpft werden.

Weitergehende Erklärungen, die nichts mit dem Ausfüllen des Formulars zu tun haben, stören die Übersichtlichkeit und sollten daher an anderer Stelle platziert und durch einen Link erreichbar sein.

Hauptartikel: HTML/Tutorials/Formulare/Beschriftungen

Tool-Tipps

Häufig sieht man kleine Info-Icons, die beim Klick einen Tooltip öffnen. Allerdings hat diese Methode gravierende Nachteile, denn Tooltips werden von Screenreadern nicht vorgelesen, da sie mit dem Formularfeld nicht verknüpft sind.

Hauptartikel: Infobox/Tooltips mit title#Tooltipp, Touch und Zugänglichkeit

Focus und Tabs

Alle Bedienelemente (z. B. Links und Formularelemente) sollten durch die TAB-Taste ( ) erreichbar sein. Dabei können Sie mit dem tabindex-Universalattribut eine Reihenfolge festlegen. Allerdings sollten Sie nur vorsichtig mit dieser Möglichkeit umgehen, da eine Abweichung von der auf der Seite vorgegebenen Struktur nur zur Verwirrung des Benutzers führen würde.

Empfehlung: Im Standardverhalten der Browser ist festgelegt, dass Eingabelemente, die den Fokus haben, besonders gekennzeichnet sind. Entfernen Sie diese Formatierung nicht. Wenn Sie wünschen, können Sie sie noch stärker betonen.
Hauptartikel: CSS/Tutorials/Selektoren/Pseudoklasse

Tastatur-Shortcuts

Von Tastatatur-Shortcuts ist generell abzuraten, weil es keine Kombinationen gibt, die auf allen Systemen funktionieren und nicht mit Shortcuts von anderen Programmen (z. B. Screenreader) oder den diversen Betriebssystemen kollidieren. Sollten Sie sich entgegen dieser Empfehlung für die Verwendung von Tastatur-Shortcuts entscheiden, beachten Sie unbedingt die Konventionen und vor allem die unterschiedlichen Implementierungen und Konflikte! – Niemand wird nur auf Ihrer Website existierende Shortcuts lernen wollen.[1]
Tastatur-Shortcuts können entgegen der generellen Empfehlung zur Vermeidung in konkreten Projekten aber eine große Hilfe sein. So helfen Sie eingebenden Personen beispielsweise bei der massenhaften Erfassung von strukturierten Daten und sind dann – nicht nur für Menschen mit Behinderung – eine Arbeitserleichterung; hier kann es Sinn machen, auch schwer merkbare Tastatur-Shortcuts zu lernen, die auf dem eingesetzten System funktionieren.

Captchas

Captchas sind ein Beispiel dafür, wie Barrierefreiheit per Design an eine Grenze stößt. Barrierefreiheit bedeutet, dass eine Seite für einen Bot genauso erreichbar ist wie für einen menschlichen Benutzer. Da dies aber, besonders bei der Einrichtung von Mail-Accounts, zu Missbrauch verleitet, setzen größere Portale hier Captchas ein. Captchas beruhen normalerweise auf einem Bild, dessen Textgehalt es zu entziffern gilt. Hierbei wird die Regel, dass jeder Bildinhalt ein Textäquivalent enthalten solle, bewusst missachtet. Damit Zugänglichkeit dennoch für menschliche Benutzer gewährleistet ist, braucht es Alternativen zu Bildcaptchas. Hierbei werden meistens Audio-Captchas eingesetzt.

Empfehlung:
  • Setzen Sie Captchas nur dann ein, wenn der Service und das Missbrauchspotential dies verlangen.
  • Setzen Sie nur Captchas ein, die bezüglich Barrierefreiheit eine gute Note erhielten.

Quellen

  1. webaim.org: Keyboard Accessibility