ARIA-Attribute sind ein mächtiges Werkzeug, um Webseiten barrierefrei zu gestalten. In diesem Blog-Beitrag erfährst du, was ARIA-Attribute sind, wann und wie sie richtig eingesetzt werden und welche Best Practices es gibt, um inklusive Web-Erlebnisse zu schaffen.
Warum ARIA-Attribute?
ARIA (Accessible Rich Internet Applications) ist eine Spezifikation des W3C (World Wide Web Consortium)1, die es ermöglicht, dynamische Webinhalte und komplexe Benutzeroberflächen für Menschen mit Behinderungen zugänglich zu machen. Besonders wichtig ist ARIA für:
- Screenreader-Nutzer:innen, die auf semantische Informationen angewiesen sind.
- Tastatur-Nutzer:innen, die keine Maus verwenden können.
- Menschen mit kognitiven oder motorischen Einschränkungen, die klare Strukturen und Hinweise benötigen.
ARIA-Attribute ergänzen HTML, wo native Elemente nicht ausreichen, um Barrierefreiheit zu gewährleisten. Sie sollten jedoch nur eingesetzt werden, wenn keine passenden HTML5-Elemente (wie <button>, <nav>, <header>) verfügbar sind.
Wann sollten ARIA-Attribute eingesetzt werden?
1. Dynamische Inhalte
Wenn sich Inhalte auf einer Seite ohne Seitenneuladung ändern (z. B. durch JavaScript), müssen Screenreader darüber informiert werden. Beispiele:
- Live-Updates (z. B. Chat-Nachrichten, Benachrichtigungen)
- Akkordeons oder Tabs, die Inhalte ein- und ausblenden
2. Komplexe Widgets
Für interaktive Elemente, die nicht mit nativem HTML umgesetzt werden können, z. B.:
- Spezielle Menüs wie Dropdowns
- Automatisch öffnende Dialoge wie Modals
- Benutzerdefinierte Steuerelemente wie Schieberegler
- Slider oder Fortschrittsbalken2
3. Semantische Lücken in HTML
Wenn HTML-Elemente nicht ausreichend beschreiben, was sie tun (z. B. ein <div>, das als Button fungiert).
Die wichtigsten ARIA-Attribute im Überblick
role – Die semantische Rolle eines Elements
Das Attribut role (ohne aria-!) definiert die Funktion eines Elements, wenn HTML allein nicht ausreicht. Es ist kein ARIA-Attribut im engeren Sinne, sondern ein eigenständiges Attribut der ARIA-Spezifikation.
Wichtige Hinweise zu role:
aria-role: Es gibt kein Attribut namens aria-role – das ist ein häufiger Irrtum.role nur, wenn kein passendes HTML-Element verfügbar ist.❌ Redundant:
<button role="button">Klick mich</button>
✅ Korrekt: Ein <button> braucht keine zusätzliche Rolle.
Kombiniere role mit ARIA-Attributen:
<div role="alert" aria-live="assertive">Warnung: Session läuft ab!</div>
Häufige ARIA-Rollen und ihre Bedeutung:
| Rolle | Beschreibung | Beispiel |
|---|---|---|
button | Kennzeichnet ein klickbares Element. | <div role="button" tabindex="0">Klick mich</div> |
navigation | Markiert einen Navigationsbereich. | <ul role="navigation">...</ul> (hier wäre es sinnvoller, ein <nav>-Element zu verwenden) |
alert | Zeigt eine wichtige Nachricht an. | <div role="alert">Fehler: Bitte Eingabe überprüfen!</div> |
dialog | Kennzeichnet einen Dialog, wie z. B. einen Hinweis in einem Popup. | <div role="dialog" aria-modal="true">...</div> |
checkbox | Definiert ein Element als Checkbox. | <div role="checkbox" aria-checked="false" tabindex="0"></div> (auch hier sollte überprüft werden, ob ein <input type="checkbox"> verwendet und das Design angepasst werden kann) |
aria-label und aria-labelledby
- Zweck: Beschreiben ein Element, wenn der sichtbare Text nicht ausreicht.
- Beispiel:
<button aria-label="Menü öffnen">☰</button>
aria-hidden
- Zweck: Blendet Elemente für Screenreader aus (z. B. dekorative Icons).
- Beispiel:
<i class="icon" aria-hidden="true"></i>
aria-live
- Zweck: Informiert Screenreader über dynamische Änderungen.
- Beispiel:
<div aria-live="polite">Neue Nachricht eingegangenen</div>
aria-expanded
- Zweck: Zeigt an, ob ein Element (z. B. ein Menü) aufgeklappt ist.
- Beispiel:
<button aria-expanded="false" aria-controls="menu-content">Menü</button>
aria-controls
- Zweck: Verknüpft ein Element mit dem Bereich, den es steuert.
- Beispiel:
<button aria-controls="dropdown-menu">Optionen</button>
aria-required
- Zweck: Zeigt an, dass ein Formularfeld Pflichtangabe ist.
- Beispiel:
<input type="text" aria-required="true">
Best Practices für den Einsatz von ARIA
- Vermeide überflüssige ARIA-Attribute: Nutze sie nur, wenn native HTML-Elemente nicht ausreichen.
- Führe funktionale Tests durch: Versuche deine Webanwendung mit verschiedenen Screenreadern und Eingabegeräten (z. B. nur mit der Tastatur) zu bedienen.
- Kombiniere ARIA mit HTML5: Nutze semantische HTML-Elemente, wo immer möglich.
- Dokumentiere deine ARIA-Nutzung: Besonders in Teams ist es wichtig, klar zu kommunizieren, warum und wie ARIA eingesetzt wird.
Noch immer unsicher?
Wenn du dir nicht sicher bist, wie du ARIA in deinem Projekt einsetzen sollst, kann ich dabei helfen. Gerne arbeite ich auch gemeinsam mit deinem Team oder deiner Agentur an der barrierefreien Gestaltung eurer Webanwendungen.
Wo immer möglich, sollte semantisches HTML bevorzugt werden. Fortschrittsbalken können z. B. mit dem
<progress>-Element umgesetzt werden. Mozilla: The Progress Indicator element ↩︎