Wymaganie WCAG A/AA Priorytet: Umiarkowane
Niektóre wskaźniki poziomu nie mają nazwy
Niektóre elementy oznaczone jako wskaźnik poziomu (meter, np. siła hasła, stan magazynowy lub ocena) nie mają tekstu mówiącego, co mierzą.
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 wartość, np. „60%”, i nie wiedzą, czy chodzi o siłę hasła, pozostały zapas czy ocenę. Może im zabraknąć informacji potrzebnej do decyzji.
Kogo to dotyczy
- niewidomi klienci
- osoby korzystające z czytników ekranu
Jak to naprawić
Każdy element z role="meter" powinien mieć nazwę: aria-label (np. aria-label="Siła hasła") lub aria-labelledby wskazujące na widoczny nagłówek lub etykietę. Jeśli sama liczba jest niejasna, warto dodać czytelną wartość w aria-valuetext.
W Shopify
Rzadkie. Zwykle widżet stanu magazynowego, ocen lub postępu z aplikacji albo własnej sekcji motywu. Etykietę można dodać w Liquid motywu lub poprosić o to twórcę aplikacji.
W Shoptet (CZ)
W szablonach Shoptet rzadkie. Jeśli się pojawia, warto zgłosić to do Shoptet lub partnera Shoptet.
W PrestaShop
Rzadkie. Zwykle widżet modułu, np. stan magazynowy lub oceny. Należy dodać aria-label w nadpisanym szablonie modułu.
W WooCommerce
Rzadkie. Zwykle widżet siły hasła, ocen lub stanu magazynowego z motywu albo wtyczki. Etykietę należy dodać w motywie potomnym lub zgłosić problem autorowi wtyczki.
Normy
| Norma | Punkt |
|---|---|
| WCAG 2.2 | 1.1.1 (A) Non-text Content |
| WCAG 2.1 | 1.1.1 (A) Non-text Content |
| WCAG 2.0 | 1.1.1 (A) Non-text Content |
| EN 301 549 4.1.1 | 9.1.1.1 |
| EN 301 549 3.2.1 | 9.1.1.1 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.1.1.1 |
Automatyczny test: reguła axe-core aria-meter-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 rozwijana nie ma etykiety
WCAG 4.1.2 A
-
Duże tabele mają komórki bez nagłówków
WCAG 1.3.1 A
-
Część tekstu przewija się i nie da się jej zatrzymać
WCAG 2.2.2 A