Was ist ARIA? Barrierefreie Websites einfach erklärt

Was bedeutet ARIA?

ARIA steht für Accessible Rich Internet Applications.

Hinter dem etwas komplizierten Namen steckt eine einfache Idee: ARIA liefert zusätzliche Informationen über Elemente einer Website, damit assistive Technologien wie Screenreader besser verstehen können, was ein Element bedeutet und welchen Zustand es gerade hat.

Ein einfaches Beispiel ist ein Menü.

Für einen sehenden Menschen ist vielleicht sofort erkennbar, dass ein bestimmtes Symbol ein Menü öffnet. Ein Screenreader kann das nicht anhand des Aussehens erkennen.

Mit ARIA kann die Website zusätzliche Informationen bereitstellen:

Der Screenreader kann dadurch erkennen: Hier befindet sich eine Schaltfläche mit dem Namen „Menü" und das zugehörige Menü ist momentan geschlossen.

Wird das Menü geöffnet, kann sich der Wert ändern:

Jetzt weiß auch der Screenreader: Das Menü ist geöffnet.

ARIA beschreibt Bedeutung und Zustand

ARIA kann unterschiedliche Informationen über ein Element liefern.

Dazu gehören zum Beispiel:

• Was ist das für ein Element?
• Wie heißt das Element?
• Ist es geöffnet oder geschlossen?
• Ist es ausgewählt?
• Ist es deaktiviert?
• Gehört es zu einem anderen Element?

Ein typisches Beispiel ist ein aufklappbarer Bereich mit häufig gestellten Fragen.

Ein sehender Besucher erkennt anhand eines Pfeils möglicherweise sofort, ob die Antwort gerade geöffnet oder geschlossen ist. Für einen Screenreader muss dieser Zustand ebenfalls verständlich sein.

ARIA kann genau diese Information bereitstellen.

ARIA macht aus schlechtem HTML nicht automatisch gutes HTML

Ein wichtiger Grundsatz lautet:

Normale HTML-Elemente sollten verwendet werden, wann immer dies möglich ist.

Ein Button sollte beispielsweise tatsächlich als Button programmiert werden:

und nicht einfach als anklickbares Element:

Ein echter HTML-Button besitzt bereits viele Eigenschaften, die Browser und Screenreader verstehen.

ARIA sollte deshalb die vorhandene HTML-Semantik ergänzen und nicht unnötig ersetzen. Mehr zu diesem Grundsatz erklären wir in unserem Artikel „Semantisches HTML: Warum guter HTML-Code für Menschen und Maschinen wichtig ist".

Oder einfacher gesagt:

Zuerst gutes HTML – dann ARIA dort, wo zusätzliche Informationen notwendig sind.

Was hat ARIA mit dem Accessibility Tree zu tun?

Browser erstellen aus einer Website eine spezielle Struktur für assistive Technologien: den sogenannten Accessibility Tree.

Dieser enthält weniger Informationen über das Aussehen einer Website und dafür mehr Informationen über deren Bedeutung.

Aus einer komplexen Webseite kann dort beispielsweise vereinfacht folgende Struktur entstehen:

ARIA kann dem Browser zusätzliche Informationen liefern, die in diesen Accessibility Tree einfließen.

Ein Screenreader kann diese Informationen anschließend nutzen, um einem Menschen die Struktur und die Funktionen einer Website verständlich zu vermitteln. Wie diese Informationen anschließend als Accessibility Tree für Screenreader bereitgestellt werden, erklären wir in unserem Artikel „Was ist der Accessibility Tree? Die unsichtbare Struktur einer Website".

Typische ARIA-Attribute

Einige ARIA-Angaben begegnen Webentwicklern besonders häufig.

aria-label gibt einem Element einen verständlichen Namen.

aria-expanded beschreibt, ob ein Bereich geöffnet oder geschlossen ist.

aria-current kann beispielsweise kennzeichnen, welcher Navigationspunkt zur aktuell aufgerufenen Seite gehört.

aria-hidden kann bestimmte Inhalte vor assistiven Technologien verbergen, wenn diese keine zusätzliche Information liefern.

Das kann beispielsweise bei rein dekorativen Symbolen sinnvoll sein.

Warum ARIA alleine nicht ausreicht

Eine barrierefreie Website entsteht nicht dadurch, dass möglichst viele aria-Attribute in den HTML-Code geschrieben werden.

Im Gegenteil: Falsch eingesetztes ARIA kann eine Website sogar schlechter zugänglich machen.

Zur Barrierefreiheit gehören unter anderem auch:

ARIA ist also ein Baustein der Barrierefreiheit – nicht die gesamte Lösung.

ARIA wird auch für moderne Webanwendungen wichtiger

Websites bestehen heute längst nicht mehr nur aus Text, Bildern und einfachen Links. Sie enthalten Dropdown-Menüs, Akkordeons, Dialogfenster, Tabs, Slider, Filter und viele andere interaktive Funktionen.

Gerade bei solchen Komponenten reichen die normalen HTML-Informationen teilweise nicht aus, um ihren aktuellen Zustand eindeutig zu beschreiben.

Hier kann ARIA die notwendige zusätzliche Semantik liefern.

Und was hat das mit KI zu tun?

Interessant ist das Thema inzwischen auch außerhalb der klassischen Barrierefreiheit.

KI-Agenten können Webseiten nicht nur lesen, sondern zunehmend auch bedienen. Sie müssen beispielsweise erkennen, wo sich eine Navigation befindet, welches Element eine Schaltfläche ist oder wie ein Formular ausgefüllt werden kann.

Dabei können Browser-Agenten unter anderem auf semantische Informationen und den Accessibility Tree zurückgreifen.

Eine sauber programmierte und barrierefreie Website kann damit auch für automatisierte Systeme leichter verständlich und bedienbar sein.

Das bedeutet allerdings nicht, dass ARIA eine neue SEO-Technik ist oder dass der Einsatz von ARIA automatisch zu besseren Rankings in Suchmaschinen oder KI-Systemen führt.

Der Zusammenhang ist grundlegender: Eine Website, deren Inhalte und Funktionen technisch eindeutig beschrieben sind, ist nicht nur für Menschen mit assistiven Technologien besser zugänglich. Ihre Struktur lässt sich auch von Maschinen leichter interpretieren.

Fazit

ARIA hilft dabei, interaktive Webseiten für Screenreader und andere assistive Technologien verständlicher zu machen.

Die wichtigste Regel ist dabei erstaunlich einfach:

Gutes, semantisches HTML bildet die Grundlage. ARIA ergänzt es dort, wo zusätzliche Informationen benötigt werden.

Richtig eingesetzt verbessert ARIA damit nicht nur die Barrierefreiheit einer Website. Es trägt zu einer klaren, semantischen Struktur bei – und diese wird in einer Zeit, in der neben Menschen zunehmend auch KI-Agenten mit Websites interagieren, immer interessanter.