ARIA: Wie interaktive Webseiten für alle bedienbar werden

Was ist ARIA?

WAI-ARIA steht für Web Accessibility Initiative – Accessible Rich Internet Applications. Das WAI (Web Accessibility Initiative) ist eine Initiative des World Wide Web Consortium (W3C), die sich der Barrierefreiheit im Web widmet. Die Richtlinien von WAI-ARIA machen aus unverständlichen Codezeilen klare Ansagen für Screenreader und andere technische Hilfen, so dass die Webseiten einfach zu nutzen und für alle zugänglich sind.

WAI-ARIA – kurz: ARIA – ist heute der internationale Standard für barrierefreie Webseiten und Grundlage für gesetzliche Regelungen. Die vollständige Dokumentation und alle technischen Details findest du auf der offiziellen W3C WAI-ARIA Seite.

Man muss sich ARIA wie einen Übersetzer zwischen komplexen Webseiten und assistiven Technologien vorstellen. Es macht aus unverständlichen Codezeilen klare Ansagen für Screenreader und andere technische Hilfen.

Die Geschichte: Warum ARIA erfunden wurde

Anfang der 2000er Jahre veränderte sich das Internet grundlegend. Aus statischen HTML-Seiten wurden Rich Internet Applications (RIA) – moderne, interaktive Webseiten, die sich wie echte Programme verhalten. Der Zoom auf Google Maps, die komplexen Formulare im Online-Banking oder interaktive Komponenten wie Accordions (ausklappbare Bereiche) und Tabs (Registerkarten).

Diese neuen, interaktiven Webseiten machten zwar vieles möglich, doch nicht für alle: Screenreader konnten die neuen Seiten nicht verstehen, Menschen mit Sehbeeinträchtigungen diese nicht nutzen.

Das Problem der unsichtbaren Interaktivität

Traditionelle HTML-Elemente wie <button> oder <input> waren für assistive Technologien klar verständlich. Aber was passiert, wenn Entwickler:innen mit JavaScript komplexe Widgets bauen?

Das Problem: Screenreader konnten nicht verstehen, was bei interaktiven Elementen passierte. Wenn ein:e Screenreader-Nutzer:in auf ein selbstgebautes Accordion klickte und es sich öffnete, geschah das nur visuell. Der Screenreader sagte nichts dazu – Personen mit Sehbeeinträchtigungen wussten somit nicht, ob und was sich geändert hatte.

• Früher (statische Webseiten): Screenreader erkannten alle Elemente problemlos
• Mit Rich Internet Applications: Unsichtbare Buttons, stumme Zustandsänderungen, verwirrende Widgets

Ohne WAI-ARIA konnten Menschen, die auf Screenreader angewiesen waren oder keine Maus bedienen konnten, die Webseiten nur noch eingeschränkt oder gar nicht mehr nutzen.

Die Lösung: ARIA

Am 20. März 2014 veröffentlichte das World Wide Web Consortium (W3C) den offiziellen Standard WAI-ARIA 1.0. Ein Meilenstein. Endlich gab es eine barrierefreie Lösung für moderne Webseiten.

So funktioniert ARIA: Der Übersetzer für assistive Technologien

ARIA funktioniert wie ein intelligenter Übersetzer. Es fügt Informationen zum HTML-Code hinzu, die assistive Technologien verstehen und an ihre Nutzer:innen weitergeben können.

Die drei Säulen von ARIA

1. Roles (Rollen): Was ist das für ein Element?

• role="button" → “Das ist ein Button”
• role="navigation" → “Das ist eine Navigation”
• role="dialog" → “Das ist ein Dialog-Fenster”

Properties (Eigenschaften): Wie ist das Element beschaffen?

• aria-label="Menü schliessen" → Gibt einem Element einen Namen
• aria-describedby="hilfetext" → Verknüpft zusätzliche Beschreibungen

States (Zustände): Was passiert gerade mit dem Element?

