Oto i kolejne Wpadki i wypadki! Tym razem krótko o tooltipach.
Tooltipy – małe dymki z podpowiedziami, które najczęściej pokazują się po najechaniu danego elementu interfejsu myszką. Zaryzykowałbym stwierdzenie, iż prawie wszystkie aplikacje internetowe używają jakiegoś rodzaju dymków z podpowiedziami. Zresztą nie tylko one. Sporo aplikacji desktopowych ma jakieś paski narzędiowe, które również takie podpowiedzi zawierają. Ot, choćby Word i jego przyciski do pogrubiania, pochylania i podkreślania tekstu. Nie zawierają żadnego tekstu, jedynie ikonki oznaczające poszczególne funkcje. Dopiero po najechaniu myszką na przycisk pojawia się mała chmurka z nazwą funkcji.
Skoro to tak rozpowszechniony wzorzec, to prawdopodobnie prędzej czy później niemal każdy webdeveloper stanie przed wyzwaniem zaimplementowania go. I prawdopodobnie trafi na atrybut [title], który jest takim natywnym tooltipem w HTML-u:
See the Pen
Tooltip ([title]) by Comandeer (@Comandeer)
on CodePen.
Jednak z tym atrybutem jest jeden zasadniczy problem: działa dobrze tylko i wyłącznie dla osób używających myszki. W praktycznie każdym innym przypadku nie zadziała poprawnie:
- na urządzeniu z dotykowym ekranem nie da się najechać na jakiś element,
- tooltip nie pokaże się po sfocusowania elementu przy pomocy klawiatury,
- niekoniecznie jego treść zostanie odczytana przez czytniki ekranowe.
Z atrybutem [title] jest tak źle, iż nawet specyfikacja HTML odradza jego używania:
Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).
[Poleganie na atrybucie title jest w tej chwili odradzane, ponieważ wiele przeglądarek nie prezentuje tego atrybutu w dostępny sposób wymagany przez tę specyfikację (np. wymagając urządzenia wskazującego, takiego jak mysz, żeby spowodować pokazanie się tooltipu, co wyklucza osoby posługujące się wyłącznie klawiaturą lub użytkowników urządzeń wyłącznie dotykowych, zatem niemal każdego używającego nowoczesnego telefonu lub tabletu).]
Wypada zatem pomyśleć o innym rozwiązaniu. Takim najprostszym mogłoby być zastosowanie dodatkowego elementu (np. spanu) i pokazywanie go po sfocusowaniu przycisku. Dodatkowo należałoby połączyć ten element z przyciskiem przy pomocy atrybutu [aria-labelledyby]:
See the Pen
Tooltip ([title]) by Comandeer (@Comandeer)
on CodePen.
Żeby tooltip pokazywał się zarówno przy najechaniu myszą, jak i po sfocusowaniu przycisku, zostały zastosowane dwie techniki:
- pseudoklasa :focus-within pokaże tooltip za każdym razem, gdy będzie sfocusowane cokolwiek w kontenerze z przyciskiem,
- pseudoklasa :has(:hover) pokaże tooltip za każdym razem, gdy myszka najedzie na dowolny element w kontenerze z przyciskiem.
Powyższe rozwiązanie nie jest, co prawda, idealne, ale zdecydowanie lepsze od natywnego atrybutu [title]:
- na urządzeniu dotykowym tooltip się pokaże, gdy przytrzyma się palec nad przyciskiem,
- sfocusowanie przycisku przy pomocy klawiatury również pokaże tooltip,
- czytniki ekranowe również powinny sobie dobrze poradzić z odczytaniem tooltipa.
Aczkolwiek osobiście powiedziałbym, iż najlepszym sposobem jest… pominięcie tooltipów i umieszczenie etykiety w samym przycisku. Zwłaszcza, iż ikony, które nie są ogólnie znane (jak np. ikona pogrubienia), mogą wprowadzać chaos komunikacji, zamiast go niwelować. A jak komuś jeszcze mało tooltipów, to polecam artykuł Jana Hellbuscha, który wyczerpująco opisuje ich problematykę.
