Dostępne podpowiedzi (tooltip)

Sklepy używają tooltipów przy ikonie „i” obok informacji o VAT, do wyjaśnienia czasu dostawy, przy przyciskach z ikonami w nagłówku i do wskazówek o rozmiarach. Wyglądają prosto, ale tooltip pojawiający się tylko po najechaniu myszą jest niewidoczny dla użytkowników klawiatury i ekranów dotykowych, a taki, który zasłania treść i nie da się go zamknąć, narusza WCAG. Ta strona należy do serii dostępne wzorce interfejsu.

Kiedy używać tooltipa

APG opisuje tooltip jako „wyskakujące okienko wyświetlające informacje związane z elementem, gdy element otrzymuje fokus z klawiatury” lub najedzie na niego mysz. Należy go używać tylko do krótkiego, nieistotnego opisu kontrolki – etykiety przycisku z ikoną, wskazówki. Ważne informacje (ceny, warunki dostawy, zasady zwrotów) powinny być w widocznym tekście. Treści interaktywne należą do disclosure lub okna dialogowego.

Uwaga: APG mówi, że wzorzec tooltip to „praca w toku; nie ma jeszcze konsensusu grupy roboczej”. Należy traktować go jako wskazówkę i testować z prawdziwą technologią wspomagającą.

Kryteria WCAG

• 1.4.13 Treść spod kursora lub fokusu (AA). Treść pojawiająca się po najechaniu lub fokusie musi być:

  • możliwa do zamknięcia – „dostępny jest mechanizm zamknięcia dodatkowej treści bez przesuwania kursora ani fokusu klawiatury” (zwykle Escape), chyba że treść informuje o błędzie wprowadzania;
  • możliwa do najechania – kursor może przejść nad tooltip bez jego zniknięcia;
  • trwała – pozostaje, dopóki wyzwalacz nie zostanie usunięty, użytkownik jej nie zamknie albo informacja nie przestanie być aktualna.

  Kryterium nie obejmuje treści, której prezentację kontroluje przeglądarka; głównym przykładem W3C jest podpowiedź przeglądarki z atrybutu title.

• 2.1.1 Klawiatura (A): to, co pojawia się po najechaniu, musi być też osiągalne z klawiatury.

• 4.1.2 Nazwa, rola, wartość (A): przycisk z ikoną potrzebuje nazwy; sam tooltip nie jest wiarygodną nazwą.

• 1.4.3 Kontrast (minimum) (AA): tekst tooltipa wymaga 4,5:1.

• 2.4.11 Fokus niezasłonięty (minimum) (AA): tooltip nie może całkowicie zasłaniać elementu z fokusem.

Przykład kodu

<!-- Tooltip jako opis kontrolki przyjmującej fokus (wzorzec APG) -->
<button type="button" class="icon-btn" aria-describedby="tip-compare">
  <svg aria-hidden="true" focusable="false"><use href="#icon-compare"></use></svg>
  <span class="visually-hidden">Porównaj</span>
</button>
<div id="tip-compare" role="tooltip" hidden>Dodaj do listy porównania</div>

<!-- Toggletip: informacja otwierana kliknięciem, nie najechaniem -->
<button type="button" aria-expanded="false" aria-controls="vat-info">
  <span class="visually-hidden">O VAT</span>
  <svg aria-hidden="true" focusable="false"><use href="#icon-info"></use></svg>
</button>
<p id="vat-info" hidden>Ceny zawierają VAT obowiązujący w kraju dostawy.</p>

Skrypt tooltipa: pokazuje go przy focus i mouseenter, ukrywa przy blur oraz mouseleave zarówno z wyzwalacza, jak i z tooltipa (aby kursor mógł na niego przejść), a także po Escape, gdy fokus zostaje na wyzwalaczu. APG mówi: „widżety tooltip nie otrzymują fokusu” i „fokus pozostaje na elemencie wyzwalającym, gdy tooltip jest wyświetlany”. Wyzwalacz odwołuje się do tooltipa przez aria-describedby.

