Role-Attribut – Semantik und Rollen für assistive Technologien definieren
Das role-Attribut stammt aus der WAI‑ARIA-Spezifikation und erweitert HTML um zusätzliche semantische Informationen. Es weist einem Element eine Rolle zu, die für assistive Technologien wie Screenreader relevant ist – insbesondere bei nicht-semantischen Elementen wie <div> oder <span>.
Warum dasrole-Attribut wichtig ist
Semantik ist zentral für barrierefreie Webentwicklung. Während semantische HTML-Elemente wie <button> oder <nav> bereits von sich aus eine Bedeutung transportieren, benötigen generische Elemente (<div>, <span>) explizite Rollenzuweisungen, um von Hilfsmitteln korrekt interpretiert zu werden.
Mit dem role-Attribut kannst du z. B. aus einem einfachen <div> ein bedienbares UI-Element wie eine Schaltfläche, ein Menü oder einen Dialog machen.
Häufig genutzte ARIA-Rollen
| Rolle | Bedeutung |
|---|---|
| role="button" | Macht ein Element als Schaltfläche erkennbar |
| role="dialog" | Markiert ein modales Fenster |
| role="navigation" | Definiert einen Navigationsbereich |
| role="alert" | Für sofort vorgelesene Fehlermeldungen |
| role="region" | Gliedert Inhalte für bessere Orientierung |
Beispiel: div mit Button-Rolle
<div role="button" tabindex="0" onclick="handleClick()">
Menü öffnen
</div>Ergänzen Sie bei interaktiven Rollen immer tabindex="0" und Keyboard-Handling, um vollständige Barrierefreiheit zu gewährleisten.
Best Practices
- Verwende native HTML-Elemente, wenn möglich (<button> statt div role="button").
- Ergänze interaktive Rollen um Tastaturbedienbarkeit (Enter, Space).
- Nutze role sparsam – falsche oder redundante Rollen können Nutzer:innen verwirren.
- Teste die Wirkung mit Screenreadern (z. B. NVDA, VoiceOver).
WCAG-Bezug
Das role-Attribut trägt zur Einhaltung folgender Richtlinien bei:
- 1.3.1 – Informationen und Beziehungen
- 4.1.2 – Name, Rolle, Wert
Mehr zu unseren Leistungen im Bereich Digitale Barrierefreiheit erfahren Sie hier.
