Widgets mit Accessible Rich Internet Applications
Der Begriff "Widget" bezeichnet Bestandteile der Benutzerschnittstelle auf Webseiten, die eine Interaktion erlauben und die diskrete Zustände haben. Widgets gibt es als einfache bestandtteile (wie ein Kontrollfeld oder ein Link) bis hin zu zusammengesetzten Bestandteilen, die weitere Widgets steuern (zum Beispiel Menüs oder interaktive Tabellen).
Einige Widgets wie eine Reiternavigation oder ein Menü können mit HTML nicht abgebildet werden. In dem Fall muss das Widget mit anderen HTML-Elementen aufgebaut werden, und die Rollen und das Fokus-Management muss die Webseite bereitstellen.
Die meisten Widgets können mit HTML (und ohne ARIA) bereitgestellt werden. Für ein Kontrollfeld ist normalerweise kein ARIA erforderlich. Auch für andere Steuerelemente deuten ARIA-Attribute oft auf ein Missverständnis über den Einsatz von ARIA hin. Steuerelemente, die mit HTML umgesetzt werden können, benötigen von Autoren meist nur eine beschreibende Beschriftung (label
-Element), um barrierefrei zu sein.
Dennoch werden ARIA-Attribute immer wieder auch in HTML-Widgets benötigt. Die verschiedenen Funktionsweisen von Schaltflächen können beispielsweise per CSS vermittelt werden. Es muss sichergestellt werden, dass auch Assistenztechnologien die Information erhalten, dass ein bestimmter Bestandteil der Benutzerschnittstelle eine Wechselschaltfläche oder eine erweiternde Schaltfläche ist. Hierfür können punktuell ARIA-Attribute eingesetzt werden.
Barrierefreie Widgets
Die Zugänglichkeit eines Widgets wird meist durch zwei Aspekte gekennzeichnet. Zum einen muss ein Widget per Tastatur bedienbar sein und zum anderen muss ein Widget semantisch so angereichert werden, dass es in Screenreadern und anderen Assistenztechnologien identifiziert werden kann.
Über diese Mindestanforderungen hinaus gibt es in Bezug auf die Tastaturbedienung meist einen recht großen Spielraum für eine bessere Nutzbarkeit durch die Berücksichtigung von Tastenbefehlen, die der Bedienung vergleichbarer Komponenten im Betriebssystem ähneln.
Derzeit finden Sie Erläuterungen mit Beispielen zu folgenden Widgets:
- Diverse Schaltflächen,
- Checkbox mit drei Zuständen
- Tooltips, die per Tastatur und Screenreader zugänglich sind, und
- Reiternavigationen.
Live-Regionen
Wenn Inhalte auf einer Webseite dynamisch aktualisiert werden, ist die Zugänglichkeit in Assistenztechnologien wie Screenreadern nicht notwendigerweise gegeben. Wenn beispielsweise ein Formular ausgefüllt wird und wichtige Informationen zum erwarteten Eingabeformat oder zu Eingabefehlern in einer Statusmeldung am unteren Bildschirmrand angezeigt werden, können Webentwickler den Statusbereich als Live-Region kennzeichnen. Aktualisierungen in einer Live-Region werden dann von Browsern an Hilfsmittel übertragen. Die Webentwicklung hat darüber hinaus weitere Attribute zur Verfügung, die Umfang, Zeitpunkt und Ansteuerbarkeit der aktualisierten Inhalte erlauben.
Die folgende Liste fasst die Inhalte der Beiträge im Bereich "Widgets mit Accessible Rich Internet Applications" zusammen.
- Barrierefreie Buttons brauchen oft ARIA (2024)
Ob Links oder Schaltflächen eingesetzt werden sollten, ist eine Frage der Usability. Wenn aus einem Link eine Schaltfläche gemacht wird, greifen die meisten Webentwickler in die CSS-Kiste. Um barrierefrei zu sein, muss aber in die HTML-Kiste gegriffen werden.
- Tri-State-Checkbox (2016)
Checkboxen sollten normalerweise immer mit HTML umgesetzt werden. Allerdings gibt es Situationen, in denen eine HTML-Checkbox nicht ausreicht, um eine bestimmte Aufgabe abzubilden. Eine solche Situation ist gegeben, wenn eine Checkbox neben den beiden Zuständen "Aktiviert" und "nicht aktiviert" auch den Zustand "teilweise aktiviert" vorsieht.
- Schritt für Schritt zu barrierefreien Tooltips (2015)
Nach der HTML-Spezifikation können Tooltips mit einem
title
-Attribut einem Link oder einem anderen Element beigefühgt werden. Dieses Attribut ist allerdings nicht geräteunabhängig und kann vor dem Hintergrund der Barrierefreiheit auch weitere Probleme verursachen. Verschiedene CSS-Lösungen können die Zugänglichkeit verbessern, aber richtig nutzbar werden Tooltips erst mit einemtooltip
-Widget.- Registernavigation für das Web (2015)
Registernavigationen sind Komponenten der Benutzerschnittstelle und sollten sich im Web so verhalten, wie im Betriebssystem und anderen Anwendungen auch. Das bedeutet zum einen, dass sie die richtigen Rollen zugewiesen bekommen. Zum anderen besitzen Tabpanels normalerweise nur einen Tab-Stopp und die Bedienung innerhalb der Komponente erfolgt per Pfeiltasten. In diesem Beitrag werden die Anforderungen beschrieben und mit einigen auf jQuery basierende Beispiele ergänzt.
- Alive and Kicking (2014)
Live-Regionen spielen eine wichtige Rolle in Applikationen. Sie kommen in Form von Statuszeilen, Fortschrittsanzeigen oder Warnhinweisen zum Einsatz. Damit solche Bereiche einer Webseite auch für Screenreader barrierefrei sind, sollte entweder das
aria-live
- oderrole
-Attribut eingesetzt werden.
Der folgende Begriff auf dieser Seite wird im Glossar definiert:Bestandteile der Benutzerschnittstelle