2.2.8 Machen Sie JavaScript-Lösungen barrierefrei

Hintergrund

Viele JavaScriptmenüs sind mit veralteten JavaScript Techniken programmiert. Sie bieten keine Fallbacklösungen, sind nicht tastaturbedienbar und für blinde NutzerInnen höchst unübersichtlich und verwirrend.

Häufig sind sie auch für DurchschnittsnutzerInnen schwer bedienbar, zu komplex, zu lang, zu reaktionsschnell, zu kleinteilig mit zu kleiner Schrift. Auch halbtransparenter Hintergrund macht sie schwerer lesbar.

Wenn Sie eingesetzt werden, bedarf es einer gutenkonzeptionellen, grafischen und programmiertechnischen Lösung, die Tastaturbedienbarkeit, Screenreader Tauglichkeit und generelle Benutzerfreundlichkeit gewährleistet.

Wenn die Submenüpunkte auch anderweitig – z.B. in einem seitlichen Untermenü, oder nur im jeweiligen Hauptbereich der Website – verfügbar sind, kann eine teilweise Unzugänglichkeit des JavaScript für Screenreader und TastaturnutzerInnen sogar nützlich sein. Sie müssen dann nicht mehr alle Menüpunkte durchgehen. Der Vorteil eines schnellen Überblicks durch dynamische Navigationssystem wäre für Sie durch die lineare Nutzung nicht gegeben. Statt dessen navigieren Sie wie in konventionellen Navigationssystemen: um einen Navigationspunkt eines anderen Bereiches zu erreichen wechseln sie erst den Hauptmenübereich und wählen dort den entsprechenden Punkt des Submenüs.

Auch javascriptgesteuerte Karteireiter oder Tabs und über JavaScript verborgene Informationen, die erst durch Nutzeraktion sichtbar werden (kontextuelle Hilfe, Zusatzinfos, One Page Checkout) müssen tastaturbedienbar und screenreadertauglich programmiert werden. Die Information müssen auch ohne JavaScript in irgendeiner Form verfügbar sein.

Die Information sollte auch für Screenreader zuerst verborgen und nur bei Nutzeraktion angezeigt werden. Jede Lösung muss getestet werden.

Tastaturbedienbarkeit, korrekte Lesereihenfolge und Fokussetzung zur eingeblendeten Information müssen beachtet werden.

Um JavaScript-basierte Shopfunktionen barrierefrei zu gestalten bedarf es speziellen Know-hows. Diese Lösungen gibt es noch nicht out-of-the-Box. Umfassende Tests insbesondere mit Screenreadern unterschiedlichster Hersteller und Versionen und mit der Tastatur sind unerlässlich.

Maßnahmen

  • Machen Sie JavaScript Menüs tastaturbedienbar.
  • Wenn Sie viele Menüpunkte enthalten, verbergen Sie die Submenüpunkte für Tastatur- und Screenreader NutzerInnen, weil diese den Vorteil eines schnellen Überblicks nicht nutzen können, sondern durch alle Menüpunkte durchtabben müssten.
  • Bieten Sie die Submenüpunkte des aktuellen Hauptmenüpunkts immer in einer JavaScript-unabhängigen Form an.
  • Durch Zeitverzögerungen werden dynamische Navigationen leichter bedienbar: unexakte Mausbewegungen führen so nicht so leicht zu Fehlbedienungen und lassen die Navigation ruhiger erscheinen.
  • Geben Sie JavaScript Menüs keinen halbtransparenten Hintergrund und vermeiden Sie transparentes Spacing zwischen den einzelnen Menüpunkten.
  • Machen Sie Karteireiter, kontextuelle Hilfen und javascriptgesteuerte Buttons tastaturbedienbar.
  • Ergänzen Sie mouse-over Effekte jeweils um Tastaturfokuseffekte.
  • Stellen Sie die Informationen auch bei deaktiviertem JavaScript zur Verfügung (z.B. die Informationen in Tabs auf einer Seite untereinander oder in Einzelseiten, kontextuelle Hilfen wie Fußnoten)
  • Testen Sie die Bedienbarkeit mit Screenreadern: Tastatursteuerung, Lesereihenfolge, Fokussetzung, Information über Änderungen auf der Seite.

Wer profitiert davon

  • Wenig interneterfahrene NutzerInnen
  • Blinde NutzerInnen
  • Sehbehinderte NutzerInnen
  • NutzerInnen mit motorischen Einschränkungen

Beispiele

Quelle Intuitivität

quelle.at: Produkte bei Quelle können ohne JavaScript zwar angesehen werden. Es ist aber nicht mehr möglich, sie ihn den Warenkorb zu legen. Auch die Produktinformationen in Karteireitern (Lieferung, Bewertungen, Kunden kauften auch) sind ohne JavaScript nicht verfügbar.