ARIA-Attribute helfen dabei, moderne Websites barrierefrei zu machen. Sie ergänzen HTML-Elemente um zusätzliche Informationen für Screenreader und andere assistive Technologien.
Ein klassisches Beispiel ist ein ausklappbares Menü, das mit aria-expanded angibt, ob es gerade geöffnet oder geschlossen ist. So verstehen auch Nutzer mit Screenreader, was passiert – selbst wenn sie es nicht sehen können.
Häufig verwendete ARIA-Attribute
aria-label: gibt eine unsichtbare, aber sprechende Bezeichnungaria-hidden: blendet Elemente gezielt für Screenreader ausaria-expanded: beschreibt den Zustand eines Toggles oder Menüsaria-live: zeigt, dass sich Inhalte dynamisch ändernrole="button": weist einem Element eine bestimmte Funktion zu
Diese Attribute sind Teil der ARIA-Spezifikation (Accessible Rich Internet Applications) und bauen auf sauberem HTML auf.
Nicht ohne Konzept einsetzen
ARIA ist kein Ersatz für gutes Markup. Wer Semantic HTML korrekt nutzt, braucht viele dieser Attribute oft gar nicht. Schlechter oder übermäßiger Einsatz kann Barrieren sogar verschärfen.
Der Klicklounge-Tipp: ARIA-Attribute sind sinnvoll, wenn sie gezielt eingesetzt werden. Wir beraten Sie gerne, ob Ihre Website technisch barrierefrei ist – und zeigen, wie man ARIA richtig anwendet.