1.4.13 Treść po najechaniu lub fokusie

Krótko

Jeśli po najechaniu myszą albo po fokusie pojawia się dodatkowa treść, użytkownik musi móc ją przeczytać, zamknąć i nie stracić jej przypadkowo.

Problem w praktyce

Użytkownik najeżdża kursorem na ikonę pomocy albo przechodzi klawiaturą do pola formularza. Pojawia się dymek z ważną informacją, ale zasłania inne treści, znika przy próbie przesunięcia kursora albo nie da się go zamknąć bez utraty fokusu.

Osoba korzystająca z powiększenia, klawiatury lub czytnika ekranu może nie mieć realnej możliwości skorzystania z tej informacji. To kryterium dotyczy dodatkowej treści pojawiającej się po hoverze albo fokusie, a nie samego wyglądu fokusu czy kolejności nawigacji.

Kogo to dotyczy

• Osób słabowidzących korzystających z powiększenia ekranu, dla których dymek może zasłonić dużą część widoku.
• Osób korzystających z klawiatury, które muszą dostać tę samą treść bez myszy.
• Osób z niepełnosprawnościami ruchowymi, które mogą wolniej przesuwać wskaźnik albo fokus.
• Osób korzystających z alternatywnych urządzeń wskazujących.
• Osób z trudnościami poznawczymi, które potrzebują więcej czasu na przeczytanie podpowiedzi.
• Użytkowników mobilnych i osób pracujących na małych ekranach.

Dobry przykład

• Tooltip można zamknąć klawiszem Escape.
• Tooltip nie znika, gdy użytkownik przesuwa kursor z elementu na treść tooltipa.
• Tooltip nie zasłania krytycznej treści.
• Dodatkowa treść jest dostępna po fokusie klawiatury, nie tylko po hoverze.
• Ważna instrukcja formularza jest widoczna stale albo dostępna w sposób przewidywalny.
• Użytkownik ma czas, żeby przeczytać treść.

Zły przykład

• Tooltip pojawia się tylko po hoverze, ale nie po fokusie.
• Dymek znika, gdy użytkownik próbuje na niego najechać.
• Dymek zasłania pole formularza albo ważną informację.
• Dymka nie da się zamknąć bez przesunięcia myszy.
• Dodatkowa treść pojawia się automatycznie i przykrywa inne elementy.
• Podpowiedź zawiera ważną instrukcję, ale nie jest dostępna dla klawiatury.

Trzy warunki z WCAG

Odrzucalna

Użytkownik może zamknąć dodatkową treść bez przesuwania kursora albo fokusu, na przykład klawiszem Escape. Wyjątkiem jest sytuacja, w której treść nie zasłania ani nie zastępuje niczego ważnego.

Wskazywalna

Jeśli treść pojawia się po hoverze, użytkownik może przesunąć kursor na tę treść bez jej zniknięcia.

Trwała

Treść pozostaje widoczna, dopóki użytkownik nie zabierze kursora lub fokusu, nie zamknie jej albo treść nie przestanie być potrzebna.

Przykłady kodu

.help-trigger:hover + .tooltip,
.help-trigger:focus-visible + .tooltip,
.tooltip:hover {
  display: block;
}

.help-trigger:hover + .tooltip {
  display: block;
}

document.addEventListener("keydown", function (event) {
  if (event.key === "Escape") {
    closeTooltip();
  }
});

Przykład graficzny

To jest statyczna makieta edukacyjna, a nie działający tooltip. Pokazuje różnicę między problematycznym i przewidywalnym zachowaniem dodatkowej treści.

Jak sprawdzić

1. Znajdź elementy, które pokazują dodatkową treść po hoverze albo fokusie.
2. Sprawdź tooltipy, dymki pomocy, menu, podglądy kart, opisy ikon i podpowiedzi formularzy.
3. Przejdź stronę myszą i klawiaturą.
4. Sprawdź, czy treść pojawia się także po fokusie klawiatury, jeśli jest potrzebna użytkownikom klawiatury.
5. Sprawdź, czy dodatkową treść da się zamknąć bez przesuwania myszy albo fokusu, jeśli zasłania inne elementy.
6. Sprawdź, czy można przesunąć kursor na dodatkową treść bez jej zniknięcia.
7. Sprawdź, czy treść pozostaje widoczna wystarczająco długo.
8. Sprawdź stronę przy powiększeniu 200% i 400%.
9. Sprawdź, czy tooltip nie zasłania pola, którego dotyczy.
10. Nie oceniaj wyłącznie automatem. To kryterium wymaga testu manualnego.

Co sprawdzi automat, a czego nie

Automat może wykryć

• Część problemów z elementami interaktywnymi bez nazwy.
• Część problemów z fokusem.
• Niektóre błędy struktury komponentów.
• Czasem elementy ukrywane lub pokazywane w CSS.

Automat nie oceni pewnie

• Czy tooltip da się zamknąć.
• Czy znika przy próbie najechania.
• Czy zasłania ważną treść.
• Czy działa dla użytkownika klawiatury.
• Czy jest wystarczająco trwały.
• Czy zachowanie jest przewidywalne przy powiększeniu.

Typowe błędy

• Tooltipy dostępne tylko na hover.
• Ważne instrukcje ukryte w dymkach.
• Podpowiedzi formularza znikające za szybko.
• Dymki zasłaniające pole formularza.
• Tooltipy niemożliwe do odczytania przy powiększeniu.
• Brak obsługi Escape.
• Tooltipy ukrywane natychmiast po przesunięciu kursora.
• Dymki projektowane tylko pod mysz, bez klawiatury.

Powiązane kryteria

• 1.4.10 Dopasowanie do ekranu
• 1.4.11 Kontrast elementów nietekstowych
• 2.1.1 Klawiatura
• 2.1.2 Brak pułapki na klawiaturę
• 2.4.3 Kolejność fokusu
• 2.4.7 Widoczny fokus
• 3.3.2 Etykiety lub instrukcje

Źródła

• WCAG 2.2: 1.4.13 Content on Hover or Focus (otwiera się w nowym oknie)
• Understanding WCAG 1.4.13 (otwiera się w nowym oknie)
• How to Meet WCAG 1.4.13 (otwiera się w nowym oknie)