Wymaganie WCAG A/AA Priorytet: Poważne
Niektóre elementy mają rolę, która nie istnieje
Niektóre elementy mają atrybut role z literówką, wymyśloną lub abstrakcyjną wartością, więc technologie wspomagające nie rozpoznają, czym są.
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ć menu, kartę, okno wyskakujące lub przycisk jako zwykły tekst albo je pominąć. Osoby z niego korzystające mogą nie znaleźć nawigacji, filtrów lub elementów potrzebnych do złożenia zamówienia.
Kogo to dotyczy
- niewidomi klienci
- osoby korzystające z czytników ekranu
- osoby sterujące urządzeniem za pomocą głosu
Jak to naprawić
Należy używać wyłącznie poprawnych ról ARIA ze specyfikacji WAI-ARIA, zapisanych bez błędów i małymi literami, np. role="button", role="navigation" lub role="dialog". Nie wolno używać ról abstrakcyjnych, takich jak "widget", "landmark" czy "input". Najlepiej zastosować natywny element HTML (<button>, <nav>, <dialog>) i usunąć atrybut role.
W Shopify
Zwykle we własnym kodzie motywu lub widżetach aplikacji, np. menu, sliderach i oknach wyskakujących. Rolę należy poprawić w sekcjach lub fragmentach Liquid motywu; błędy z aplikacji warto zgłosić ich twórcom.
W Shoptet (CZ)
W standardowych szablonach rzadko; częściej we własnym kodzie lub dodanych skryptach. Warto poprosić Shoptet lub partnera Shoptet o sprawdzenie szablonu i własnego kodu.
W PrestaShop
Zwykle w szablonach motywu lub modułach, np. menu i sliderach. Rolę należy poprawić w plikach .tpl motywu lub nadpisanych szablonach modułów.
W WooCommerce
Zwykle w motywach, kreatorach stron lub wtyczkach sliderów i okien wyskakujących. Rolę należy poprawić w szablonach motywu potomnego; kod wtyczki warto zgłosić jej autorowi.
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-roles.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Niektóre przyciski nie mają nazwy
WCAG 4.1.2 A
-
Strona zawiera przestarzały kod migającego tekstu
WCAG 2.2.2 A
-
Atrybuty dostępności mają nieprawidłowe wartości
WCAG 4.1.2 A
-
Niektóre przełączniki i pola wyboru nie mają nazwy
WCAG 4.1.2 A