Name, Rolle, Wert

Erweiterte Steuerelemente (etwa JavaScript-Widgets) müssen so programmiert sein, dass ihr Zweck, ihre Bedienung und die entsprechenden Zustände durch Software erkannt werden können. Dies ermöglicht die uneingeschränkte Bedienung dieser Elemente durch assistierende Technologien (z.B. Screenreader).

Verstehen

Auch wenn Standard-HTML viele nützliche Steuerelemente anbietet, so fehlen doch einige etwas anspruchsvollere Steuerelemente (JavaScript-Widgets), welche in aktuellen interaktiven Websites oft benötigt werden, und deren Funktionalitäten meist über diejenigen von Standard-HTML hinausgehen. Beispiele sind etwa Tabs, Akkordeons, Mega-Dropdowns, Tooltips, etc.

Während HTML-Standardelemente von allen Browsern «von Haus aus» zugänglich angeboten werden, liegt die Zugänglichkeit von Widgets in der Verantwortung der Programmierenden. Normalerweise sind diese per Default nicht barrierefrei zugänglich, Barrierefreiheit muss erst mit besonderen Vorkehrungen (und entsprechendem Aufwand) «hergestellt» werden.

Wichtig: Wir empfehlen, wenn möglich Standard-HTML-Elemente zu verwenden, und Widgets nur dann einzusetzen, wenn HTML keine entsprechende Funktionalität anbietet. Entsprechend ist ein <button> einem <div role="button"> vorzuziehen; dasselbe gilt für ein <select> anstelle eines JavaScript-Dropdowns. Oftmals können komplizierte Funktionalitäten zudem aufgeteilt werden in kleinere, einfacher zu handhabende Einzelteile (ein Autocomplete-Widget etwa in ein einfaches Textfeld, welches eine Gruppe von Radiobuttons filtert). Siehe dazu auch 2.1.1.

ARIA (Accessible Rich Internet Applications):

Die Spezifikation für zugängliche Webanwendungen der Web Accessibility Initiative (WAI) nennt eine Anzahl weiterer solcher Elemente unter Widget Roles. Mit ARIA können (mittels der angebotenen Rollen, Zustände und Attribute) sowohl Standard- als auch diverse Nicht-Standard-Steuerelemente semantisch so angereichert werden, dass sie durch assistierende Technologien zugänglich vermittelt und bedienbar werden.

Die Implementierung von Steuerelementen mittels WAI-ARIA ist nicht trivial, denn die benötigten Rollen, Zustände und Attribute (und das Zusammenspiel von deren teilweise recht komplexen Kombinationen) müssen vollständig und korrekt umgesetzt werden.

Zusätzlich kennen die aktuellen Browser und assistierenden Technologien nicht alle verfügbaren Rollen, Zustände und Attribute, oder sie interpretieren sie unterschiedlich (und leider teils auch fehlerhaft). Dies macht es machmal schwierig, ein Steuerelement auf allen gängigen Kombinationen von Ein- und Ausgabegeräten durchgängig zugänglich umzusetzen. Schnell sind solche Elemente auf anderen Plattformen (z.B. auf Mobilgeräten) nicht mehr barrierefrei bedienbar.

Wir empfehlen deshalb, bereits bei der Spezifizierung einer Benutzeroberfläche genau zu überlegen, ob die gewünschte Funktionalität tatsächlich den Einsatz von Widgets erfordert. Es sollte auf jeden Fall nach Möglichkeiten gesucht werden, Funktionalitäten zu vereinfachen, so dass sie mit den von HTML standardmässig angebotenen Steuerelementen umgesetzt werden können. Viele scheinbar komplexe Anforderungen, welche auf den ersten Blick den Einsatz von Widgets notwendig erscheinen lassen, können in einfachere Teilanforderungen zerstückelt werden, welche mit den Standard HTML-Steuerelementen durchaus umgesetzt werden können.

Zudem versuchen viele Implementierungen, die Funktionalität von bereits existierenden Standard HTML-Steuerelementen exakt zu imitieren, meist aufgrund von speziellen Anforderungen an das visuelle Design. Ob für solche visuellen Details der zu erwartende Implementierungs-Aufwand gerechtfertigt ist, muss abgewogen werden.

Vorsicht: Viele angebotene JavaScript-Widget-Bibliotheken behaupten, auf Zugänglichkeit hin optimiert zu sein. Dies ist oft irreführend, da Ansichten über Zugänglichkeit sowie Zielplattformen sich unterscheiden können. Stellen Sie die Zugänglichkeit solcher Bibliotheken deshalb immer im Voraus selber sicher.

Hinweis: Führung des Tastaturfokus ist oft wichtig bei JavaScript-Widgets (siehe dazu auch 2.1.1 und 2.4.3). Rückmeldungen an assistierende Technologien sind ebenso essenziell: Mit einer guten Fokusführung wird dies oft bereits ausreichend sichergestellt. Es kann aber auch durch Verwendung von Live Regions (z.B. role="alert") erfolgen; setzen Sie diese aber mit Bedacht ein, um den Audiokanal nicht zu überstrapazieren (siehe dazu auch 4.1.3).

Verantwortlichkeiten

• Das Designteam definiert JavaScript-Widgets mit dem Augenmerk auf Einfachheit und Bedienbarkeit mittels assistierender Technologien.
• Das Entwicklungsteam setzt die vom Designteam definierten Vorgaben korrekt um. Werden JavaScript-Widget-Bibliotheken verwendet, so werden diese erst eingehend auf Zugänglichkeit hin untersucht.
• Auftraggebende sollten sich bewusst sein, dass die Umsetzung von zugänglichen JavaScript-Widgets Zusatzaufwand bedeuten kann.

WCAG-Text

Für alle Bestandteile der Benutzerschnittstelle (einschliesslich, aber nicht beschränkt auf: Formularelemente, Links und durch Skripte generierte Komponenten) können Name und Rolle durch Software bestimmt werden; Zustände, Eigenschaften und Werte, die vom Benutzer festgelegt werden können, können durch Software festgelegt sein; und die Benachrichtigung über Änderungen an diesen Elementen steht den Benutzeragenten zur Verfügung, einschliesslich assistierender Techniken.

Anmerkung: Dieses Erfolgskriterium ist hauptsächlich für Webautoren gedacht, die ihre eigenen Bestandteile der Benutzerschnittstelle entwickeln oder skripten. Standard-HTML-Steuerelemente erfüllen zum Beispiel bereits dieses Erfolgskriterium, wenn sie entsprechend der Spezifikation benutzt werden.