A: ARIA-tooltip-Knoten benötigen einen zugänglichen Namen (accessible name) (WCAG 4.1.2)

• Bedeutung
• Auswirkung
• Empfehlung
• Beispiele

Stellt sicher, dass jeder ARIA-tooltip Knoten einen zugänglichen Namen (accessible name) besitzt.

Das bedeutet

Ein Element mit role="tooltip" hat keinen programmatisch ermittelbaren Namen. Häufige Ursachen: leeres Tooltip, nur Icon ohne Text, fehlendes aria-label oder fehlendes aria-labelledby.

Auswirkung

Screenreader kündigen lediglich „Tooltip“ an, ohne Inhalt. Nutzerinnen und Nutzer verstehen Hilfehinweise nicht, treffen falsche Entscheidungen und die Seite verstößt gegen WCAG.

Empfehlung

• Tooltip immer mit aussagekräftigem Text füllen (sichtbarer Textknoten).

• Alternativ einen Accessible Name per aria-label oder aria-labelledby vergeben.

• Trigger mit dem Tooltip über aria-describedby verknüpfen.

• title nicht als Ersatz verwenden.

Beispiel

Problematisch

<button aria-describedby="tip-a">Passwort</button>
<div id="tip-a" role="tooltip"></div> <!-- leer, kein Name -->

Besser

<button aria-describedby="tip-b">Passwort</button>
<div id="tip-b" role="tooltip">Mindestens 12 Zeichen, Buchstaben und Zahlen.</div>

Alternative (mit Attribut)

<div role="tooltip" aria-label="Mindestens 12 Zeichen, Buchstaben und Zahlen."></div>

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