Wymaganie WCAG A/AA Priorytet: Umiarkowane

Niektóre paski postępu nie mają nazwy

Niektóre elementy oznaczone jako pasek postępu nie mają tekstu mówiącego, co pokazują, np. „brakuje 80 zł do darmowej dostawy”, kroki zamówienia lub wskaźnik ładowania.

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 „pasek postępu, 60%” i nie wiedzą, czy to próg darmowej dostawy, krok zamówienia czy wciąż ładująca się strona. Mogą przegapić ofertę lub czekać, nie wiedząc na co.

Kogo to dotyczy

niewidomi klienci
osoby korzystające z czytników ekranu

Jak to naprawić

Każdy element z role="progressbar" powinien mieć nazwę: aria-label (np. aria-label="Postęp do darmowej dostawy") lub aria-labelledby wskazujące na widoczny tekst obok. W razie potrzeby warto dodać aria-valuetext z czytelną wartością, np. „brakuje 80 zł”.

W Shopify

Zwykle aplikacja paska darmowej dostawy, upsellingu lub koszyka albo wskaźnik ładowania w motywie. Można poprosić twórcę aplikacji o etykietę lub dodać aria-label we fragmencie Liquid motywu.

W Shoptet (CZ)

Zwykle wskaźnik darmowej dostawy lub ładowania w szablonie albo dodatku. Problem należy zgłosić do Shoptet lub partnera Shoptet.

W PrestaShop

Zwykle moduł darmowej dostawy, zamówienia lub ładowania. Należy dodać aria-label w nadpisanym szablonie modułu lub zgłosić problem twórcy modułu.

W WooCommerce

Zwykle wtyczka paska darmowej dostawy, kroków zamówienia lub przesyłania plików albo widżet postępu w kreatorze stron. Jeśli widżet ma pole etykiety, należy je wypełnić; w przeciwnym razie poprawić to w motywie potomnym lub zgłosić autorowi wtyczki.

Normy

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-progressbar-name. dequeuniversity.com, github.com, www.w3.org

Osadzona treść nie ma nazwy
WCAG 4.1.2 A
Strona sama się odświeża lub przekierowuje
WCAG 2.2.1 A
Zdjęcia nie mają opisu tekstowego
WCAG 1.1.1 A
Niektóre grafiki wektorowe nie mają opisu tekstowego
WCAG 1.1.1 A

Wszystkie reguły, które sprawdzamy