Wymaganie WCAG A/AA Priorytet: Poważne

Niektóre etykiety wskazują niewłaściwy element

Kilka elementów ma ten sam id, a ten id służy do powiązania etykiety, opisu lub komunikatu o błędzie z polem albo kontrolką.

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

Dlaczego to ważne dla Twoich klientów

Technologie wspomagające odnajdują właściwy tekst po id. Gdy się powtarza, czytnik ekranu może odczytać etykietę lub błąd innego pola, np. adres do faktury zamiast adresu dostawy albo nazwę innego filtra.

Kogo to dotyczy

niewidomi klienci
osoby korzystające z czytników ekranu
osoby sterujące urządzeniem za pomocą głosu

Jak to naprawić

Każdy id na stronie powinien być unikalny, zwłaszcza te, do których odwołują się aria-labelledby, aria-describedby, aria-controls lub <label for>. Powtarzane bloki (karty produktów, okna szybkiego podglądu, menu mobilne i desktopowe) powinny generować id z przyrostkiem, np. id produktu lub sekcji. Każdy zgłoszony przypadek warto sprawdzić ręcznie: axe oznacza go do ręcznej weryfikacji.

W Shopify

Często sekcja lub fragment wyświetlany jest dwukrotnie (nagłówek mobilny i desktopowy, karty produktów, szybki podgląd) ze stałym id. Należy dodać unikalny przyrostek w kodzie Liquid, np. section.id lub product.id; widżety aplikacji musi poprawić ich twórca.

W Shoptet (CZ)

Zwykle pochodzi z szablonu albo z własnego kodu wstawionego kilka razy. Najpierw warto poprawić własny kod; w sprawie szablonu należy zwrócić się do Shoptet lub partnera Shoptet.

W PrestaShop

Zwykle w szablonach .tpl motywu lub w modułach, które wyświetlają ten sam blok kilka razy, np. miniatury produktów albo menu mobilne i desktopowe. Id należy ujednolicić w motywie lub w nadpisanych szablonach modułów tak, by się nie powtarzały.

W WooCommerce

Częste przy kreatorach stron i widżetach umieszczonych dwukrotnie (menu mobilne i desktopowe, powtórzone formularze) oraz we wtyczkach z na sztywno wpisanymi id. Id można poprawić w motywie potomnym lub ustawieniach widżetu; kod wtyczki należy zgłosić jej autorowi.

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 duplicate-id-aria. dequeuniversity.com, github.com, www.w3.org

Niektóre nagłówki tabeli nie opisują żadnych danych
WCAG 1.3.1 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
Niektóre filmy lub dźwięki włączają się same z dźwiękiem
WCAG 1.4.2 A

Wszystkie reguły, które sprawdzamy