ARIA-Widgets 1 bis 4 Dynamische Webinhalte zugänglich gestalten

Auszug aus Codeschnipseln und Schriftzug:" Aria Widgets"

Letzte Woche habe ich zwei neue Beiträge über zugängliche Widgets auf https://www.barrierefreies-webdesign.de veröffentlicht. Die Widgets sind tastaturbedienbar und mit Accessible Rich Internet Applications (ARIA) angereichert. Da es relativ wenige getestete ARIA-Beispiele in deutscher Sprache gibt und die typischen Ressourcen entweder nur Teilaspekte behandeln oder bei der Zugänglichkeit eher oberflächlich bleiben, möchte ich diesen Bereich der Website weiter ausbauen.

Im Moment gibt es auf der Website vier mehrteilige Beiträge über verschiedenartige Widgets. Es geht in allen Beiträgen um

  • eine grundsätzliche Zugänglichkeit per Tastatur,
  • semantische Auszeichnung mit ARIA und
  • erweiterte Konzepte für die Tastaturbedienung.

Die Optimierung der Tastaturbedienung ist eine reine Fleißaufgabe. Die semantische Auszeichnung von fortgeschrittenen Widgets mit ARIA kann hingegen eine Herausforderung sein. In jedem Fall müssen angereicherte Widgets mit Screenreadern gründlich getestet werden.

Die Arbeit mit ARIA-Attributen ist deshalb nicht ganz einfach, weil die Attribute keinerlei Einfluss auf die Gestaltung oder das Verhalten im Browser haben. Vielmehr handelt es sich um Informationen für den Browser, wie der Accessibility-Tree des Betriebssystems zu befüllen ist. Wem diese Informationen neu sind, sollte ARIA und die Accessibility-API zuerst lesen, bevor Widgets auf Zugänglichkeit getrimmt werden.

ARIA-Widget #1: Checkboxen mit drei Zuständen

Anfang 2014 ist der erste der vier Beiträge zu ARIA-Widgets erschienen. Es handelte sich um eine vollständige Überarbeitung meines Beitrags für den Adventskalender 2013 der Webkrauts. Der Artikel wird durch zwei Demos ergänzt:

  1. eine Tri-State-Checkbox mit jQuery
  2. eine weitere Demo mit der indeterminate-Eigenschaft zum Vergleich, die aber nicht barrierefrei ist

ARIA-Widget #2: Live-Regionen

Ebenfalls im letzten Jahr erschien in Vorbereitung eines Artikels für den Adventskalender 2014 der Webkrauts eine Übersicht zu Live-Regionen. Leider werden die Attribute viel zu häufig im Web eingesetzt und die Nutzung der Webseiten mit falscher Auszeichnung ist mit einem Screenreader äußerst lästig. In dem dreiteiligen Beitrag auf meiner Website beschreibe ich das Grundmuster einer Live-Region, die Variationen mit ARIA-Attributen und das Fine-Tuning.

ARIA-Widget #3: Tooltips

Für die zuletzt erschienene Screenguide habe ich einen kritischen Beitrag zum Einsatz des title-Attributs geschrieben. Damit die interessierten Leser auch einsetzbaren Code erhalten, habe ich einige Beispiele online stellen wollen. Daraus ist ein Tutorium für barrierefreie Tooltips geworden.

ARIA-Widget #4: Registernavigation

Seit ungefähr einem Jahr liegt ein Artikel zu zugänglichen Registernavigationen auf meiner Festplatte. Eigentlich wollte ich die Erläuterungen und Demos um die „nahe Verwandte“, das Akkordeon, ergänzen, aber das Akkordeon ist meiner Ansicht nach in den ARIA-Empfehlungen nicht sonderlich praxistauglich beschrieben. Es bleibt also erstmal bei den tastaturbedienbaren und mit ARIA angereicherten Registernavigationen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.