Wróć do wszystkich kryteriów

1.4.13 Treść przy wskazaniu lub fokusie (ang.) Content on Hover or Focus

Specjalizacje:

  • Designer
  • Deweloper

Elementy:

  • Dialogi i warstwy
  • Przyciski i kontrolki

Poziomy:

  • AA

Spis treści

    Istota i cel kryterium

    Kryterium to dotyczy komponentów interfejsu, które nie są widoczne na starcie, ale pojawiają się w wyniku najechania myszą ((ang.) hover) lub ustawienia fokusu klawiatury ((ang.) focus). Celem jest zapewnienie pełnej kontroli nad treścią, aby mógł ją swobodnie przeczytać i zamknąć, gdy przeszkadza w odbiorze strony. Dotyczy to przede wszystkim (ang.) tooltips, podmenu oraz innych nie-modalnych okienek typu (ang.) pop-up.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#content-on-hover-or-focus

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#tresc-spod-kursora-lub-fokusu

    Słownik pojęć

    Dodatkowa treść
    –

    Informacja pojawiająca się „nad” elementem wyzwalającym (nie dotyczy to np. linków (ang.) skip links, które stają się widoczne po otrzymaniu fokusu).

    Możliwość interakcji
    –

    Treść musi pozwalać na interakcję, jeśli zawiera np. odnośniki lub przyciski.

    Wpływ na dostępność (Kogo wspierasz?)

    • Użytkownicy lup ekranowych: Osoby powiększające obraz potrzebują możliwości przesunięcia wskaźnika nad (ang.) tooltip, aby go przeczytać, bez obawy, że ten zniknie w trakcie ruchu myszą.
    • Osoby z niepełnosprawnościami ruchowymi: Zapewnienie, że treść nie znika zbyt szybko, pozwala osobom o mniejszej precyzji manualnej na interakcję z elementami wewnątrz dymka.
    • Osoby z zaburzeniami poznawczymi: Stałość komunikatu daje im niezbędny czas na przetworzenie informacji i zapobiega stresowi wywołanemu przez uciekający tekst.
    • Użytkownicy z dużymi kursorami: Powiększone systemowo wskaźniki mogą zasłaniać treść; możliwość najechania na dymek pozwala im go „odsłonić”.

    Zasady wdrażania i wymagania techniczne

    Wdrażając dynamiczną treść, musisz spełnić trzy fundamentalne warunki:

    • Możliwość zamknięcia ((ang.) Dismissible): Użytkownik musi móc ukryć nową treść bez poruszania myszą czy zmiany fokusu, np. klawiszem ESC. Wyjątkiem jest sytuacja, gdy treść nie zasłania niczego istotnego (oprócz białych znaków) lub jest błędem walidacji.
    • Możliwość najechania ((ang.) Hoverable): Kursor myszy musi móc swobodnie przejść z przycisku (wyzwalacza) na samą nową treść; dymek musi wtedy pozostać widoczny.
    • Możliwość zachowania ((ang.) Persistent): Treść musi być widoczna, dopóki użytkownik jej nie zamknie, nie odjedzie kursorem/fokusem z obu elementów lub informacja nie stanie się nieaktualna.

    Wyjątki i sytuacje szczególne

    • Kontrola przez (ang.) User Agent: Kryterium nie dotyczy domyślnych dymków przeglądarki (np. atrybut <title>), których autor strony nie stylował za pomocą CSS.
    • Błędy wprowadzania: Komunikaty o błędach w formularzach nie muszą być łatwo usuwalne, jeśli nie zasłaniają innych treści.
    • Niezbędna dodatkowa treść: Treści niezbędne, których usunięcie zniszczyłoby funkcjonalność lub sens przekazu nie są objęte tym kryterium.

    Przykłady implementacji

    Najczęstsze błędy

    • F95: Treść wyświetla się po najechaniu, ale znika przy próbie najechania kursorem na nią samą.
    • Zbyt szybkie zniknięcie: Automatyczne zamykanie dymka po upływie kilku sekund bez interakcji użytkownika.
    • Brak obsługi klawiatury: Treść pojawia się pod myszą, ale nie reaguje na fokus klawiatury.
    • Zasłanianie tekstu: (ang.) Tooltip pojawia się bezpośrednio nad tekstem, który użytkownik czyta, i nie można go zamknąć bez ucieczki kursorem na drugą stronę ekranu.
    • Brak obsługi ESC: W przypadku korzystania z oprogramowania powiększającego, klawisz ESC często stanowi jedyny sposób na zamknięcie dymka informacyjnego, który przesłania pole widzenia.

    Najlepsze praktyki

    • Stosuj (ang.) ARIA: Wykorzystaj role takie jak role="tooltip" oraz atrybuty powiązań aria-describedby, aby czytniki ekranu wiedziały, co się pojawiło.
    • Zarządzaj fokusem: Jeśli w (ang.) popup lub (ang.) tooltip są linki, upewnij się, że można do nich dojść klawiszem Tab.
    • Unikanie (ang.) Hover: Rozważ, czy treść naprawdę musi pojawiać się przy najechaniu. Najbardziej dostępnym wzorcem jest kliknięcie (ang.) Click-to-reveal.
    • Sąsiedztwo w kodzie: Umieszczaj dodatkową treść w DOM bezpośrednio po elemencie wyzwalającym, aby ułatwić nawigację czytnikom ekranu.

    Metody testowania

    • Narzędzie deweloperskie (ang.) Developer Tools: Zweryfikuj w drzewie DOM, czy treść pojawia się poprawnie i czy nie jest usuwana zbyt wcześnie po zmianie stanów pseudoklas.
    • NVDA: Uruchom czytnik ekranu i sprawdź, czy po ustawieniu fokusu na elemencie wyzwalającym treść pomocnicza jest odczytywana automatycznie.
    • (ang.) WAVE Evaluation Tool: Wykorzystaj narzędzie do identyfikacji błędów w strukturze komponentów wyskakujących i ich powiązań z polami.
    • Testowanie manualne: Spróbuj najechać myszą na (ang.) tooltip i sprawdź, czy pozostaje widoczny. Następnie spróbuj go zamknąć klawiszem ESC bez poruszania myszą.
    • ANDI.js: Użyj modułu do sprawdzania elementów interaktywnych, aby zweryfikować, czy dynamiczna treść posiada odpowiednie etykiety tekstowe dostępne dla technologii wspomagających.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 5 interaktywnych elementów. Twoim zadaniem jest sprawdzenie, czy pojawiająca się treść spełnia 3 warunki WCAG 1.4.13:

    1. Możliwość odrzucenia ((ang.) Dismissible): Czy można zamknąć dymek klawiszem ESC bez ruszania myszką?
    2. Możliwość wskazania ((ang.) Hoverable): Czy można najechać kursorem na dymek bez jego zniknięcia?
    3. Trwałość ((ang.) Persistent): Czy dymek pozostaje widoczny tak długo, jak tego chcemy (nie znika samoczynnie)?

    Notatka: Zanim zajrzysz do rozwiązania, uruchom wybrane narzędzia testowe i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: Narzędzie deweloperskie (ang.) Developer Tools , NVDA, (ang.) WAVE Evaluation Tool , ANDI.js

    Link: https://pdc.ambiscale.com/training/wcag-1-4-13/

    #1 BŁĄD

    Problem: Nie można najechać na dymek (Hoverable).
    Dlaczego: Dymek znika natychmiast po opuszczeniu przycisku, zanim kursor do niego dotrze (lub ma pointer-events: none). Uniemożliwia to zaznaczenie tekstu lub kliknięcie w link wewnątrz dymka.

    #2 BŁĄD

    Problem: Nie można zamknąć dymka (Dismissible).
    Dlaczego: Dymek zasłania przycisk i nie znika po naciśnięciu Esc. Użytkownik klawiatury lub lupy może mieć zablokowany widok bez możliwości jego odsłonięcia bez utraty fokusu.

    #3 DOBRZE

    Dlaczego: Spełnia wszystkie warunki: 1. Można najechać na dymek (nie znika w trakcie ruchu). 2. Można go zamknąć klawiszem Esc. 3. Nie znika samoczynnie (jest trwały).

    #4 BŁĄD

    Problem: Dymek nie jest trwały (Persistent).
    Dlaczego: Znika automatycznie po czasie, mimo że użytkownik nadal wskazuje element. Osoby czytające wolniej mogą nie zdążyć zapoznać się z treścią.

    #5 BŁĄD

    Problem: Nie można najechać na dymek (Hoverable) z powodu odstępu.
    Dlaczego: Fizyczna przerwa między przyciskiem a dymkiem powoduje, że kursor „spada” z obszaru aktywnego, a dymek znika. Należy dodać niewidoczny „mostek” lub usunąć odstęp.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów