WAI-ARIA

Was ist WAI-ARIA?

WAI-ARIA ist eine technische Spezifikation, mit der Entwickler Rollen, Zustände und Eigenschaften interaktiver Webelemente für assistive Technologien beschreiben. Sie ergänzt HTML vor allem bei komplexen Komponenten wie Dialogfenstern, Tabs oder ausklappbaren Menüs. Browser übertragen diese Angaben über den Accessibility Tree beispielsweise an Screenreader.

Wie WAI-ARIA Barrierefreiheit verbessert

WAI-ARIA steht für Web Accessibility Initiative Accessible Rich Internet Applications. Die Spezifikation erweitert die Informationen, die Browser über eine Benutzeroberfläche bereitstellen. Ein Screenreader kann dadurch erkennen, dass ein Element als Schaltfläche dient, ein Menü geöffnet ist oder eine Statusmeldung dynamisch aktualisiert wurde.

WAI-ARIA verändert weder das sichtbare Design noch automatisch das Verhalten eines Elements. Ein <div role='button'> erhält zwar die semantische Rolle einer Schaltfläche, wird dadurch aber noch nicht per Tastatur bedienbar. Entwickler müssen Fokus, Tastatursteuerung und Interaktionen weiterhin korrekt programmieren.

Der Accessibility Tree ist eine vom Browser erzeugte Repräsentation der Seite für assistive Technologien. Dabei werden unter anderem Name, Rolle, Wert und Zustand eines Elements übermittelt. Fehlerhafte Angaben können deshalb dazu führen, dass ein Screenreader eine Bedienoberfläche anders beschreibt, als sie tatsächlich funktioniert.

Rollen, Zustände und Eigenschaften

WAI-ARIA besteht im Kern aus drei Gruppen von Angaben. Rollen bestimmen die Funktion eines Elements. Zustände beschreiben veränderliche Situationen. Eigenschaften liefern zusätzliche Informationen über Beziehungen oder Bezeichnungen.

Rollen: role='dialog', role='tab' oder role='alert' teilen assistiven Technologien die Aufgabe eines Elements mit.
Zustände: aria-expanded='true' zeigt an, dass ein aufklappbarer Bereich geöffnet ist. Der Wert muss sich beim Schließen zu false ändern.
Eigenschaften: aria-describedby verbindet ein Eingabefeld mit einem erklärenden Text oder einer Fehlermeldung.

Zugängliche Namen vergeben

Ein zugänglicher Name bezeichnet ein Bedienelement so, dass ein Screenreader dessen Zweck vorlesen kann. aria-label='Suche öffnen' kann beispielsweise einen Icon-Button benennen, dessen sichtbarer Inhalt nur aus einem Lupensymbol besteht. Ein vorhandener sichtbarer Text sollte jedoch bevorzugt werden, weil alle Nutzer dann dieselbe Bezeichnung erhalten.

aria-labelledby verweist über eine ID auf ein bereits vorhandenes Textelement. Diese Methode eignet sich für Dialogfenster, Formulargruppen und andere Komponenten mit sichtbarer Überschrift. aria-describedby ergänzt dagegen eine Beschreibung und ersetzt nicht den eigentlichen Namen.

Ein aufklappbares Menü braucht mindestens eine eindeutige Schaltfläche und einen synchronen Zustand. Die Schaltfläche kann mit aria-controls='produktmenue' auf den gesteuerten Bereich verweisen. aria-expanded='false' kennzeichnet den geschlossenen Zustand und muss beim Öffnen auf true wechseln.

WAI-ARIA ergänzt semantisches HTML

Der häufigste Denkfehler besteht darin, WAI-ARIA als Ersatz für korrektes HTML zu behandeln. Ein natives <button>-Element besitzt bereits eine Rolle, ist über die Tabulatortaste erreichbar und unterstützt die erwartete Tastaturbedienung. Ein <div role='button'> liefert lediglich die Rolle. Fokus und Bedienlogik müssen zusätzlich umgesetzt werden.

Die erste Grundregel für den Einsatz lautet deshalb: Nutze ein natives HTML-Element, wenn es die benötigte Semantik und Funktion bereits bereitstellt. WAI-ARIA ist vor allem für Komponenten sinnvoll, die HTML allein nicht ausreichend beschreibt, etwa komplexe Tabs, Autovervollständigungen, Baumansichten oder dynamische Live-Regionen.

Anwendungsfall	Bevorzugte Umsetzung	Mögliche Ergänzung
Klickbare Aktion	`<button>`	Zustand mit `aria-expanded`
Seitennavigation	`<nav>`	Bezeichnung mit `aria-label`
Formularfeld	`<label>` und Eingabeelement	Hinweis mit `aria-describedby`
Dekoratives Symbol	Kein eigener zugänglicher Inhalt	`aria-hidden='true'`

Typische Fehler bei WAI-ARIA

