ARIA (Accessible Rich Internet Applications, genauer WAI-ARIA) ist eine W3C-Spezifikation, die HTML-Elementen zusätzliche Angaben für Hilfstechnologien wie Screenreader mitgibt. Sie definiert dafür Rollen, Zustände und Eigenschaften. Für das Verhalten eines Elements, etwa die Bedienung per Tastatur, bleibt die Entwicklerin selbst zuständig.
Auf einen Blick
- Herausgeber
- W3C (Web Accessibility Initiative)
- Verbindet
- HTML-Elemente mit Hilfstechnologien über Rollen, Zustände und Eigenschaften
- Version
- WAI-ARIA 1.2
- Status
- W3C Recommendation vom 06.06.2023
- Spezifikation
- WAI-ARIA 1.2
Stand:
Was umfasst ARIA?
Eine Rolle beschreibt, was ein Element ist, zum Beispiel role="progressbar". Zustände geben den aktuellen Status an, etwa aria-checked, aria-expanded oder aria-pressed. Eigenschaften beschreiben Merkmale eines Elements, darunter aria-label, aria-describedby und aria-valuenow.
MDN nennt als erste Regel von ARIA, ein natives HTML-Element mit der benötigten Semantik zu verwenden, wenn es eines gibt. Ein <progress>-Element ist demnach einem <div> mit ARIA-Rollen vorzuziehen. ARIA eignet sich vor allem für komplexe JavaScript-Bausteine wie Tabs, Menüs und modale Dialoge.
Wofür dient aria-label?
Das Attribut aria-label gibt einem Element einen zugänglichen Namen, wenn es keinen sichtbaren Text gibt oder der vorhandene Name nicht passt. Typisch sind Schaltflächen, die nur ein Icon zeigen. Gibt es sichtbaren Text, empfiehlt MDN stattdessen aria-labelledby, das bei gleichzeitiger Angabe Vorrang hat. Nicht unterstützt wird aria-label bei einigen Rollen wie generic, paragraph oder presentation. Der Inhalt ist nur für Hilfstechnologien verfügbar. Wichtige Informationen sollten deshalb auch sichtbar sein.
Beispiel
<button aria-label="Schließen">
<svg aria-hidden="true" focusable="false" width="17" height="17">
<path d="..." />
</svg>
</button>
Das Icon ist per aria-hidden ausgeblendet. Als Name der Schaltfläche erscheint „Schließen“.
Bedeutung für KI-Agenten
Die ARIA-Angaben fließen in den Accessibility Tree des Browsers ein. Dieser Baum dient nicht nur Screenreadern. Playwright MCP von Microsoft liest Seiten laut Projektbeschreibung über den Accessibility Tree statt über Screenshots. Beschriftete, korrekt ausgezeichnete Bedienelemente sind damit auch für solche Werkzeuge leichter zu verstehen (Einschätzung).
Häufige Fehler
- ARIA statt eines nativen Elements einsetzen. Die Spezifikation versteht ARIA als Ergänzung der nativen Semantik. Bietet HTML die gleiche Funktion, soll das HTML-Element verwendet werden.
aria-hidden="true"auf fokussierbaren Elementen. MDN warnt davor, auch bei Vorfahren fokussierbarer Elemente, weil das Attribut an Kindelemente vererbt wird.aria-hiddenzusätzlich zudisplay: noneoderhidden. Solche Elemente sind bereits aus dem Accessibility Tree entfernt, das Attribut ist überflüssig.- Sichtbare Inhalte per
aria-hiddenausblenden. MDN rät dazu nur, wenn gleichwertige Inhalte für Hilfstechnologien erhalten bleiben.
Häufige Fragen
Was sind ARIA-Labels?
Gemeint ist meist das Attribut aria-label, das einem Element einen Namen für Hilfstechnologien gibt.
Wann sollte ich auf ARIA verzichten? Wenn ein natives HTML-Element die gewünschte Semantik und das Verhalten schon mitbringt.
Quellen
- ARIA: aria-label-Attribut – MDN Web Docsdeveloper.mozilla.org
- ARIA – MDN Web Docsdeveloper.mozilla.org
- Accessible Rich Internet Applications (WAI-ARIA) 1.2 – W3Cw3.org
- Playwright MCP – GitHub (Microsoft)github.com
- aria-hidden – MDN Web Docsdeveloper.mozilla.org
Stand: