Tooltip im HTML
Der Hinweis braucht Text und einen Zustand
Hinweisfeld und Schaltfläche: zwei Stellen am Tooltip.
Tooltip-Choreografie
Ein Hinweis, vier Zustände
Hover und Fokus öffnen. Der Zeiger darf hinein. Escape schließt.
Zeigerüber dem Auslöser
Hinweis erscheint
TabFokus am Auslöser
Fokus bleibt am Auslöser
Zeigerüber dem Hinweis
Hinweis bleibt lesbar
EscapeFokus bleibt stehen
Overlay ist weg
aria-describedby="pegel-hinweis"id="pegel-hinweis" role="tooltip"Name: „Pegel, Schaltfläche“
Beschreibung: „Wasserstand am Messpunkt.“
Tooltip, sichtbarer Text oder Dialog?
Muss die Information verstanden werden?
Schreiben Sie sie sichtbar an die Stelle.
Auf Touchgeräten und ohne JavaScript bleibt sie erreichbar.Ist sie kurz und nur ergänzend?
Ein Tooltip kann passen.
Er öffnet automatisch und enthält keine bedienbaren Elemente.Enthält sie Link, Auswahl oder Aktion?
Verwenden Sie einen nichtmodalen Dialog.
Interaktive Inhalte brauchen Fokus und ein bewusstes Öffnen.title enthält nur ergänzende Information, die der Browser darstellt. MDN warnt vor Problemen für Touch, Tastatur und assistive Technik. Nutzen Sie es nicht als einzigen Träger wichtiger Inhalte.
Vollständiges Muster
HTML verbindet, JavaScript steuert
Der Wrapper hält Hover über Auslöser und Hinweis zusammen. Auf Geräten ohne Hover wird der Satz im Layout sichtbar. aria-expanded gehört nicht an dieses Muster.
<span class="tooltip-wrap">
<button type="button" aria-describedby="pegel-hinweis">
Pegel
</button>
<span id="pegel-hinweis" class="tooltip"
role="tooltip">
Wasserstand am Messpunkt.
</span>
</span>.tooltip-wrap {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
}
.tooltip {
max-width: 18rem;
padding: 0.6rem 0.8rem;
border: 2px solid CanvasText;
background: CanvasText;
color: Canvas;
}
.tooltip.is-hidden {
display: none;
}
@media (hover: none) {
.tooltip.is-hidden {
display: block;
position: static;
}
}const wrap = document.querySelector(".tooltip-wrap");
const trigger = wrap.querySelector("button");
const tip = wrap.querySelector('[role="tooltip"]');
let hovering = false;
let focused = false;
let dismissed = false;
function render() {
const closed = dismissed || (!hovering && !focused);
tip.classList.toggle("is-hidden", closed);
}
wrap.addEventListener("pointerenter", () => {
if (!hovering && !focused) dismissed = false;
hovering = true;
render();
});
wrap.addEventListener("pointerleave", () => {
hovering = false;
if (!focused) dismissed = false;
render();
});
trigger.addEventListener("focus", () => {
if (!hovering) dismissed = false;
focused = true;
render();
});
trigger.addEventListener("blur", () => {
focused = false;
if (!hovering) dismissed = false;
render();
});
trigger.addEventListener("keydown", (event) => {
if (event.key !== "Escape") return;
dismissed = true;
render();
});
render();So prüfen Sie es
FokusTab öffnet den Hinweis, ohne den Fokus zu verschieben.
EscapeSchließt den sichtbaren Hinweis bei unverändertem Fokus.
HoverDer Zeiger erreicht den Hinweis, ohne dass er verschwindet.
TouchDie Erklärung steht sichtbar im Layout und braucht kein Hover.
ZoomBei 200 Prozent bleibt der Text vollständig lesbar.
AnsageDer Hinweis folgt als Beschreibung auf den Namen des Auslösers.
Quellen und Vertiefung
- WAI-ARIA APG: Tooltip Pattern Fokus, Escape und
aria-describedby - W3C: Inhalte bei Hover oder Fokus WCAG 1.4.13: ausblendbar, hoverbar, beständig
- MDN: ARIA tooltip role Rolle, Beschreibung und Grenzen des Musters
Aus dem Prüfbericht
Zwei Befunde am Tooltip
Kritisch Das Hinweisfeld ist leer Regel aria-tooltip-name
Ein div mit der Rolle tooltip ohne Text gibt keinen Hinweis. Schreiben Sie den Hinweis direkt hinein.
Kritisch Der unpassende Zustand am Auslöser Regel aria-valid-attr-value
aria-expanded="maybe" ist ungültig. Für einen automatisch erscheinenden Tooltip wird aria-expanded nicht unterstützt; die Beschreibung wird mit aria-describedby verbunden.
Zum Mitnehmen
Der Tooltip, korrigiert
Ein Text, eine Verbindung und ein gültiger Zustand.
Korrektur in 3 Schritten ansehen
Den Hinweis in den Tooltip schreiben
Der Text im Tooltip ist zugleich sein Name. Ein zusätzliches aria-label ist dafür nicht nötig.
KorrekturvergleichSchritt 1 · HTML Vorher
<div id="pegel-hinweis" role="tooltip"></div>Nachher
<div id="pegel-hinweis" role="tooltip"> Pegel bezeichnet den Wasserstand am Messpunkt. </div>Markierte Zeilen wurden geändert
So prüfen Sie es Der Hinweis steht sichtbar im Feld und wird beim Einblenden vorgelesen.
Den Tooltip mit dem Feld verbinden
aria-describedby verweist auf die id des Hinweises. So liest ein Vorleseprogramm den Hinweis nach dem Feldnamen mit.
KorrekturvergleichSchritt 2 · HTML Vorher
<label for="pegel">Pegel</label> <input id="pegel" type="text"> <div id="pegel-hinweis" role="tooltip">Pegel ist der Wasserstand.</div>Nachher
<label for="pegel">Pegel</label> <input id="pegel" type="text" aria-describedby="pegel-hinweis"> <div id="pegel-hinweis" role="tooltip">Pegel ist der Wasserstand.</div>Markierte Zeilen wurden geändert
So prüfen Sie es Setzen Sie den Fokus in das Feld. Nach „Pegel“ folgt der Hinweissatz.
Den unpassenden Zustand entfernen
Ein Tooltip erscheint automatisch bei Hover oder Fokus. Entfernen Sie aria-expanded und verbinden Sie den Hinweis über aria-describedby.
KorrekturvergleichSchritt 3 · HTML Vorher
<button type="button" aria-controls="pegel-hinweis" aria-expanded="maybe"> Hinweis anzeigen </button>Nachher
<button type="button" aria-describedby="pegel-hinweis"> Pegel </button>Markierte Zeilen wurden geändert
So prüfen Sie es Setzen Sie den Fokus auf die Schaltfläche. Der Hinweis erscheint, Escape schließt ihn, der Fokus bleibt stehen.