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

Wymaganie WCAG A/AA Priorytet: Poważne

Niektórych przewijanych obszarów nie da się obsłużyć klawiaturą

Niektóre ramki na stronie są przewijane, ale osoby korzystające z klawiatury nie mogą do nich przejść, aby je przewinąć.

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

Dlaczego to ważne dla Twoich klientów

Osoby używające klawiatury zamiast myszy nie mogą przeczytać dalszej części tabeli rozmiarów, warunków dostawy czy listy filtrów, więc tracą informacje lub opcje.

Kogo to dotyczy

  • osoby korzystające z klawiatury zamiast myszy
  • osoby z niepełnosprawnością ruchową
  • osoby korzystające z czytników ekranu

Jak to naprawić

Zapewnij dostęp z klawiatury do każdego przewijanego obszaru: dodaj tabindex="0" z dostępną nazwą (aria-label) i odpowiednią rolą albo upewnij się, że zawiera on element, który może otrzymać fokus. Lepiej: unikaj małych przewijanych ramek dla ważnych treści.

W Shopify

Zwykle tabele, zakładki, listy filtrów lub widżety aplikacji w motywie. Dodaj tabindex i etykietę w sekcjach Liquid motywu albo zrezygnuj w CSS z ramek o stałej wysokości.

W Shoptet (CZ)

Zwykle tabele lub ramki tekstowe w szablonie lub treści. Unikaj ramek o stałej wysokości we własnych treściach; problemy szablonu zgłoś do Shoptet lub partnera Shoptet.

W PrestaShop

Zwykle zakładki produktu, tabele lub listy wyszukiwania fasetowego. Popraw to w szablonach .tpl lub CSS motywu.

W WooCommerce

Zwykle tabele, zakładki lub widżety z motywu albo wtyczek. Popraw to w szablonach lub CSS motywu potomnego albo zgłoś problem autorowi wtyczki.

Normy

Normy
NormaPunkt
WCAG 2.2 2.1.1 (A) Keyboard
WCAG 2.2 2.1.3 (AAA) Keyboard (No Exception)
WCAG 2.1 2.1.1 (A) Keyboard
WCAG 2.1 2.1.3 (AAA) Keyboard (No Exception)
WCAG 2.0 2.1.1 (A) Keyboard
WCAG 2.0 2.1.3 (AAA) Keyboard (No Exception)
EN 301 549 4.1.1 9.2.1.1
EN 301 549 3.2.1 9.2.1.1
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.2.1.1

Automatyczny test: reguła axe-core scrollable-region-focusable. dequeuniversity.com, github.com, www.w3.org, www.w3.org, www.etsi.org

Podobne testy

Wszystkie reguły, które sprawdzamy