Nach dem Barrierefreiheitsstärkungsgesetz (BFSG) und den WCAG 2.1-Richtlinien ist die Verwendung von ARIA-Rollen und -Labels erforderlich, wenn die native HTML-Semantik nicht ausreicht, um assistiven Technologien wie Screenreadern zusätzliche Informationen über die Funktion, den Status oder die Bedeutung eines Elements zu vermitteln. ARIA-Rollen und -Labels sind insbesondere für interaktive Elemente, benutzerdefinierte Widgets, nicht sichtbare Inhalte, komplexe Strukturen und dynamische Inhalte wichtig, um deren Zugänglichkeit zu verbessern. Bei Bildern, die eine funktionale Rolle einnehmen oder keinen sichtbaren Kontext bieten, ist ebenfalls ein entsprechendes ARIA-Label oder eine ARIA-Rolle notwendig. Rein dekorative Bilder sollten mit role=”presentation” oder aria-hidden=”true” markiert werden, um von Screenreadern ignoriert zu werden. Dennoch sollte der Einsatz nativer HTML-Semantik bevorzugt werden, da sie von assistiven Technologien besser unterstützt und weniger fehleranfällig ist.
mehr erfahren
Im Sinne des Barrierefreiheitsstärkungsgesetzes (BFSG) und der WCAG 2.1-Richtlinien müssen ARIA-Rollen und ARIA-Labels für Inhalte verwendet werden, die assistiven Technologien wie Screenreadern zusätzliche semantische Informationen bereitstellen sollen. Dies ist insbesondere dann erforderlich, wenn die native HTML-Semantik nicht ausreicht, um die Funktion, den Status oder die Bedeutung eines Elements zu vermitteln.
Verwendung von ARIA-Rollen und -Labels
ARIA-Rollen und -Labels für interaktive Elemente ohne ausreichende HTML-Semantik
- Benutzerdefinierte Widgets wie Akkordeons, Tabs oder Schalter benötigen ARIA-Rollen (z. B. `role=”button”`) und Zustände (z. B. `aria-expanded`), um ihre Funktion und ihren Status klar zu definieren.
ARIA-Rollen und -Labels für nicht sichtbare oder beschriftete Inhalte:
- Elemente ohne sichtbare Beschriftung benötigen ein `aria-label` oder `aria-labelledby`, um einen zugänglichen Namen bereitzustellen. Dies gilt z. B. für Icons oder Bilder, die als Bedienelemente fungieren.
ARIA-Rollen und -Labels für komplexe Strukturen:
- Inhaltsbereiche wie Tabellen, Listen oder Navigationsmenüs können mit ARIA-Rollen (z. B. `role=”navigation”`) versehen werden, um ihre Struktur und Funktion zu verdeutlichen.
ARIA-Rollen und -Labels für dynamische Inhalte:
- Wenn sich Inhalte dynamisch ändern (z. B. durch AJAX-Updates), können Attribute wie `aria-live` oder `aria-busy` verwendet werden, um Screenreader-Nutzern Änderungen mitzuteilen.
Spezifische Anforderungen für Bilder
Ein Bild muss über eine ARIA-Rolle und/oder ein ARIA-Label verfügen, wenn:
- das Bild eine funktionale Rolle hat: Beispielsweise als Schaltfläche oder Link (`role=”button”` oder `role=”link”`), wobei ein `aria-label` erforderlich ist, um die Funktion zu beschreiben.
- das Bild keinen sichtbaren Kontext bietet: Ein `aria-label` oder `aria-labelledby` ist nötig, wenn das Bild eine Bedeutung vermittelt, die nicht aus dem Kontext ersichtlich ist.
- das Bild rein dekorativ ist: Es sollte mit `role=”presentation”` oder `aria-hidden=”true”` ausgezeichnet werden, damit es von Screenreadern ignoriert wird.
Grundsatz
Wo immer möglich, sollte jedoch native HTML-Semantik Vorrang haben, da diese von assistiven Technologien besser unterstützt wird und weniger fehleranfällig ist.