A: Nutze aria-roledescription für Elemente mit einer semantischen Rolle (WCAG 4.1.2)

Bedeutung
Auswirkung
Empfehlung
Beispiele

Stellt sicher, dass aria-roledescription nur im Zusammenhang mit einer impliziten oder expliziten Rolle verwendet wird.

Das bedeutet

aria-roledescription ergänzt die von Assistive Technologien gesprochene Rollenbezeichnung in Klartext. Es wirkt nur, wenn das Element eine tatsächliche Rolle hat — entweder implizit durch das native HTML oder explizit per role="…". Ohne Rolle oder mit role="none" oder role="presentation" ist es wirkungslos oder irreführend. aria-roledescription ersetzt nie die echte Rolle.

Auswirkung

Fehlt die zugrunde liegende Rolle oder wird sie verschleiert, erhalten Screenreader keine verlässlichen Informationen. Nutzerinnen und Nutzer werden verwirrt, Bedienmuster brechen und es liegt ein Verstoß gegen WCAG vor.

Empfehlung

Zuerst korrektes, natives HTML verwenden.
Falls nötig eine passende role setzen und erst dann sinnvoll aria-roledescription ergänzen.
Beschreibungen kurz, eindeutig und lokalisiert formulieren.
Nie nutzen, um die wahre Rolle zu verstecken oder zu ersetzen.

Beispiel

Problematisch

<!-- Keine Rolle vorhanden -->
<div aria-roledescription="Fortschrittsanzeige"></div>
 
<!-- Rolle bewusst neutralisiert -->
<div role="none" aria-roledescription="Menü">…</div>

Besser

<!-- Implizite Rolle progressbar, ergänzte Beschreibung -->
<progress aria-roledescription="Fortschrittsanzeige" value="50" max="100">50%</progress>
 
<!-- Explizite Rolle mit roledescription -->
<div role="tablist" aria-roledescription="Registerleiste">
  <button role="tab" aria-selected="true">Über uns</button>
  <button role="tab" aria-selected="false">Leistungen</button>
</div>
 
<!-- Nav mit ergänzter Beschreibung und Name -->
<nav aria-roledescription="Hauptnavigation" aria-label="Seitennavigation">…</nav>

Verknüpftes WCAG-Kriterium:
WCAG 4.1.2 - Name, Rolle, Wert