Du kennst die kleinen Texte, die aufpoppen, sobald die Maus über ein Wort oder ein Symbol fährt. Sie verraten, was eine Abkürzung bedeutet, wofür ein Knopf da ist oder wie ein Feld auszufüllen ist. Für Maus-Nutzer ist das praktisch und schnell.
Das Problem zeigt sich erst, wenn jemand keine Maus führt. Wer mit der Tastatur oder am Touchscreen unterwegs ist, fährt nirgendwo drüber, und der Hilfetext bleibt aus. Du musst nichts programmieren, um das zu beheben. Du musst nur wissen, woran ein guter Hilfetext zu erkennen ist, und das richtige an Deine Agentur weitergeben.
Wann ein Tooltip wirklich hilft
Ein Tooltip ist eine kleine Einblendung, die zusätzliche Erläuterung liefert, ohne die Seite zu überladen. Richtig eingesetzt, hält er den sichtbaren Text schlank und reicht das Detail nur dem nach, der es gerade braucht.
Es gibt gute Gelegenheiten dafür. Eine Abkürzung bekommt ihre ausgeschriebene Bedeutung. Ein Fachbegriff wird in einem Satz erklärt. Ein Symbol ohne Beschriftung verrät beim Verweilen, wofür es steht. In all diesen Fällen ergänzt der Tooltip etwas, das ohnehin schon verständlich ist.
Entscheidend ist die Rolle, die er spielt. Ein Tooltip ist eine Zugabe für den, der mehr wissen möchte. Die Seite muss auch ohne ihn vollständig bedienbar und verständlich bleiben. Sobald er zur einzigen Quelle einer wichtigen Information wird, kippt sein Nutzen ins Gegenteil.
Wer den Hilfetext nie zu sehen bekommt
Ein Tooltip, der nur beim Überfahren mit der Maus erscheint, setzt voraus, dass jeder Besucher eine Maus führt. Das tut längst nicht jeder. Manche steuern Deine Seite allein mit der Tastatur, andere tippen am Smartphone, wieder andere lassen sich alles von einem Screenreader vorlesen.
Am Touchscreen gibt es kein Überfahren. Ein Finger ruht nicht über einem Element, er tippt es an oder eben nicht. Ein Tooltip, der nur auf Hover reagiert, bleibt am Handy unsichtbar oder erscheint erst nach einem Antippen, das eigentlich etwas ganz anderes auslösen sollte. Wie sich Bedien-Elemente am Touchscreen verhalten sollten, vertieft der eigene Beitrag dazu.
Bei der Tastatur ist es ähnlich. Wer durch die Seite tabbt, bewegt keinen Zeiger über die Elemente. Springt der Fokus auf einen Knopf, dessen Erklärung nur im Hover-Tooltip steckt, bleibt diese Erklärung verborgen. Für blinde Besucher kommt hinzu, dass ein rein optisches Aufpoppen gar nicht erst angesagt wird.
Wichtiges gehört nicht allein in den Tooltip
Die wichtigste Regel ist schnell gesagt: Alles, was ein Besucher zum Verstehen oder Ausfüllen wirklich braucht, muss auch ohne Tooltip sichtbar sein. Der Hilfetext darf vertiefen, doch er darf nicht die einzige Stelle sein, an der eine entscheidende Information steht.
Ein häufiges Beispiel sind Formulare. Steht das gültige Passwort-Format nur in einem Tooltip am Eingabefeld, rätselt jeder, der ihn nicht sieht. Besser steht die Anforderung direkt als Hinweis unter dem Feld, wo sie jeder liest. Mehr dazu im Beitrag über Hilfetexte in Formularen.
Genauso wenig sollte ein Bedien-Element seine ganze Bedeutung im Tooltip verstecken. Ein Symbol-Knopf braucht einen festen Namen, den jeder Screenreader vorliest und der unabhängig von der Maus an ihm hängt. Wie ein solcher textloser Knopf seinen vorlesbaren Namen bekommt, beschreibt der Beitrag zu ARIA.
Lang genug sichtbar und gut lesbar
Selbst wer den Tooltip mit der Maus erreicht, hat oft zu wenig davon. Viele Einblendungen verschwinden, sobald der Zeiger ein Stück weiterwandert, manchmal schon nach einem Sekundenbruchteil. Wer langsamer liest, kommt mit dem Satz nicht zu Ende.
Ein guter Hilfetext bleibt stehen, solange der Besucher ihn betrachtet, und schließt sich erst, wenn dieser ihn bewusst verlässt. Er springt nicht weg, kaum dass man hinsieht. Wer mehr Zeit zum Lesen braucht, soll sie bekommen, ohne den Mauszeiger millimetergenau ruhig halten zu müssen. Ein Tooltip, der zu früh verschwindet, wirkt wie ein kleines Zeitlimit beim Lesen.
Auch die Darstellung zählt. Eine winzige Schrift auf blassem Grund ist für viele kaum zu entziffern. Der eingeblendete Text gehört groß genug und mit deutlichem Kontrast gesetzt, damit er sich ohne Mühe lesen lässt. Sonst erreicht er auch den nicht, der ihn eigentlich sieht.
Auch mit Tastatur und Touch erreichbar
Ein Hilfetext sollte auf jedem Weg erscheinen, auf dem ein Besucher ein Element ansteuert. Springt der Tastatur-Fokus auf ein Symbol, soll die zugehörige Erläuterung auftauchen, genau wie beim Überfahren mit der Maus. So bekommt auch der die Information, der ohne Maus arbeitet.
Am Touchscreen führt der Weg über eine sichtbare Lösung. Statt eines Hinweises, der nur bei ruhendem Finger käme, hilft ein kleines Frage-Symbol zum Antippen, das den Text dauerhaft einblendet. So lässt sich die Zusatz-Info bewusst aufrufen, statt auf eine Hover-Geste zu warten, die es am Handy nicht gibt.
Wer mit dem Ohr statt mit den Augen navigiert, braucht zusätzlich, dass der Hilfetext vorgelesen wird. Eine rein optische Einblendung bleibt für einen Screenreader stumm, wenn sie nicht im vorlesbaren Aufbau der Seite verankert ist. Das ist Sache Deiner Agentur, gehört aber klar zum Auftrag.
Woran Du einen guten Hilfetext erkennst
Den wichtigsten Test machst Du selbst, ganz ohne Werkzeug. Leg die Maus zur Seite und geh mit der Tab-Taste durch Deine Seite. Erreichst Du jedes Element, das eine Erklärung trägt, und erscheint die Erklärung dabei auch? Wenn ein Tooltip stumm bleibt, sobald die Maus fehlt, hast Du eine Baustelle gefunden.
Den zweiten Test machst Du am Handy. Tippe die Stellen an, die am Rechner einen Hover-Hinweis zeigen. Kommt die Information auch hier an, oder passiert nichts? Und prüfe nebenbei, ob der eingeblendete Text lange genug stehen bleibt, um ihn in Ruhe zu Ende zu lesen.
Aus den beiden Tests ergeben sich die Fragen für Deine Agentur. Erscheint jeder Hilfetext auch mit Tastatur und am Touchscreen? Steht jede wichtige Information zusätzlich sichtbar auf der Seite? Bleibt die Einblendung lesbar und lange genug stehen? Mit diesen drei Punkten hast Du ein Abnahme-Kriterium, das jeder nachprüfen kann.
Fazit — Hilfe, die ankommt
Ein Tooltip ist eine freundliche Geste, solange er eine Zugabe bleibt und jeden erreicht, der ihn braucht. Sobald wichtige Information nur dort steckt oder nur die Maus ihn hervorlockt, wird aus der Hilfe eine Hürde für einen Teil Deiner Besucher.
Mach die beiden kleinen Tests einmal selbst, mit Tastatur und am Handy. Du siehst in wenigen Minuten, welche Hilfetexte ankommen und welche ins Leere laufen, und gibst Deiner Agentur eine klare Liste mit auf den Weg.