Zalecana praktyka Priorytet: Poważne
Kolejność poruszania się klawiaturą jest wymuszona i nieoczekiwana
Niektóre elementy mają tabindex o wartości większej niż 0, przez co otrzymują fokus przed wszystkimi innymi, gdy ktoś porusza się po stronie klawiszem Tab. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA.
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 oczekują, że fokus będzie przechodził w kolejności, którą widzą na ekranie. Przy tabindex większym niż 0 fokus skacze, np. z logo od razu do pola newslettera, a potem z powrotem do menu, więc łatwo się zgubić i pominąć ważne pola przy składaniu zamówienia.
Kogo to dotyczy
- osoby korzystające z klawiatury zamiast myszy
- osoby korzystające z czytników ekranu
- osoby z niepełnosprawnością ruchową
Jak to naprawić
Zamień każdy dodatni tabindex na tabindex="0" (aby element otrzymywał fokus w swoim naturalnym miejscu) albo usuń go całkowicie. Jeśli kolejność nadal wydaje się zła, zmień kolejność elementów w HTML tak, by odpowiadała kolejności wizualnej, zamiast wymuszać ją przez tabindex. Używaj tabindex="-1" tylko dla elementów, które mają otrzymywać fokus ze skryptu.
W Shopify
Zwykle pochodzi z własnego kodu w sekcjach motywu lub z aplikacji, np. okna pop-up lub czatu. Wyszukaj tabindex w kodzie motywu i popraw go w Liquid albo zgłoś to twórcy aplikacji.
W Shoptet (CZ)
Jeśli pochodzi z własnego wstawionego kodu lub widżetu zewnętrznego, warto poprawić ten kod; jeśli z szablonu, zgłosić to do Shoptet lub partnera.
W PrestaShop
Sprawdź pliki .tpl motywu i szablony modułów pod kątem wartości tabindex większych niż 0 i nadpisuj szablony modułów w motywie zamiast edytować same moduły.
W WooCommerce
Często dodają go wtyczki pop-upów, formularzy lub czatu albo motyw. Wyszukaj tabindex w kodzie strony, popraw go w motywie potomnym lub zgłoś autorowi wtyczki.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core tabindex.
dequeuniversity.com, github.com, www.w3.org