ARIA

TL;DR

ARIA ergänzt HTML mit Attributen, die Screenreadern helfen, dynamische Inhalte und komplexe Widgets zu verstehen – wenn semantisches HTML nicht ausreicht.

Was ist ARIA?

ARIA (Accessible Rich Internet Applications) ist eine Spezifikation des W3C, die HTML um zusätzliche Attribute erweitert. Diese Attribute helfen assistiven Technologien (insbesondere Screenreadern), den Zweck und Zustand von Elementen zu verstehen.

ARIA ändert nicht das visuelle Erscheinungsbild oder Verhalten – es liefert nur zusätzliche Informationen für assistive Technologien.

Die drei Säulen von ARIA

• Roles: Was ist das Element? (button, dialog, navigation)
• Properties: Eigenschaften des Elements (aria-label, aria-describedby)
• States: Aktueller Zustand (aria-expanded, aria-selected, aria-hidden)

Wann ARIA verwenden?

• Bei Custom-Widgets ohne native HTML-Entsprechung
• Für dynamische Inhaltsänderungen (aria-live)
• Um Beziehungen zwischen Elementen zu definieren
• Wenn semantisches HTML nicht möglich ist

Die erste Regel von ARIA

"Wenn du ein natives HTML-Element verwenden kannst, tue es."

Ein echter <button> ist immer besser als ein <div role="button">. ARIA ist eine Ergänzung, kein Ersatz für semantisches HTML.

Häufige ARIA-Attribute

• aria-label: Unsichtbares Label für ein Element
• aria-hidden: Versteckt Element vor Screenreadern
• aria-expanded: Zeigt Auf-/Zugeklappt-Zustand
• aria-live: Kündigt dynamische Änderungen an
• aria-describedby: Verweist auf beschreibenden Text

Fazit

ARIA ist ein mächtiges Werkzeug für Barrierefreiheit – aber mit Vorsicht einzusetzen. Falsch verwendetes ARIA kann mehr schaden als nutzen. Die Devise: So wenig ARIA wie möglich, so viel wie nötig.