Wymaganie WCAG A/AA Priorytet: Poważne
Niektóre przełączniki i pola wyboru nie mają nazwy
Niektóre własne przełączniki (pola wyboru, przełączniki, przyciski opcji lub opcje menu zbudowane z rolami ARIA) nie mają czytelnej etykiety.
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 słyszą tylko „pole wyboru” lub „przełącznik”, bez informacji, czego dotyczy: akceptacji regulaminu, zapisu do newslettera, filtra czy pakowania na prezent. Mogą pominąć wymagane pole przy zamówieniu lub wybrać złą opcję.
Kogo to dotyczy
- niewidomi klienci
- osoby korzystające z czytników ekranu
- osoby sterujące urządzeniem za pomocą głosu
Jak to naprawić
Każdy element z role="checkbox", "switch", "radio", "menuitemcheckbox" lub "menuitemradio" powinien mieć nazwę: widoczny tekst w środku, aria-labelledby wskazujące widoczną etykietę lub aria-label. Tam, gdzie to możliwe, lepiej użyć natywnego <input type="checkbox"> lub <input type="radio"> z <label>.
W Shopify
Zwykle własne przełączniki filtrów, banery cookies lub widżety aplikacji (subskrypcje, opcje prezentowe). Etykiety należy dodać we fragmentach Liquid motywu; przełączniki z aplikacji warto zgłosić ich twórcom.
W Shoptet (CZ)
Zwykle w dodatkach lub własnym kodzie (banery cookies, filtry). Warto poprosić dostawcę dodatku, Shoptet lub partnera Shoptet o dodanie etykiet.
W PrestaShop
Zwykle w modułach zgody na cookies, wyszukiwania fasetowego lub opcji produktu. Etykiety należy dodać w nadpisanych szablonach .tpl modułów lub zgłosić to twórcy modułu.
W WooCommerce
Często we wtyczkach zgody na cookies, filtrów i opcji produktu oraz w przełącznikach kreatorów stron. Warto sprawdzić ustawienia wtyczki; w przeciwnym razie poprawić to w motywie potomnym lub zgłosić autorowi wtyczki.
Normy
| Norma | Punkt |
|---|---|
| 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-toggle-field-name.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Atrybuty dostępności użyto w niewłaściwej sytuacji
WCAG 4.1.2 A
-
Lista nazw i wartości jest zbudowana nieprawidłowo
WCAG 1.3.1 A
-
Niektóre osadzone pliki lub multimedia nie mają opisu tekstowego
WCAG 1.1.1 A
-
Niektóre paski postępu nie mają nazwy
WCAG 1.1.1 A