ETR

To kryterium dotyczy treści, która pojawia się dopiero wtedy, gdy użytkownik:

  1. najeżdża wskaźnikiem myszy na element (hover), albo
  2. przechodzi do elementu klawiaturą (focus).

Czyli wszelkiego rodzaju dymki podpowiedzi, podglądy, rozwijane menu, hoverowe opisy ikon, dodatkowe panele, które wyskakują po fokusie itd.

WCAG wymaga, żeby taka treść była dla użytkownika do opanowania, a nie uciekająca spod kursora czy blokująca obsługę.

O co chodzi w praktyce?

Jeżeli treść pojawia się po najechaniu albo po fokusie, to użytkownik musi mieć możliwość:

1) Odrzucenia (dismissible)

Da się ją ukryć bez konieczności przesuwania wskaźnika lub zmiany fokusu, chyba że ta treść jest potrzebna do rozwiązania problemu (np. komunikat błędu) albo użytkownik sam ją zamyka.

2) Utrzymania (hoverable)

Jeśli treść pojawia się po najechaniu i użytkownik chce na nią najechać (np. żeby kliknąć link w dymku), to treść nie może znikać tylko dlatego, że przesunął wskaźnik z elementu wyzwalającego tę samą treść. 

3) Trwałości (persistent)

Treść ma pozostać widoczna, dopóki użytkownik jej nie usunie lub nie przestanie jej potrzebować (np. znika, bo element przestał być aktywny) albo dopóki informacja nie zostanie zastąpiona inną. 

Te trzy warunki w praktyce ratują użytkownika przed menu i dymkami, które migają, znikają i nie dają się obsłużyć.

Najczęstsze problemy z kryterium sukcesu 1.4.13

Najczęściej problem wygląda tak:

  1. Dymek z podpowiedzią znika, kiedy próbujesz na niego najechać, więc nie da się przeczytać całości albo kliknąć linku w środku.
  2. Rozwijane menu znika w momencie, kiedy przechodzisz kursorem na submenu.
  3. Panel pokazuje się po fokusie, ale nie da się go zamknąć inaczej niż „ucieczką” tabem gdzieś dalej.
  4. Treść zasłania inne elementy (np. przycisk), ale nie ma sposobu, żeby ją szybko zamknąć.

Jak nie zepsuć 1.4.13?

Jeśli publikujesz stronę i masz wpływ na to, jak działają elementy (np. przez wybór komponentu w CMS), trzymaj się prostych zasad:

  • Jeśli to dymek z dodatkowymi informacjami, dopilnuj, żeby dało się go zamknąć klawiszem Esc albo innym prostym mechanizmem, bez „polowania” myszą.
  • Jeśli w treści wyskakują opisy ikon, niech nie będą jedynym sposobem dotarcia do informacji. Jeśli coś jest ważne, lepiej dać to wprost jako tekst obok, a dymek zostawić jako pomoc.
  • Jeśli masz menu z podmenu, sprawdź, czy da się wejść kursorem w podmenu bez znikania całej struktury.

Jak to szybko sprawdzić na gotowej stronie

Zrób dwa testy:

  1. Test myszą: najedź na element, pojawienie się dymku/panelu, spróbuj przejść kursorem na ten dymek i sprawdź, czy da się z niego skorzystać i czy nie znika.
  2. Test klawiaturą: przejdź Tabem po elementach, sprawdź, czy przy fokusie nic nie wyskakuje w sposób, który blokuje dalszą obsługę, i czy da się to łatwo zamknąć.

Jeśli widzisz miganie, znikanie przy próbie najechania, brak możliwości zamknięcia albo zasłanianie treści bez kontroli, to właśnie niespełnione 1.4.13.

Pełny tekst kryterium 1.4.13 Treść spod kursora lub fokusu

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.

Źródło: https://www.w3.org/Translations/WCAG21-pl/#tresc-spod-kursora-lub-fokusu

Chcesz wiedzieć więcej?

kampanie portal seo wcag miasto gmina www bip crm