Für die meisten von uns ist ein Warenkorb-Icon sofort klar. Für Screenreader-Nutzer:innen ist es ohne ARIA oft nur ein ‘leeres Bild’. ARIA-Attribute übersetzen diese Symbole in verständliche Sprache – unsichtbar, aber entscheidend.
ARIA-Attribute (Accessible Rich Internet Applications) sind spezielle HTML-Attribute, die entwickelt wurden, um Webinhalte für Menschen mit Behinderungen besser zugänglich zu machen – insbesondere für Nutzer:innen von Screenreadern und anderen assistiven Technologien. Mithilfe dieser Attribute können zusätzliche Informationen über Struktur, Zustand oder Funktionen von Elementen bereitgestellt werden, die für sehende Nutzer nicht „sichtbar“ sind, aber beispielsweise von Screenreadern erkannt und ausgegeben werden.
In den WCAG wird auf ARIA-Attribute in den folgenden Abschnitten eingegangen: 4.1.2 (Name, Rolle, Wert), 1.3.1 (Info & Beziehungen), 2.4.6 (Überschriften & Label)
Die wichtigsten ARIA-Attribute im Überblick
ARIA-Attribut | Bedeutung | Beispiel |
| Einem Element eine Beschreibung hinzufügen | |
| Verknüpft ein Element mit einem anderen sichtbaren Text, der als Label fungiert. | |
| Verweist auf ein Element, das eine zusätzliche Beschreibung liefert; z.B. für Hilfetext oder Fehlermeldungen | |
| Versteckt Inhalte vor Screenreadern – ohne sie visuell zu entfernen; z.B. bei dekorativen Icons oder redundanten Informationen | |
| Zeigt den Zustand eines ausklappbaren Bereichs an (offen/geschlossen). | |
| Weist einem Element eine bestimmte Rolle zu (z. B. | |
Erst HTML, dann ARIA
Die wichtigste Regel bei ARIA lautet: „Kein ARIA verwenden!“
Immer dann, wenn sich eine Funktion mit nativen HTML-Elementen umsetzen lässt, sollte darauf zurückgegriffen werden. Erst wenn diese Möglichkeiten ausgeschöpft sind, kommen ARIA-Attribute als Ergänzung ins Spiel.
Ein Beispiel dafür ist ein Button zur Steuerung eines Modals (z.B. Öffnen eines Dialogfensters)
FALSCH: Unnötiger Einsatz von ARIA ohne native Elemente
<div role="button" tabindex="0" onclick="openModal()">
Öffnen
</div>Visuell sieht es aus wie ein Button, aber semantisch ist es kein Button. Dies führt dazu, nützliche Tastaturfunktionen wie das Auslösen mit der Leertaste fehlen. Es müsste zusätzliches ARIA verwendet werden, um das Verhalten zu beschreiben. Dies ist unnötig kompliziert und fehleranfällig.
RICHTIG: Nutzung nativer HTML-Elemente
<button onclick="openModal()">
Öffnen
</button>Der Button ist nun semantisch korrekt und ein Screenreader kann ihn automatisch erkennen. Außerdem ist die Tastaturzugänglichkeit sichergestellt. Es sind keine weiteren ARIA-Attribute notwendig.
Aria-label oder aria-labelledby ist hier die Frage
Wann sollte „aria-label“ verwendet werden?
- Wenn ein Element keinen sichtbaren Text hat, aber dennoch eine Bedeutung oder Funktion vermitteln soll, zum Beispiel ein Button, der nur ein „X“ zeigt, um das Fenster zu schließen
- Bei interaktiven Icons oder Symbol-Buttons, bei denen die Funktion für sehende Nutzer klar ist, aber für Screenreader-Nutzer erklärt werden muss. Zum Beispiel sieht ein sehender Nutzer den Button mit dem Lupe-Symbol neben dem Suchfeld, aber der Screenreader liest vor „Suche starten“
Wann sollte „aria-labelledby“ verwendet werden?
- Wenn es bereits einen sichtbaren Text gibt, der das Element beschreibt. Mit aria-labelledby verweist man dann an der Stelle des Elements auf diesen Text, er wird also an dieser Stelle vom Screenreader ausgegeben. Somit erhalten sehende und nicht sehende Nutzer bei einem Element dieselbe Information.
- ein weiterer Vorteil: ändert der Entwickler den beschreibenden Text, muss er nicht auch den Text des aria-labels ändern. Inkosistenzen können also vermieden werden.