• aria-expanded="false" → Element ist eingeklappt
• aria-checked="true" → Checkbox ist angehakt

Die wichtigsten ARIA-Attribute im Überblick

Navigation und Struktur

aria-label: Gibt Elementen einen verständlichen Namen

<button aria-label="Menü öffnen">☰</button>

Screenreader sagt: “Menü öffnen, Schaltfläche”

aria-expanded: Zeigt an, ob etwas ausgeklappt ist

<button aria-expanded="false">Mehr Infos</button>

So hört sich aria-expanded an:

• aria-expanded="false": Screenreader sagt “Mehr Infos, Schaltfläche, eingeklappt”
• aria-expanded="true": Screenreader sagt “Mehr Infos, Schaltfläche, ausgeklappt”

Wenn sich der Zustand ändert, wird das sofort angekündigt!

Formulare und Eingaben

aria-required: Markiert Pflichtfelder

<input aria-required="true" aria-label="E-Mail-Adresse">

aria-invalid: Zeigt Fehler an

<input aria-invalid="true" aria-describedby="email-fehler">

aria-live: Für dynamische Inhalte

• aria-live="polite" → Screenreader wartet mit der Ansage, bis die Person eine Pause macht (z.B. für Statusmeldungen)
• aria-live="assertive" → Screenreader unterbricht sofort alles andere und liest die Änderung vor (z.B. für kritische Fehlermeldungen)

Komplexe Widgets

aria-controls: Zeigt, was ein Element steuert

<button aria-controls="mobile-menu" aria-expanded="false">

aria-describedby: Verknüpft zusätzliche Beschreibungen

<input aria-describedby="passwort-hilfe">
<div id="passwort-hilfe">Mindestens 8 Zeichen</div>

Wer profitiert von ARIA?

In der Schweiz sind rund 400’000 Menschen von Sehverlust betroffen oder bedroht – für sie ist ARIA oft der einzige Weg, moderne Webseiten selbständig zu nutzen. Sie profitieren am meisten von ARIA.

Screenreader-Nutzer:innen hören dank ARIA:

• Welche Art von Element vor ihnen liegt
• Ob Buttons funktionsfähig sind
• Wo sie sich auf der Seite befinden
• Was passiert, wenn sich etwas ändert

Warum ARIA für dein Unternehmen wichtig ist

Bedienbare Webseite für alle = Mehr Reichweite

ARIA macht deine Webseite erst richtig und für alle bedienbar. Dadurch erreichst du eine wichtige Zielgruppe, die ohne eine barrierefreie Umsetzung ausgeschlossen wäre. Das bedeutet: mehr potenzielle Kund:innen, zufriedenere Nutzer:innen und ein Zeichen für gesellschaftliche Verantwortung.

Zukunftssicherheit

Barrierefreiheit wird immer wichtiger. Wer heute schon ARIA verwendet, ist für kommende Gesetze und Standards gerüstet. ARIA macht Webseiten nicht nur barrierefrei, sondern auch benutzerfreundlicher für alle.

Fazit

ARIA ist mehr als nur ein technischer Standard – es ist der Schlüssel zu einem Internet, das wirklich für alle ist. Von den Anfangstagen der Rich Internet Applications bis heute hat sich ARIA zum unverzichtbaren Werkzeug für barrierefreie Webentwicklung entwickelt und ist seither unverzichtbarr für die gesellschaftliche Teilhabe der 400’000 von Sehbinderungen betroffenen Menschen in der Schweiz.

Referenzen

Schweizerischer Blinden- und Sehbehindertenverband: “Digitale Barrierefreiheit: Warum unsere Website so aussieht”

World Wide Web Consortium: “WAI-ARIA Overview”

World Wide Web Consortium: “Introduction APG”

Mozilla Developer Network: “ARIA: aria-expanded attribute”

Accessibility Developer Guide: “Marking elements expandable using aria-expanded“