Niektóre etykiety są tam, gdzie czytniki ekranu je pomijają

Niektóre elementy mają atrybuty dostępności niedozwolone dla ich typu, najczęściej aria-label na zwykłym <div> lub <span> bez roli.

Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.

Dlaczego to ważne dla Twoich klientów

Czytniki ekranu często pomijają takie etykiety. Ocena w gwiazdkach zapisana jako aria-label="4,5 na 5", ikona „Promocja” czy oznaczenie dostępności może wtedy nic nie powiedzieć albo powiedzieć coś innego, niż widzą pozostali klienci.

Kogo to dotyczy

osoby korzystające z czytników ekranu
niewidomi klienci

Jak to naprawić

Nie należy umieszczać aria-label ani aria-labelledby na elementach bez odpowiedniej roli (zwykłe div, span, p lub elementy z role="presentation"). Zamiast tego informację warto podać jako tekst, np. w wizualnie ukrytym <span>, albo nadać elementowi właściwą rolę, np. role="img" dla oceny złożonej z ikon gwiazdek.

W Shopify

Zwykle kod opinii, oznaczeń lub ikon w motywie albo aplikacjach. Fragment Liquid należy zmienić na wizualnie ukryty tekst lub role="img"; widżety aplikacji zgłosić ich twórcy.

W Shoptet (CZ)

Zwykle oceny, oznaczenia lub ikony w szablonie albo dodatkach. Problem należy zgłosić do Shoptet lub partnera Shoptet.

W PrestaShop

Zwykle oceny, etykiety lub ikony w motywie albo modułach. Należy poprawić szablony .tpl lub nadpisane szablony modułów.

W WooCommerce

Zwykle oceny w gwiazdkach, oznaczenia lub ikony w motywie, kreatorze stron lub wtyczkach opinii. Należy poprawić to w motywie potomnym lub zgłosić autorowi wtyczki.

Normy

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

Niektóre etykiety są tam, gdzie czytniki ekranu je pomijają
WCAG 4.1.2 A
Klikalne elementy są zagnieżdżone jeden w drugim
WCAG 4.1.2 A
Tytuł tabeli jest wpisany w komórkę tabeli
WCAG 1.3.1 A
Klikalne obszary obrazka nie mają opisu
WCAG 2.4.4 A

Wszystkie reguły, które sprawdzamy