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

Wymaganie WCAG A/AA Priorytet: Poważne

Niestandardowym kontrolkom brakuje wymaganych informacji

Niektóre niestandardowe kontrolki mają przypisaną rolę, ale brakuje im informacji, której ta rola wymaga, np. czy lista rozwijana jest otwarta.

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 czytników ekranu mogą nie wiedzieć, czy filtr jest rozwinięty, która opcja jest wybrana albo jaką wartość ma suwak, więc menu i filtry stają się trudne w obsłudze.

Kogo to dotyczy

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

Jak to naprawić

Dodaj atrybuty wymagane przez rolę, np. aria-expanded przy role="combobox" lub aria-valuenow przy role="slider". Aktualizuj je w JavaScript przy każdej zmianie stanu. Tam, gdzie to możliwe, używaj natywnych elementów HTML.

W Shopify

Zwykle niestandardowe menu, filtry lub suwaki w motywie albo aplikacjach. Popraw atrybuty w plikach Liquid i JavaScript motywu; poproś twórców aplikacji o poprawienie ich widżetów.

W Shoptet (CZ)

Zwykle menu szablonu lub dodatki. Zgłoś problem do Shoptet lub partnera Shoptet, ponieważ kontrolki są częścią szablonu.

W PrestaShop

Zwykle menu motywu lub moduły, np. wyszukiwanie fasetowe. Popraw szablony i JavaScript motywu albo zgłoś problem twórcy modułu.

W WooCommerce

Zwykle menu motywu, widżety kreatora stron lub wtyczki filtrów. 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-required-attr. dequeuniversity.com, github.com, www.w3.org

Podobne testy

Wszystkie reguły, które sprawdzamy