Drugi przykład to przycisk disclosure, ten sam wzorzec APG, z którego zbudowane są akordeony: przełącza aria-expanded, a treść pozostaje widoczna, dopóki użytkownik jej nie zamknie – lepszy dla ekranów dotykowych i dłuższych tekstów.

Obsługa klawiaturą

Typowe błędy w sklepach internetowych

• Tooltipy tylko po najechaniu na ikony „i” będące elementami span, więc użytkownicy klawiatury i ekranów dotykowych nigdy nie widzą informacji o dostawie czy VAT.
• Ważne warunki wyłącznie w tooltipie: terminy zwrotów, koszt wysyłki, „cena za kilogram”.
• Tooltip znika, gdy kursor przesuwa się w jego stronę, więc osoby korzystające z powiększenia ekranu nie mogą go przeczytać.
• Brak Escape, a tooltip zasłania następne pole formularza.
• Linki w tooltipie („Dowiedz się więcej”), które nigdy nie otrzymają fokusu.
• Przyciski z ikoną nazwane tylko przez title, który nie pokazuje się przy fokusie ani na dotyk.
• Tekst tooltipa o niskim kontraście, np. jasnoszary na białym.

Co wychwytuje kontrola automatyczna, a co wymaga testu ręcznego

Wszystkie to karty z naszej biblioteki reguł. Kryterium 1.4.13 nie da się przetestować automatycznie: skan widzi stronę taką, jaka się ładuje, a nie to, co pojawia się po najechaniu lub fokusie. Test ręczny: proszę przejść Tabem do każdego wyzwalacza, sprawdzić, czy tooltip się pojawia, nacisnąć Escape, najechać na niego myszą, powiększyć do 200% i sprawdzić, czy nadal jest czytelny. Rozszerzenie do przeglądarki pomoże w pozostałej części strony.

Warto zacząć od darmowej kontroli jednej strony. To automatyczna kontrola, a nie pełny audyt.

Najczęstsze pytania

Które kryterium WCAG dotyczy tooltipów?

1.4.13 Treść spod kursora lub fokusu (poziom AA). Treść pojawiająca się po najechaniu lub fokusie musi dać się zamknąć bez przesuwania kursora ani fokusu, musi umożliwiać najechanie na nią kursorem oraz pozostawać widoczna, dopóki użytkownik nie usunie wyzwalacza lub jej nie zamknie.

Czy atrybut title to dostępny tooltip?

Podpowiedź przeglądarki z atrybutu title jest poza zakresem 1.4.13, bo kontroluje ją przeglądarka. Nadal jednak jest to słaby sposób przekazywania ważnych informacji: nie pokazuje się przy fokusie z klawiatury ani na ekranach dotykowych.

Czym jest wzorzec tooltip z APG?

Wyskakujące okienko z role="tooltip", które pojawia się, gdy element otrzymuje fokus z klawiatury lub najedzie na niego kursor; wyzwalacz odwołuje się do niego przez aria-describedby, tooltip nigdy nie przyjmuje fokusu, a Escape go zamyka. APG zaznacza, że wzorzec jest nadal w opracowaniu i nie ma konsensusu grupy roboczej.

Czy tooltip może zawierać linki lub przyciski?

Nie. Tooltip nigdy nie otrzymuje fokusu, więc elementów interaktywnych w jego wnętrzu nie da się osiągnąć. Zamiast tego należy użyć disclosure lub niemodalnego okna dialogowego otwieranego kliknięciem.

Czy kontrola automatyczna przetestuje tooltipy?

Znajduje elementy role="tooltip" bez nazwy i przyciski z ikoną bez nazwy. To, czy tooltip pojawia się przy fokusie, pozostaje po najechaniu i zamyka się klawiszem Escape, wymaga testu ręcznego.

Źródła

• W3C WAI, APG Tooltip pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
• W3C, Understanding 1.4.13 Content on Hover or Focus: https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html
• W3C WAI, APG Disclosure pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/