Widgets mit ARIA zeigen Lücken bei der Touchbedienung

25. April 2017

Widgets mit ARIA zeigen Lücken bei der Touchbedienung

Viele moderne Websites nutzen selbstgestaltete Bedienelemente, auch Widgets genannt – teilweise, weil Elemente, etwa Dialoge, nicht im HTML-Standard selbst vorhanden sind, teilweise, weil sich selbstgebaute Elemente besser individuell gestalten  – im Fachjargon "stylen" – lassen. Auf Touchscreens lassen sich solche Widgets aber oft nicht (oder nur unvollständig) bedienen.

Web-Designer, die HTML-eigene (sogenannte "native") Elemente wie Radio-Buttons, Checkboxen oder Auswahlmenüs benutzen, haben wenig Kontrolle darüber, wie diese Elemente vom Browser dargestellt werden. Verschiedene Plattformen und Browser bieten jeweils eigene graphische Darstellung dieser Elemente.

Kein Wunder also, dass Web-Designer häufig zu selbstgestalteten Elementen greifen. Das kann auch durchaus Vorteile für Menschen mit Sehbehinderung haben. So kann zum Beispiel eine selbstgestaltete Checkbox deutlich größer sein und klarer anzeigen, wann sie fokussiert ist.

Widgets, die es in HTML nicht gibt

Darüber hinaus gibt es auch Elemente wie die Combobox - das ist ein Texteingabefeld mit Auto-Vervollständigung bzw. einer Ausklappliste mit Eingabevorschlägen - die funktional etwas Neues bieten und deshalb weithin eingesetzt werden - etwa in Suchmaschinen, die nach den ersten zwei Buchstaben schon raten, was die Nutzerin wohl eingeben will, und in einer Ausklappliste dynamisch mögliche Suchbegriffe anbieten. Häufig anzutreffen sind auch Dialoge, die sich über der Seite öffnen und zum Teil komplexe Auswahlmöglichkeiten bieten.

Probleme bei der Tastaturnutzung (besonders mit Screenreader)

Solche Widgets schaffen häufig Probleme besonders für Tastaturnutzer und blinde Nutzer. Oft wird nicht einmal daran gedacht, dass sich Widgets nicht nur mit der Maus, sondern auch mit der Tastatur bedienen lassen sollten.

Für blinde Nutzer gibt es darüber hinaus das Problem, dass die Bedienelemente in den Widgets oft nicht zugänglich benannt sind. Anders als bei HTML-Standard-Elementen, die beim Durchtabben automatisch fokussiert werden und bei denen die jeweilige Rolle, etwa Checkbox oder Texteingabefeld sowie bei richtiger Auszeichnung auch Name und Wert, automatisch für Hilfsmittel verfügbar sind, müssen diese Informationen bei selbstgestalteten Widgets explizit hinterlegt werden.

WAI-ARIA für die Auszeichnung selbstgestalteter Widgets

Die Webentwickler müssen z.B. über das ARIA role-Attribut die passende Rolle festlegen (z.B. die Rolle listbox für eine Ausklappliste, die Rolle dialog für einen Pop-up-Dialog, oder die Rolle button für eine selbstgestaltete Taste).

Außerdem müssen sie explizit dafür sorgen,

  • dass diese Elemente den Tastaturfokus erhalten und komplett mit der Tastatur bedienbar sind (z.B. damit Nutzer eine Ausklappliste mittels Pfeiltasten durchlaufen können)
  • dass Verhalten und Aussehen des Widgets vollständig über JavaScript bzw. CSS definiert sind
  • dass Zustandsänderungen als Änderung der jeweiligen ARIA-Attribute verzeichnet werden (etwa wenn ein Dialog eingeblendet oder eine Custom-Checkbox aktiviert wird)

Der WAI-ARIA Standard wurde explizit dafür entwickelt, um von Webdesignern selbstgestaltete Widgets für Screenreader-Nutzer, aber auch für andere Hilfsmittel wie Sprachsteuerungssoftware, zugänglich zu machen. Der Fokus lag dabei auf der Tastaturbedienung, die sowohl für Menschen mit motorischen Einschränkungen als auch für blinde und sehbehinderte Menschen zentral wichtig ist.

Touch-Bedienung und Probleme bei ARIA-Widgets

Mit der verstärkten Nutzung von Webangeboten auf Mobilgeräten mit Touch-Bedienung wurde klar, dass die mittels ARIA erreichte Zugänglichkeit auf dem Desktop noch lange nicht bedeutet, dass diese ARIA-Widgets auch auf Geräten mit Touch-Bedienung zugänglich sind. Probleme gibt es z.B. bei Menüs, Comboboxen, Datepickern, Custom-Tooltips oder Slidern.

Entwickler sind dabei, die Zugänglichkeit wichtiger Widgets für die Touch-Bedienung zu optimieren. Ein Beispiel ist etwa der Location Picker, den die Entwickler von gov.uk (z.B. @dugboticusals Prototyp vorgestellt haben. Er ist (unter iOS) auch per Touch zu bedienen. 

Das Google Docs-Dokument ARIA Design Patterns der Paciello Group bietet eine Übersicht, wie gut Design Patterns und Widgets zur Zeit von Mobilgeräten bei Screenreader-Nutzung unterstützt werden.