Wymaganie WCAG A/AA Priorytet: Umiarkowane · test eksperymentalny: warto sprawdzić ręcznie
Ukryta nazwa przycisków różni się od widocznego tekstu
Niektóre przyciski lub linki pokazują na ekranie jeden tekst, ale mają inną ukrytą nazwę (aria-label), która nie zawiera widocznych słów, np. przycisk „Kup teraz” o nazwie „Wyślij”.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Osoby sterujące urządzeniem głosem mówią to, co widzą: „kliknij Kup teraz”. Jeśli ukryta nazwa jest inna, polecenie nic nie robi i utykają. Użytkownicy czytników ekranu, którzy częściowo widzą ekran, też słyszą słowa niezgodne z widocznymi, co jest mylące.
Kogo to dotyczy
- użytkownicy sterowania głosowego
- osoby z niepełnosprawnością ruchową, które nie mogą używać myszy
- użytkownicy czytników ekranu z resztkami wzroku
- osoby z niepełnosprawnością poznawczą
Jak to naprawić
Dostępna nazwa musi zawierać widoczny tekst, najlepiej na początku i w tej samej kolejności. Często najprościej usunąć aria-label, aby nazwą stał się widoczny tekst. Jeśli potrzebny jest dodatkowy kontekst, dodaj go po widocznych słowach: widoczne „Dodaj do koszyka” zmienia się w aria-label „Dodaj do koszyka: niebieska koszulka”. Sprawdź też przetłumaczone strony: aria-label pozostawiony po angielsku na polskiej stronie to również błąd.
W Shopify
Zwykle atrybuty aria-label we fragmentach motywu (karty produktów, przyciski koszyka) lub w aplikacjach. Zmień fragment Liquid tak, aby aria-label zawierał widoczny tekst, albo go usuń, i sprawdź, czy tłumaczenia motywu obejmują te nazwy.
W Shoptet (CZ)
Zwykle w kodzie szablonu, który można zmienić tylko częściowo. Zgłoś problem do wsparcia Shoptet; we własnych blokach HTML usuń aria-label lub dopasuj go do widocznego tekstu.
W PrestaShop
Zwykle w szablonach .tpl motywu lub w modułach. Zmień aria-label w szablonie tak, aby zawierał widoczny tekst, i sprawdź jego tłumaczenia w ustawieniach tłumaczeń motywu.
W WooCommerce
Zwykle szablony motywu lub wtyczki dodające aria-label do przycisków „Dodaj do koszyka” i linków. Nadpisz szablon w motywie potomnym lub zgłoś to autorowi wtyczki i sprawdź, czy tłumaczenia obejmują teksty aria-label.
Normy
| Norma | Punkt |
|---|---|
| WCAG 2.2 | 2.5.3 (A) Label in Name |
| WCAG 2.1 | 2.5.3 (A) Label in Name |
| EN 301 549 4.1.1 | 9.2.5.3 |
| EN 301 549 3.2.1 | 9.2.5.3 |
| ДСТУ EN 301 549 2022 | 9.2.5.3 |
Automatyczny test: reguła axe-core label-content-name-mismatch.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Linki w tekście wyglądają jak zwykły tekst
WCAG 1.4.1 A
-
Lista nazw i wartości jest zbudowana nieprawidłowo
WCAG 1.3.1 A
-
Lista rozwijana nie ma etykiety
WCAG 4.1.2 A
-
Ukryta nazwa przycisków różni się od widocznego tekstu
WCAG 2.5.3 A