Praxisleitfaden Tooltips zugänglich benennen
Leere Tooltips verständlich benennen
Fehlenden Hinweistext erkennen, ergänzen und an derselben Fundstelle erneut prüfen.
aria-tooltip-nameWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-tooltip-name.html
Befund einordnen
Eine Tooltip-Rolle ohne Hinweis
Erkannter Befund
Das fällt auf
aria-tooltip-name meldet .muehlen-schalter [role="tooltip"]: kein zugänglicher Name.So ist es einzuordnen
Im alten Steuerpult am Mühlgraben ist ein leeres div als Tooltip ausgezeichnet. Es enthält weder lesbaren Text noch eine alternative Benennung. Die Rolle allein vermittelt keinen Hinweis.
Das bedeutet es für die Nutzung
Wer die Seite mit einem Screenreader nutzt, erhält aus diesem Element keine Erklärung. Auch visuell bleibt die dafür vorgesehene Fläche leer.
- Regel
aria-tooltip-name- Referenz
- WCAG 4.1.2
Diagnose am Tooltip
Rolle: tooltip
Textinhalt: leer
Zugänglicher Name: fehlt
Axe: aria-tooltip-name verletztWelche Information soll der Tooltip liefern?
Klären Sie zuerst die Funktion des Hinweises und seine Beziehung zum auslösenden Element.
Fundstelle ansehen
Der leere Hinweis im vollständigen Steuerpult
Der Ausschnitt zeigt Überschrift, Beschreibung und die gesamte Elementreihe. Die Markierung ordnet den Tooltip zwischen den anderen Feldern ein.
Die markierte leere Fläche soll einen Hinweis tragen. Im reparierten Zustand steht dort die Erklärung zum Pegel. Das statische Beispiel belegt die Benennung, keine funktionierende Einblendung.
Text ergänzen
Den Hinweis direkt im Tooltip hinterlegen
Der vorhandene Tooltip erhält lesbaren Text. Damit steht derselbe Hinweis visuell und als Namensquelle zur Verfügung. Für diese Korrektur ist kein zusätzliches aria-label nötig.
Fundstelle zuordnen
Ordnen Sie den Vorher-Code dem betroffenen Element Ihrer Website zu.
Änderung umsetzen
In Ihrer Komponente Bearbeiten Sie das Hinweistext-Feld der Tooltip-Komponente und prüfen Sie die gerenderte Ausgabe. Bei einem echten Popup muss das auslösende Element den Tooltip außerdem über aria-describedby referenzieren.
KorrekturvergleichHTML des betroffenen Elements Vorher
<div role="tooltip"></div>Nachher
<div role="tooltip"> Pegel bezeichnet den Wasserstand. </div>Markierte Zeilen wurden geändert
Änderung nachprüfen
Prüfen Sie die geänderte Seite erneut mit dem Scanner und kontrollieren Sie das Element im Nutzungskontext.
Im Projekt umsetzen
Textquelle und Zuordnung zusammen prüfen
Ein benannter Tooltip braucht im produktiven Einsatz einen nachvollziehbaren Auslöser und verständlichen Inhalt.
- 1
Formulieren Sie den Hinweis passend zum auslösenden Element; „Tooltip“ oder „Information“ erklärt dessen Bedeutung nicht.
- 2
Halten Sie den Text im Tooltip für Hilfstechnik verfügbar. aria-hidden am Inhalt kann die Namensquelle entfernen.
- 3
Verknüpfen Sie einen eingeblendeten Tooltip mit einer eindeutigen ID und aria-describedby am Auslöser.
- 4
Prüfen Sie übersetzte und dynamisch geladene Texte: Ein leeres Sprachfeld darf nicht wieder einen namenlosen Tooltip erzeugen.
Fehlversuche vermeiden
Was den Befund nur verdeckt
Nur den Auslöser benennen
Ein aria-label am Button gibt dem separaten leeren Tooltip keinen Namen. Prüfen Sie das vom Scanner markierte Element.
Eine leere Referenz verwenden
aria-labelledby hilft nicht, wenn die referenzierte ID fehlt oder ihr Element keinen auswertbaren Text enthält.
Sichtbaren Text überschreiben
Ein zusätzliches aria-label kann den Namen aus dem Inhalt ersetzen. Verwenden Sie keine abweichende Kurzbezeichnung, die die eigentliche Erklärung verschleiert.
Namensprüfung mit Bedienbarkeit gleichsetzen
Ein bestandener Test zeigt nicht, ob der Tooltip per Tastatur erscheint, sich schließen lässt oder lange genug lesbar bleibt.
Dasselbe Element besteht die Namensprüfung
Nach dem ergänzten Text liefert Axe an genau diesem Tooltip einen Pass für aria-tooltip-name. Der Tooltip bleibt vorhanden; nur sein Textinhalt wurde ergänzt.
Der Nachweis gilt für den Namen dieses einen Tooltips. Die übrigen Fehler der Kalibrierseite und das Einblendungs- und Fokusverhalten sind damit nicht geprüft.
Verifizierter Zustand
Rolle: tooltip
Namensquelle: lesbarer Textinhalt
Name: Pegel bezeichnet den Wasserstand.
Axe: aria-tooltip-name bestandenPrüfgrenze kennen
Benennung automatisch, Nutzung zusätzlich prüfen
Die Regel untersucht den Namen vorhandener Tooltip-Elemente. Sie bewertet keinen vollständigen Bedienablauf.
Automatisch prüfbar
- Fehlenden zugänglichen Namen an role="tooltip" erkennen
- Fehlende oder leere Namensquellen an der Fundstelle ausweisen
- Den ergänzten Text mit derselben Regel erneut prüfen
Im Kontext zu entscheiden
- Inhalt und Auslöser fachlich zuordnen
- Einblenden bei Tastaturfokus und Mausbedienung sowie Schließen mit Escape prüfen
- Lesbarkeit, Verweildauer und Screenreader-Ausgabe im tatsächlichen Ablauf prüfen