Was ist ARIA (Accessible Rich Internet Applications)?

ARIA steht für Accessible Rich Internet Applications und bezeichnet eine Sammlung von HTML-Attributen, die interaktiven Website-Elementen zusätzliche Bedeutung für Screenreader und andere Hilfstechnologien geben. ARIA hilft, komplexe Webinterfaces für Menschen mit Behinderungen nutzbar zu machen.

Der technische Hintergrund: Standardmäßige HTML-Elemente wie Buttons, Links oder Formulare tragen bereits semantische Bedeutung in sich. Ein <button> ist für einen Screenreader erkennbar als Schaltfläche. Ein <a> ist ein Link. Wenn Entwickler aber komplexe Widgets wie Dropdown-Menüs, Tabs, Modals oder Autocomplete-Felder mit <div>-Elementen bauen, weiß ein Screenreader ohne zusätzliche Information nicht, was dieses Element ist oder macht. Hier kommt ARIA ins Spiel.

Die wichtigsten ARIA-Konzepte

ARIA-Rollen definieren, was ein Element ist. role="dialog" teilt einem Screenreader mit: Das ist ein Dialog-Fenster. role="tablist" sagt: Das ist eine Tab-Navigation. role="alert" kündigt an: Hier erscheinen dynamische Meldungen, die vorgelesen werden sollen.

ARIA-Eigenschaften (Properties) beschreiben den Zustand und die Eigenschaften eines Elements. aria-expanded="true" sagt: Dieses Akkordeon-Element ist gerade geöffnet. aria-required="true" sagt: Dieses Formularfeld ist Pflicht. aria-label="Suche schließen" gibt einem Icon-Button einen beschreibenden Text, den der Screenreader vorliest.

ARIA-Zustände (States) beschreiben den aktuellen Zustand eines Elements und können sich dynamisch ändern. aria-checked="true" zeigt, dass eine Checkbox ausgewählt ist. aria-disabled="true" zeigt, dass ein Element deaktiviert ist.

Eine wichtige Regel in der ARIA-Nutzung: Keine ARIA ist besser als schlechte ARIA. ARIA ergänzt natives HTML, ersetzt es nicht. Wenn ein natives HTML-Element die Aufgabe erfüllen kann, ist das immer vorzuziehen. ARIA sollte nur eingesetzt werden, wenn native Semantik nicht ausreicht.

Die erste ARIA-Regel lautet: Verwende immer das passende native HTML-Element, wenn es eines gibt. Erst wenn das nicht möglich ist, füge ARIA-Attribute hinzu.

Für Unternehmen, die dem European Accessibility Act unterliegen, ist korrektes ARIA nicht optional. Es ist ein zentraler Bestandteil barrierefreier Webentwicklung.

Wenn du wissen möchtest, wie deine Website für Screenreader-Nutzer aussieht, oder eine barrierefreie Website entwickeln lassen möchtest, helfen wir dir. Webentwicklungsleistungen oder kostenlosen Termin vereinbaren.