Wymaganie WCAG A/AA Priorytet: Umiarkowane
Niektóre podpowiedzi są puste
Niektóre elementy oznaczone jako podpowiedzi (role="tooltip") nie zawierają czytelnego tekstu.
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 nie dostają podpowiedzi, którą widzą inni klienci, np. wyjaśnienia rozmiarów, kosztów dostawy, informacji o VAT czy wymagań dotyczących hasła.
Kogo to dotyczy
- niewidomi klienci
- osoby korzystające z czytników ekranu
Jak to naprawić
Każdy element z role="tooltip" powinien zawierać tekst albo mieć aria-label lub aria-labelledby. Podpowiedź należy powiązać z objaśnianym elementem przez aria-describedby. Jeśli tekst ładuje się dopiero po najechaniu kursorem, lepiej umieścić go na stronie od początku i tylko pokazywać po najechaniu i przy fokusie klawiatury.
W Shopify
Zwykle podpowiedzi motywu lub widżety aplikacji (tabele rozmiarów, informacje o dostawie). Kod należy poprawić we fragmentach Liquid motywu lub zgłosić twórcy aplikacji.
W Shoptet (CZ)
W standardowych szablonach rzadko; częściej we własnym kodzie lub dodatkach. Warto poprosić Shoptet lub partnera Shoptet o sprawdzenie.
W PrestaShop
Zwykle w szablonach motywu lub modułach z ikonami informacyjnymi. Kod podpowiedzi należy poprawić w plikach .tpl lub nadpisanych szablonach modułów.
W WooCommerce
Zwykle we wtyczkach podpowiedzi, opcji produktu lub kreatorach 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-tooltip-name.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Klikalny obraz działa tylko z myszą
WCAG 2.1.1 A
-
Lista nazw i wartości jest zbudowana nieprawidłowo
WCAG 1.3.1 A
-
Niektóre przyciski formularzy nie mają nazwy
WCAG 4.1.2 A
-
Zdjęcia nie mają opisu tekstowego
WCAG 1.1.1 A