# ARIA: Rollen, Zustände und Eigenschaften erklärt

Source: https://allyway.ai/de/glossary/aria

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](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html), ein Kriterium der Stufe A der [WCAG 2.2](https://allyway.ai/de/regulations/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.

> **Warning:** > **Natives HTML zuerst**
> Die erste Regel im W3C-Leitfaden „Using ARIA“ lautet: Gibt es ein natives HTML-Element mit dem gewünschten Verhalten, verwenden Sie dieses statt einer Rolle. `role="button"` auf einem `div` bringt keine Tastaturbedienung mit – Tab-Fokus, Eingabe- und Leertaste müssen Sie selbst ergänzen. Ein echtes `<button>` kann das alles von Haus aus.

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

```html title="Beispiel"
<!-- 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.

**Do:** Do

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](https://allyway.ai/de/glossary/aria-label), Bereiche über [ARIA-Landmarks](https://allyway.ai/de/glossary/aria-landmarks). Jeden Zustand mit der Oberfläche synchron halten. Sich an den Mustern des [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/) orientieren.

**Don't:** Don't

`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

Q: Wofür steht ARIA?
A: 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.

Q: Wann sollte ich ARIA verwenden?
A: 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.

Q: Verändert ARIA das Aussehen oder Verhalten meiner Website?
A: 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.

Q: Schreiben die WCAG ARIA vor?
A: 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.

Q: Wie finde ich fehlerhaftes ARIA auf meiner Website?
A: Prüfen Sie Ihre Startseite mit dem [kostenlosen WCAG-Scanner](https://allyway.ai/de/free-wcag-accessibility-scanner-for-websites) – er testet nach WCAG 2.2 AA, einschließlich Name, Rolle und Wert Ihrer Bedienelemente.