1.4.13 Treść spod kursora lub fokusu

/ Jak strony go nie spełniają

• Dymek zrobiony samym CSS na :hover zamyka się, gdy tylko kursor opuści element wywołujący, więc nie da się na niego najechać ani przeczytać go przy dużym powiększeniu.
• Własny dymek zasłania sąsiedni tekst, a Escape nic nie robi, więc jedynym sposobem na pozbycie się go jest odsunięcie kursora.
• Kilkupikselowa przerwa między przyciskiem menu a podmenu sprawia, że podmenu zamyka się, gdy kursor przez nią przechodzi.
• Podpowiedź znika po krótkiej chwili sama, na timerze, bez względu na to, czy czytelnik skończył czytać.
• Dymek otwiera się tylko po najechaniu myszą i nigdy po fokusie z klawiatury, przez co osoby korzystające z klawiatury go nie dostają, a strona nie spełnia też kryterium 2.1.1.

/ Jak sprawdzić samodzielnie

1. Najedź kursorem na każdą kontrolkę, która pokazuje dymek, podmenu albo wyskakujący panel, a potem przesuń kursor z niej na nową treść. Treść ma przez cały czas zostać otwarta.
2. Gdy treść jest widoczna, naciśnij Escape, nie ruszając kursora. Powinna się zamknąć, chyba że niczego nie zasłania albo informuje o błędzie w polu.
3. Przejdź do tych samych kontrolek klawiszem Tab i sprawdź, czy ta sama treść pojawia się po fokusie i zostaje, dopóki nie przejdziesz dalej albo nie naciśniesz Escape.
4. Zostaw kursor w miejscu na dłuższą chwilę i sprawdź, czy treść nie zamyka się sama. Powtórz całość przy powiększonym widoku przeglądarki, gdzie dymek łatwiej zasłania inną treść.

/ Jak to naprawić

• Dodaj obsługę zdarzenia keydown dla klawisza Escape, która ukrywa dymek i zostawia fokus na elemencie wywołującym.
• Ustaw dymek tak, by stykał się z elementem wywołującym, i trzymaj go otwartego, dopóki :hover pasuje do tego elementu albo do samego dymka. Wtedy kursor może na niego przejść.
• Pokazuj treść także po fokusie, a nie tylko po najechaniu (zdarzenia focus i blur albo :focus-visible i :focus-within w CSS), i powiąż ją z elementem wywołującym przez aria-describedby oraz role="tooltip".
• Usuń każdy setTimeout, który chowa treść. Zamykaj ją tylko po zdarzeniu mouseleave, blur, po Escape albo wtedy, gdy informacja przestaje być prawdziwa.
• Dla wszystkiego, co jest dłuższe niż krótka podpowiedź albo zawiera linki, użyj przycisku, który rozwija i zwija treść, zamiast panelu pokazywanego po najechaniu.

/ Co sprawdza nasz skaner

Nasz test tooltip-hover-only wyszukuje elementy z role="tooltip" albo z nazwą klasy zawierającą słowo tooltip. Zgłasza taki element, gdy żadna kontrolka nie wskazuje na niego przez aria-describedby, a element obok niego nie przyjmuje fokusu z klawiatury. Test na nic nie najeżdża kursorem, więc nie wie, czy dymek da się zamknąć klawiszem Escape, wskazać kursorem i czy zostaje otwarty. Te trzy warunki trzeba sprawdzić ręcznie.