Intro

In dieser Episode sprechen wir mit Marco Bretschneider über den ARIA-Standard und dessen Bedeutung für Barrierefreiheit bei dynamischen Webinhalten. Ein Accessibility-Audit war für sein Team der Ausgangspunkt, ARIA intensiver zu nutzen – daraus entstanden in seiner Firma die „ARIA of the week“-Sessions, die bis heute wertvolle Ergebnisse liefern.

Schaunotizen

[00:01:15] Accessible Rich Internet Applications (ARIA)

Wir starten mit einem historischen Exkurs zur Entstehung von ARIA und werfen einen Blick darauf, welche bestehenden Standards als Vorbild dienten. ARIA wurde nämlich stark von Accessibility-APIs aus der Desktop-Welt inspiriert, darunter Microsoft Active Accessibility (MSAA) und Apples Accessibility API. Diese Ansätze wurden auf das Web übertragen, um mit Technologien wie JavaScript, React und Angular umzugehen, die für assistive Technologien lange Zeit schwer zugänglich waren.

Marco erklärt, wie ARIA den Accessibility-Tree eines Browsers beeinflusst und assistiven Technologien wie Screenreadern wichtige Zusatzinformationen liefert, die mit reinem HTML nicht immer verfügbar sind.

Anschließend gehen wir auf die Funktionsweise einer Auswahl des ARIA-Vokabulars ein. Wir sprechen etwa darüber, wie Tabs mit Rollen wie role="tablist" und Attributen wie aria-controls korrekt umgesetzt werden und warum bestimmte Tastatur-Interaktionen bei ARIA ein absolutes Muss sind. Außerdem reden wir über die Unterschiede zwischen Toggle-Buttons, Checkboxen und Switches sowie die Einsatzmöglichkeiten von Live-Regions mit aria-live.

Am Ende bleibt die zentrale Erkenntnis: ARIA ist ein mächtiges Werkzeug, aber es muss gezielt und mit Bedacht eingesetzt werden. Wichtig ist ein grundlegendes Verständnis des Accessibility-Trees. Gut umgesetztes ARIA macht dynamische Webinhalte nicht nur zugänglicher, sondern erleichtert auch Entwickler*innen die Arbeit, indem es Barrierefreiheit strukturiert und nachvollziehbar macht.

Links

Inclusive Front-End Design Patterns

Ein Buch mit praxiserprobten Frontend-Design-Mustern, die Barrierefreiheit und Usability in den Vordergrund stellen.

Open UI

Eine Initiative zur Standardisierung von UI-Komponenten, die auch Barrierefreiheit im Blick hat.

Inclusive Components

Eine Website, die praktische Anleitungen und Beispiele bietet, um zugängliche UI-Komponenten zu entwickeln.

W3C ARIA Authoring Practices: Tabs

Offizielle W3C-Dokumentation zu Best Practices für die Umsetzung von Tabs mit ARIA.

HTML Spec: Link Type Next

Die offizielle HTML-Spezifikation zu den Link-Typen rel="next" und rel="prev".

Was ist Usability wirklich? (ProContext)

Ein Artikel, der das Konzept der Gebrauchstauglichkeit-Messung und die Stufen der Usability erklärt.

Inclusive Front-End Design Patterns

Ein Buch mit praxiserprobten Frontend-Design-Mustern, die Barrierefreiheit und Usability in den Vordergrund stellen.

HTML Living Standard

Die aktuelle HTML-Spezifikation, die vom WHATWG gepflegt wird.