ARIA: Rollen, Zustände und Eigenschaften erklärt
Also called: WAI-ARIA, Accessible Rich Internet Applications, ARIA-Attribute
Definition
ARIA (WAI-ARIA, Accessible Rich Internet Applications) ist eine W3C-Spezifikation für HTML-Attribute – Rollen, Zustände und Eigenschaften –, die assistiven Technologien mitteilen, was ein eigenes Element ist, wie es heißt und in welchem Zustand es sich befindet.
ARIA – kurz für WAI-ARIA, Accessible Rich Internet Applications – ist ein W3C-Standard, der HTML für assistive Technologien mit Bedeutung anreichert. Mit ARIA-Attributen kann ein selbst gebautes Register, Akkordeon oder Menü einem Screenreader mitteilen, was es ist („Registerkarte“), wie es heißt und ob es geöffnet oder ausgewählt ist. ARIA ändert nur, was assistive Technologien hören – nicht, wie ein Element aussieht oder sich verhält.
Was es bedeutet
ARIA kennt drei Arten von Attributen:
| Art | Zweck | Beispiele |
|---|---|---|
| Rollen | Was ein Element ist | role="tab", role="dialog", role="navigation" |
| Zustände | Was sich bei der Bedienung ändert | aria-expanded, aria-checked, aria-pressed |
| Eigenschaften | Namen, Beschreibungen, Beziehungen | aria-label, aria-labelledby, aria-describedby, aria-controls |
WCAG 4.1.2 Name, Rolle, Wert, ein Kriterium der Stufe A der WCAG 2.2, verlangt, dass Name, Rolle, Zustände und Werte jedes Bedienelements für assistive Technologien verfügbar sind. Laut W3C erfüllen Standard-HTML-Elemente das bereits, wenn sie gemäß Spezifikation eingesetzt werden. Eigene Steuerelemente brauchen zusätzliche Arbeit – und genau dafür gibt es ARIA: Technik ARIA4 stellt die Rolle bereit, ARIA5 den Zustand, ARIA14 und ARIA16 den Namen. Ein per Skript zum Bedienelement gemachtes div ohne Rolle ist der Fehler F59.
Falsches ARIA ist schlimmer als keines: Eine falsch geschriebene Rolle, aria-hidden="true" auf einem fokussierten Element oder ein aria-expanded, das sich nie ändert, liefern Screenreader-Nutzern falsche Informationen.
Praxisbeispiele
<!-- Akkordeon-Button: nativer Button + Zustand -->
<button aria-expanded="false" aria-controls="faq-1">Versandkosten</button>
<div id="faq-1" hidden>Ab 50 Euro versenden wir kostenlos.</div>
<!-- Landmark mit Namen -->
<nav aria-label="Hauptmenü">…</nav>
<!-- Nicht so: falscher Button ohne Tastaturbedienung -->
<div role="button" onclick="speichern()">Speichern</div>Öffnet sich das Akkordeon, muss das Skript aria-expanded="true" setzen und hidden entfernen – der Zustand muss dem sichtbaren Bildschirm folgen.
Zuerst native Elemente verwenden und ARIA nur für das ergänzen, was HTML nicht ausdrücken kann: Zustände wie aria-expanded, Namen per aria-label, Bereiche über ARIA-Landmarks. Jeden Zustand mit der Oberfläche synchron halten. Sich an den Mustern des ARIA Authoring Practices Guide orientieren.
role="button" oder role="link" auf Elemente setzen, die echte Buttons oder Links sein sollten, nicht existierende Rollen verwenden, die native Rolle wiederholen (<button role="button">) oder fokussierbare Inhalte mit aria-hidden="true" verstecken.
So prüfen Sie ARIA auf Ihrer Website
Häufige Fragen
Wofür steht ARIA?
Für Accessible Rich Internet Applications, also barrierefreie reichhaltige Internetanwendungen. Der vollständige Name der W3C-Spezifikation lautet WAI-ARIA, nach der Web Accessibility Initiative, die sie herausgibt.
Wann sollte ich ARIA verwenden?
Wenn HTML kein natives Element für das hat, was Sie bauen – Register, Baumansichten, Kombinationsfelder – oder um einen Zustand oder Namen zu ergänzen, den HTML nicht ausdrücken kann. Für Buttons, Links, Formularfelder und Überschriften nehmen Sie das HTML-Element.
Verändert ARIA das Aussehen oder Verhalten meiner Website?
Nein. ARIA ändert nur, was der Browser an assistive Technologien weitergibt. Tastaturbedienung, Fokus und sichtbare Zustände müssen Sie weiterhin mit HTML, CSS und JavaScript umsetzen.
Schreiben die WCAG ARIA vor?
Nein. Die WCAG verlangen, dass Name, Rolle und Wert verfügbar sind; natives HTML liefert sie meist von selbst. ARIA ist eine von mehreren hinreichenden Techniken, vor allem für eigene Komponenten.
Wie finde ich fehlerhaftes ARIA auf meiner Website?
Prüfen Sie Ihre Startseite mit dem kostenlosen WCAG-Scanner – er testet nach WCAG 2.2 AA, einschließlich Name, Rolle und Wert Ihrer Bedienelemente.
Related terms
aria-label: Elemente richtig benennen
aria-label ist ein ARIA-Attribut, das den zugänglichen Namen eines Elements als Text festlegt. Screenreader sagen diesen Namen statt des Elementinhalts an – deshalb wird es vor allem für Bedienelemente ohne sichtbaren Text verwendet, etwa Icon-Buttons.
Read definition: aria-label: Elemente richtig benennenARIA-Landmarks: Seitenbereiche für Screenreader
ARIA-Landmarks sind Rollen wie banner, navigation, main und contentinfo, die die großen Bereiche einer Seite kennzeichnen. Screenreader listen sie auf, sodass Nutzer direkt zu jedem Bereich springen können.
Read definition: ARIA-Landmarks: Seitenbereiche für ScreenreaderZugänglicher Name: Was er ist und woher er kommt
Der zugängliche Name ist der Text, den der Browser an assistive Technologien weitergibt, um ein Element zu benennen – etwa die Worte, die ein Screenreader für einen Button, Link oder ein Formularfeld ansagt. WCAG 4.1.2 verlangt für jedes Bedienelement einen programmatisch ermittelbaren Namen.
Read definition: Zugänglicher Name: Was er ist und woher er kommtScreenreader: So lesen blinde Menschen Websites
Ein Screenreader ist eine assistive Software, die Inhalte und Bedienelemente des Bildschirms vorliest oder auf einer Braillezeile ausgibt. Er ist auf die Namen, Rollen und Zustände angewiesen, die eine Website über den Barrierefreiheitsbaum des Browsers bereitstellt.
Read definition: Screenreader: So lesen blinde Menschen Websites