ARIA (Accessible Rich Internet Applications) ist eine technische Spezifikation des W3C, die Rollen-, Zustands- und Eigenschaftsinformationen an assistive Technologien übermittelt, wo HTML allein sie nicht ausdrücken kann. Sie ermöglicht, dass eigene Komponenten wie Tabs, Aufklappmenüs und Live-Benachrichtigungen von Screenreadern korrekt verstanden werden. Falsch eingesetztes ARIA kann Barrierefreiheit verschlechtern statt verbessern.
ARIA ist die WAI-ARIA-Spezifikation des W3C und definiert drei Arten von Information: Rollen (was ein Element ist, zum Beispiel ein Dialog), Zustände (momentane Informationen wie auf- oder zugeklappt, etwa über aria-expanded) und Eigenschaften (Bezeichner wie aria-label). Diese Attribute fließen in den Accessibility-Baum des Browsers ein, und Screenreader sagen Elemente entsprechend an. Semantische HTML-Elemente wie button, nav und header tragen die meisten dieser Informationen bereits von Haus aus; ARIA ist für die Stellen gedacht, an denen die eingebaute Semantik nicht ausreicht, etwa bei Tab-Gruppen, Autocomplete-Feldern und Live-Regionen.
Die erste ARIA-Regel wird oft zitiert: Wenn ein natives HTML-Element die Aufgabe erfüllt, verwenden Sie kein ARIA. Eine falsch zugewiesene Rolle oder ein nie aktualisierter Zustand beschreibt dem Screenreader eine Oberfläche, die es gar nicht gibt; das kann schädlicher sein als gar kein ARIA. ARIA fügt außerdem kein Verhalten hinzu: Tastaturunterstützung muss separat programmiert werden. Die praktische Reihenfolge für Websitebetreiber lautet: zuerst semantisches HTML, dann Tastaturverhalten, zuletzt ARIA. Automatische Scanner erkennen ungültige ARIA-Nutzung wie unbekannte Rollen oder fehlende Pflichtattribute; ein kurzer manueller Screenreader-Test zeigt, ob die Ansagen wirklich sinnvoll sind.
Häufig gestellte Fragen
Was ist der Unterschied zwischen aria-label und Alt-Text?
Alt-Text wird über das für img-Elemente spezifische alt-Attribut definiert und vermittelt den Inhalt eines Bildes. aria-label gibt einem beliebigen Element einen zugänglichen Namen und wird meist bei Elementen ohne sichtbaren Text verwendet, etwa einem Schließen-Button, der nur ein Icon enthält. Für Bilder ist Alt-Text das richtige Mittel; aria-label ersetzt ihn nicht. Bei Elementen mit sichtbarer Beschriftung ist aria-label meist überflüssig.
Macht ARIA eine Website barrierefrei?
Für sich allein nicht. ARIA übermittelt nur Informationen an assistive Technologien; Tastaturunterstützung, Fokusmanagement und korrekte HTML-Struktur bleiben erforderlich. Falsch eingesetztes ARIA kann dem Screenreader sogar eine Oberfläche beschreiben, die nicht existiert, und die Lage verschlechtern. Die richtige Reihenfolge: zuerst semantisches HTML, dann Tastaturverhalten, ARIA nur wo nötig. Prüfen Sie das Ergebnis mit einem Screenreader-Test.
Dieser Inhalt dient nur zur Information und stellt keine Rechtsberatung dar.