Przejdź do treści
Pandus
pl Zmień język
Menu

Wymaganie WCAG A/AA Priorytet: Poważne

Ukryte elementy nadal są dostępne z klawiatury

Niektóre części strony są ukryte przed czytnikami ekranu, ale nadal można na nie przejść klawiaturą.

Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.

Dlaczego to ważne dla Twoich klientów

Osoby korzystające z klawiatury trafiają na niewidoczne linki, a użytkownicy czytników ekranu na elementy bez nazwy lub bez treści. W zamkniętych menu i oknach wyskakujących utrudnia to poruszanie się po sklepie.

Kogo to dotyczy

  • osoby korzystające z czytników ekranu
  • osoby korzystające z klawiatury zamiast myszy
  • niewidomi klienci

Jak to naprawić

Nie umieszczaj elementów, które mogą otrzymać fokus, wewnątrz aria-hidden="true". Ukrywając menu lub okno dialogowe, ukryj je także przed fokusem: użyj atrybutu hidden, display:none, inert albo tabindex="-1" na jego kontrolkach.

W Shopify

Zwykle wysuwane menu, panele boczne, okna wyskakujące lub karuzele w motywie albo aplikacjach. Popraw logikę ukrywania w JavaScript lub Liquid motywu; widżety aplikacji zgłoś ich twórcy.

W Shoptet (CZ)

Zwykle menu, karuzele lub okna wyskakujące w szablonie. Zgłoś problem do Shoptet lub partnera Shoptet.

W PrestaShop

Zwykle menu mobilne, karuzele lub moduły okien modalnych. Popraw szablony i JavaScript motywu albo zgłoś problem twórcy modułu.

W WooCommerce

Zwykle menu mobilne, slidery, wtyczki okien wyskakujących lub cookies. Popraw to w kodzie motywu potomnego albo zgłoś problem autorowi wtyczki.

Normy

Normy
NormaPunkt
WCAG 2.2 4.1.2 (A) Name, Role, Value
WCAG 2.1 4.1.2 (A) Name, Role, Value
WCAG 2.0 4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1 9.4.1.2
EN 301 549 3.2.1 9.4.1.2
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.4.1.2

Automatyczny test: reguła axe-core aria-hidden-focus. dequeuniversity.com, github.com, www.w3.org

Podobne testy

Wszystkie reguły, które sprawdzamy