Widgets mit Accessible Rich Internet Applications

Der Begriff "Widgets" bezeichnet Komponenten auf Webseiten, die mit JavaScript gesteuert werden. Obwohl manche Widgets mit HTML erstellt werden können (z.B. ein Fortschrittsbalken mit dem PROGRESS-Element), zeichnen sich Widgets i.d.R. meist dadurch aus, dass sie mit HTML semantisch nicht abgebildet werden können (z.B. die Reiter in einer Registernavigation oder die aus- und zugeklappten Zustände in einem Akkordeon).

Diverse dynamische Komponenten auf Webseiten sind nur dann zugänglich und nutzbar, wenn Sie mit Attributen aus Accessible Rich Internet Applications (ARIA) ergänzt werden. Erst mit den ARIA-Attributen können Browser korrekte Informationen an Hilfsmittel wie Screenreader und Vergrößerungssysteme übertragen. Wichtig bei ARIA-Attributen ist, dass sie weder die Gestaltung noch das Verhalten im Browser beeinflussen, sondern dem Browser ermöglichen, die Semantik einer Komponente zu identifizieren und an den Accessibility-Tree des Betriebssystems weiterzuleiten.

Die Beiträge in diesem Bereich decken nicht alle in ARIA definierten Widgets ab, aber sie zeigen die allgemeine Herangehensweise auf, um Widgets barrierefrei zu gestalten. In den Beispielen handelt es sich um dynamische Komponenten. Die Übernahme der Lösungsansätze setzt zum einen gute Kenntnisse in JavaScript und zum anderen Kenntnisse darüber, wie Browser Informationen an Hilfsmittel übertragen, voraus.

Barrierefreie Widgets

Die Zugänglichkeit eines Widgets wird meist durch zwei Aspekte gekennzeichnet. Zum einen muss ein Widget per Tastatur zugänglich sein und zum anderen muss ein Widget semantisch so angereichert werden, dass es in Screenreadern und anderen Hilfsmitteln 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 Buttons, die meist nur ein einziges Attribut benötigen,
• Checkbox mit drei Zuständen
• Tooltips, die per Tastatur und Screenreader zugänglich sind, und
• Tab-Panels.

Dynamische Aktualisierung von Inhalten

Wenn Inhalte auf einer Webseite dynamisch aktualisiert werden, ist die Zugänglichkeit in Hilfsmitteln wie Screenreadern nicht notwendigerweise gegeben. Wenn beispielsweise ein Formular ausgefüllt wird und wichtige Informationen zum erwarteten Eingabeformat oder zu Fehleingaben in einem Statusbereich 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.