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.