Przejdź do treści
Pandus

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

Normy
NormaPunkt
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

Wszystkie reguły, które sprawdzamy