Ein fehlerhafter ARIA-Zustand ist kritischer als eine fehlende Zusatzinformation, wenn dadurch eine falsche Bedienlogik angekündigt wird. Bleibt aria-expanded='false' trotz geöffnetem Menü bestehen, erhält ein Screenreader-Nutzer eine Information, die dem sichtbaren Zustand widerspricht. Zustände müssen deshalb bei jeder Interaktion aktualisiert werden.

aria-hidden='true' blendet relevante Inhalte aus dem Accessibility Tree aus, obwohl sie auf dem Bildschirm sichtbar bleiben können.
Doppelte oder widersprüchliche Labels führen zu unverständlichen Ansagen.
Unpassende Rollen verändern die erwartete Bedienung einer Komponente.
Interaktive Elemente ohne Tastaturfokus bleiben für viele Nutzer unerreichbar.
Live-Regionen mit zu vielen Aktualisierungen unterbrechen die laufende Screenreader-Ausgabe.

So prüfst du die Umsetzung

Messbar ist die Qualität von WAI-ARIA durch eine Kombination aus automatisierter Prüfung und manuellen Tests. Ein automatischer Test erkennt beispielsweise ungültige Attribute oder Rollen ohne erforderliche Eigenschaften. Anschließend solltest du jede interaktive Komponente ausschließlich mit der Tastatur und mit mindestens einem Screenreader bedienen. Prüfe dabei Fokusreihenfolge, zugänglichen Namen, Rolle, Zustand und Rückmeldung nach einer Aktion.

Ein technischer Audit sollte WAI-ARIA gemeinsam mit HTML-Struktur, Alternativtexten, Formularbeschriftungen und Tastaturbedienung bewerten. Der kostenlose SEO-Check kann allgemeine technische und inhaltliche Auffälligkeiten einer Website erfassen. Eine vollständige Barrierefreiheitsprüfung benötigt darüber hinaus spezialisierte Tests und reale Bedienabläufe.

WAI-ARIA für SEO und GEO

WAI-ARIA ist kein direkter Hebel für Rankings. Suchmaschinen werten vor allem HTML, sichtbare Inhalte, interne Verlinkung und technische Erreichbarkeit aus. Zugängliche Komponenten unterstützen jedoch eine verständliche Seitenstruktur und eine zuverlässige Bedienung. Das ergänzt eine saubere Onpage-Optimierung, ersetzt aber keine Überschriftenstruktur oder sichtbaren Linktexte.

Ein aria-label sollte deshalb nicht genutzt werden, um unsichtbar Keywords zu ergänzen. Der zugängliche Name muss die tatsächliche Funktion des Elements beschreiben. Suchmaschinen und KI-Systeme benötigen weiterhin klar formulierte, sichtbare Inhalte. Für GEO, also Generative Engine Optimization, zählt vor allem, ob Informationen verständlich strukturiert, fachlich eindeutig und öffentlich abrufbar sind.

Barrierefreie Interaktionen betreffen auch Landingpages aus SEA-Kampagnen. Wenn Formulare, Filter oder Checkout-Elemente per Tastatur funktionieren und verständliche Fehlermeldungen liefern, können mehr Nutzer den vorgesehenen Prozess abschließen. WAI-ARIA gehört deshalb in die technische Qualitätssicherung von barriereorientierten Webprojekten und in die laufende Usability-Optimierung.

Häufige Fragen zu WAI-ARIA

Wann sollte ich WAI-ARIA verwenden?

WAI-ARIA eignet sich für interaktive Komponenten, deren Funktion oder Zustand durch natives HTML nicht vollständig vermittelt wird. Prüfe zuerst, ob ein semantisches HTML-Element dieselbe Aufgabe bereits erfüllt.

Macht WAI-ARIA eine Website automatisch barrierefrei?

WAI-ARIA allein macht eine Website nicht barrierefrei. Tastaturbedienung, Fokusführung, Kontraste, verständliche Inhalte, Alternativtexte und korrekt beschriftete Formulare müssen ebenfalls umgesetzt und getestet werden.

Was ist der Unterschied zwischen aria-label und aria-labelledby?

aria-label enthält die Bezeichnung direkt im Attribut. aria-labelledby verweist auf den Text eines vorhandenen Elements und eignet sich besonders, wenn eine sichtbare Überschrift oder Beschriftung bereits existiert.

Kann WAI-ARIA semantisches HTML ersetzen?

WAI-ARIA ersetzt semantisches HTML nicht. Native Elemente bringen neben ihrer Bedeutung häufig bereits Tastaturverhalten, Fokusfähigkeit und browserseitige Unterstützung mit.

Ist aria-hidden dasselbe wie display none?

Nein. aria-hidden entfernt ein Element aus dem Accessibility Tree, kann es aber weiterhin sichtbar lassen. display none entfernt das Element aus der visuellen Darstellung und normalerweise auch aus dem Accessibility Tree.

Wie teste ich WAI-ARIA mit der Tastatur?

Bediene die Seite ohne Maus mit Tabulator, Umschalttaste und Tabulator, Enter, Leertaste sowie den vorgesehenen Pfeiltasten. Der Fokus muss sichtbar bleiben und jede Funktion muss erreichbar, ausführbar und wieder verlassbar sein.