Revision 651: Accessible Rich Internet Applications (ARIA)

Mar 4, 2025

Marco Bretschneider, ein Entwickler mit Expertise im ARIA-Standard, teilt spannende Einblicke in die Barrierefreiheit von Webinhalten. Er erklärt, wie ARIA die Interaktion mit assistiven Technologien verbessert, insbesondere durch korrekte Implementierung von Tab- und Switch-Komponenten. Die Bedeutung von semantischem HTML und der Einfluss von JavaScript auf die Benutzererfahrung werden ebenfalls thematisiert. Zudem spricht er über die Herausforderungen, ARIA im Team zu kommunizieren und wie regelmäßige Diskussionen in seiner Firma wertvolle Erkenntnisse liefern.

Ask episode

AI Snips

Chapters

Transcript

Episode notes

INSIGHT

ARIA und der Accessibility Tree

ARIA erweitert den Accessibility Tree für assistive Technologien.
Es basiert auf Desktop Accessibility APIs und deckt Lücken im HTML ab.

ADVICE

HTML vs. ARIA

Komplexe Konstrukte wie Tabs lassen sich mit ARIA erstellen.
Für einfachere Elemente gibt es natives HTML.

ADVICE

Links oder Buttons für Tabs?

Klickbare Tabs sollten Links sein, wenn sie die URL ändern.
Ansonsten sollten sie als Buttons implementiert werden.

Get the Snipd Podcast app to discover more snips from this episode

Get the app

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.