Wymaganie WCAG A/AA Priorytet: Umiarkowane
Atrybuty dostępności użyto w niewłaściwej sytuacji
Niektóre elementy mają atrybuty dostępności, które dla ich typu są dozwolone tylko w określonych warunkach, np. aria-checked na prawdziwym polu wyboru lub atrybuty tabeli drzewiastej na zwykłym wierszu tabeli.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Czytnik ekranu może odczytać stan inny niż widoczny, np. „niezaznaczone” przy zaznaczonym polu „Akceptuję regulamin” lub opcji filtra, albo odczytać wiersze tabeli jako poziomy drzewa. Klienci mogą dokonać złego wyboru w filtrach lub przy składaniu zamówienia.
Kogo to dotyczy
- osoby korzystające z czytników ekranu
- niewidomi klienci
Jak to naprawić
Z natywnych pól wyboru należy usunąć aria-checked; stan elementu input wystarcza. Atrybuty wierszy, takie jak aria-level, aria-posinset, aria-setsize i aria-expanded, należy stosować na wierszach tabeli tylko wewnątrz role="treegrid". Tam, gdzie to możliwe, lepiej używać natywnych elementów HTML zamiast ARIA.
W Shopify
Zwykle własny kod filtrów, wariantów lub pól wyboru w motywie albo aplikacji. Należy znaleźć element w plikach Liquid i JavaScript motywu i usunąć sprzeczny atrybut; widżety aplikacji zgłosić ich twórcy.
W Shoptet (CZ)
Zwykle filtry lub formularze szablonu albo dodatki. Problem należy zgłosić do Shoptet lub partnera Shoptet.
W PrestaShop
Zwykle moduły wyszukiwania fasetowego, opcji produktu lub formularzy. Należy poprawić pliki .tpl i JavaScript motywu lub nadpisane szablony modułów.
W WooCommerce
Zwykle wtyczki filtrów, opcji produktu lub formularzy albo kreator stron. Należy 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-conditional-attr.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Niektóre linki nie mówią, dokąd prowadzą
WCAG 2.4.4 A
-
Nazwa lub wartość znajduje się poza swoją listą
WCAG 1.3.1 A
-
Ukryte elementy nadal są dostępne z klawiatury
WCAG 4.1.2 A
-
Niestandardowe pola formularza nie mają etykiety
WCAG 4.1.2 A