ARIA Roles weisen HTML-Elementen eine konkrete Funktion oder Rolle zu, die von assistiven Technologien wie Screenreadern erkannt wird. Sie sind besonders wichtig, wenn native HTML-Tags nicht verwendet werden können oder eigene UI-Elemente erstellt wurden.
Wofür werden ARIA Roles verwendet?
Sie helfen dabei, benutzerdefinierte Komponenten – z. B. ein individuell gestaltetes Modal – korrekt zu interpretieren.
Beispiele für ARIA Roles:
role="button"(Element wird als Schaltfläche erkannt)role="dialog"(Kennzeichnung als Dialogfenster)role="navigation"(Bereich ist eine Navigation)
Diese Angaben erleichtern es assistiven Technologien, die Seitenstruktur korrekt zu vermitteln – besonders bei interaktiven Anwendungen oder dynamischen Inhalten.
Der Klicklounge-Tipp: ARIA Roles sollten gezielt und sparsam eingesetzt werden. Nutzen Sie bevorzugt semantisch korrektes HTML – das ist nicht nur zugänglicher, sondern auch besser für SEO.