Barrierefreiheit · Prüfpunkt
Wie müssen Tooltips und Einblendungen auf Websites bedienbar sein?
Einblendungen, die bei Mauskontakt oder Tastaturfokus erscheinen — Tooltips, Untermenüs, Info-Blasen — müssen drei Bedingungen erfüllen: Der Besucher kann sie ohne Mausbewegung wieder schließen, meist mit der Escape-Taste. Er kann die Maus auf die Einblendung bewegen, ohne dass sie verschwindet. Und sie bleibt stehen, bis er sie selbst schließt oder weiternavigiert.
Drei Regeln für jede Einblendung
Wer mit starker Bildschirm-Vergrößerung arbeitet, sieht immer nur einen Ausschnitt der Seite. Öffnet sich bei Mauskontakt ein Tooltip, verdeckt er in der vergrößerten Ansicht schnell genau den Text, den der Besucher gerade liest — und ohne Schließmöglichkeit sitzt er fest. Daher die erste Regel: wegschaltbar, typischerweise per Escape-Taste. Die zweite Regel betrifft dieselbe Gruppe: Um eine Einblendung vergrößert zu lesen, muss man die Maus dorthin bewegen können — verschwindet sie beim Verlassen des Auslösers sofort, ist ihr Inhalt unerreichbar. Die dritte Regel verlangt Beständigkeit: Eine Einblendung, die nach wenigen Sekunden von selbst verschwindet, ist für langsame Leser wertlos. Klassische Problemfälle sind selbstgebaute Untermenüs und Info-Symbole in Formularen.
So geht unsere Prüfung mit Einblendungen um
Einblendungen zeigen sich erst im Zusammenspiel: Man muss die Maus über den Auslöser führen, die Escape-Taste drücken, die Verweildauer beobachten. Unser Messkern führt auf Ihrer Seite gezielte, passive Interaktionen aus — er wandert etwa mit dem Tastaturfokus durch die Seite und beobachtet das Verhalten. Ein vollständiges Urteil über alle drei Bedingungen für jede einzelne Einblendung liefert das aber nicht; nach unserem Grundsatz gilt hier ohne echten Nachweis nichts als bestanden. Der Bericht weist das Kriterium deshalb als menschlichen Prüfpunkt aus. Beim Gold-Standard bedient ein Prüfer die Einblendungen Ihrer Seite mit Maus und Tastatur durch und dokumentiert jede, die sich nicht schließen lässt, flüchtig verschwindet oder unberührbar ist.
So gehen Sie es an
- Fahren Sie mit der Maus über die Info-Symbole und Menüs Ihrer Seite und drücken Sie Escape — die Einblendung sollte sich schließen.
- Bewegen Sie die Maus vom Auslöser auf die Einblendung selbst — sie muss dabei geöffnet bleiben.
- Entfernen Sie Zeitschaltungen, die Einblendungen nach wenigen Sekunden automatisch schließen.
- Bevorzugen Sie Klick statt Mauskontakt als Auslöser — was per Klick öffnet und schließt, erfüllt die Regeln fast von selbst.
- Bitten Sie Ihre Agentur, bei Untermenüs und Tooltips auf bewährte, zugängliche Fertigbausteine zu setzen statt auf Eigenbauten.
Häufige Fragen
Was ist ein Tooltip auf einer Website?
Eine kleine Einblendung, die zusätzliche Informationen zeigt, wenn der Besucher mit der Maus über ein Element fährt oder es mit der Tastatur ansteuert — etwa die Erklärung hinter einem Info-Symbol im Formular. Damit alle Besucher sie nutzen können, muss sie schließbar, berührbar und beständig sein.
Warum stören Einblendungen Menschen mit Bildschirm-Vergrößerung besonders?
Wer stark vergrößert, sieht nur einen kleinen Ausschnitt der Seite. Eine Einblendung verdeckt dort schnell genau den Text, der gerade gelesen wird. Lässt sie sich nicht per Tastatur schließen oder verschwindet sie beim Versuch, sie mit der Maus zu erreichen, wird die Seite an dieser Stelle unbenutzbar.
Wie prüft der Prüfservice Tooltips und Einblendungen?
Der Messkern führt passive Interaktionen im echten Browser aus und beobachtet das Verhalten der Seite, etwa beim Wandern des Tastaturfokus. Das vollständige Urteil über Schließbarkeit, Erreichbarkeit und Beständigkeit jeder Einblendung fällt beim Gold-Standard ein Mensch, der die Elemente mit Maus und Tastatur durchbedient und Befunde dokumentiert.
Weiter im Prüfbereich Barrierefreiheit
- Warum muss eine Website ohne Maus bedienbar sein?Jede Funktion einer Website muss per Tastatur erreichbar sein. Was WCAG-Kriterium 2.1.1 verlangt und wie unser Prüfservice es mit echten Tastendrücken misst.
- Was ist eine Tastaturfalle auf einer Website?Eine Tastaturfalle hält den Tastaturfokus gefangen: Wer hineingerät, kommt ohne Maus nie wieder heraus. So erkennen und vermeiden Sie sie.
- Warum brauchen Tastenkürzel aus einem einzelnen Buchstaben eine Abschaltung?Kürzel aus einem einzelnen Buchstaben lösen bei Sprachsteuerung ungewollt aus. WCAG 2.1.4 verlangt: abschaltbar, umbelegbar oder nur bei Fokus aktiv.
- Warum müssen Zeitlimits auf Websites verlängerbar sein?Zeitlimits müssen abschaltbar, anpassbar oder verlängerbar sein, weil Menschen unterschiedlich schnell arbeiten. Das verlangt WCAG-Kriterium 2.2.1.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit — dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.