1.4.13Poziom AA1.4 Distinguishable

Treść spod kursora lub fokusu

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the additional content is dismissible, hoverable, and persistent.

Zobacz specyfikację W3C ↗

Co to oznacza

Zrozumieć KS Treść spod kursora lub fokusu | Jak spełnić KS Treść spod kursora lub fokusu (Poziom AA) Gdy jakaś treść staje się widoczna po otrzymaniu kursora lub fokusu klawiatury, a po ich usunięciu znika, spełnione są poniższe warunki: Odrzucone Istnieje mechanizm umożliwiający odrzucenie dodatkowej treści bez przesuwania wskaźnika myszy lub fokusu klawiatury, chyba że dodatkowa treść przekazuje błąd wprowadzanych danych lub nie przesłania ani nie zastępuje innej treści; Wskazywane Jeśli wskaźnik myszy (hover) może wyzwolić dodatkową treść, wówczas wskaźnik może zostać przeniesiony na dodatkową treść bez znikania dodatkowej treści; Trwałe Dodatkowa treść pozostaje widoczna do momentu usunięcia wyzwalacza aktywacji lub fokusu, użytkownik odrzuca go lub jego informacje nie są już ważne. Wyjątek: Wizualna prezentacja dodatkowej treści jest kontrolowana przez program użytkownika i nie jest modyfikowana przez autora. Uwaga Przykłady dodatkowej treści kontrolowanej przez program użytkownika obejmują podpowiedzi przeglądarki utworzone przy użyciu atrybutu HTML title . Uwaga Niestandardowe podpowiedzi, podmenu i inne niemodalne wyskakujące okienka wyświetlane w dymku i fokusie to przykłady dodatkowej treści objętej tym kryterium. 2. Funkcjonalność Zapewnij, aby komponenty interfejsu użytkownika i nawigacja były możliwe do użycia. Wytyczna 2.1 Dostępność z klawiatury Zapewnij dostępność wszystkich funkcjonalności za pomocą klawiatury.

Failing example

/* Fails: tooltip disappears the moment pointer moves off trigger */
.trigger:hover .tooltip { display: block; }
/* Moving to read the tooltip causes hover to leave trigger */

How to fix it

/* Pass: tooltip stays visible when pointer moves onto it */
.trigger:hover .tooltip,
.tooltip:hover {
  display: block;
}
/* Also add pointer-events:none only when tooltip must not
   intercept clicks — remove it here since it must be hoverable */

Jak A11yRisk to wykrywa

A11yRisk wykrywa to kryterium automatycznie.

Skanuj swoją witrynę pod kątem tego naruszenia →