Wymaganie WCAG A/AA Priorytet: Umiarkowane

Niektóre pola formularzy mają kilka etykiet

Pole formularza, np. e-mail, ilość lub adres, jest powiązane z dwoma lub więcej elementami <label>.

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

Dlaczego to ważne dla Twoich klientów

Czytniki ekranu radzą sobie z tym różnie: jedne odczytują tylko pierwszą etykietę, inne wszystkie, jeszcze inne tylko ostatnią. Osoby sterujące głosem mogą nie wiedzieć, jakie słowa wypowiedzieć, by przejść do pola. W formularzu zamówienia lub rejestracji wydłuża to wypełnianie i sprzyja błędom.

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żde pole powinno mieć dokładnie jeden <label>. Dodatkowy tekst, np. podpowiedź lub przykład formatu, należy powiązać przez aria-describedby, a nie drugą etykietą. Warto sprawdzić, czy obok widocznej etykiety nie ma ukrytego duplikatu dodanego przez motyw lub wtyczkę.

W Shopify

W standardowych motywach rzadkie; zwykle wynika z modyfikacji motywu lub aplikacji formularzy, które dodają własną etykietę obok etykiety motywu. Duplikat należy usunąć we fragmencie Liquid lub w ustawieniach aplikacji.

W Shoptet (CZ)

W standardowym szablonie rzadkie; zwykle wynika z własnego kodu lub zewnętrznych formularzy. Najpierw warto poprawić własny kod; w sprawie szablonu należy zwrócić się do Shoptet lub partnera Shoptet.

W PrestaShop

Zwykle w zmodyfikowanych szablonach formularzy .tpl lub w modułach dodających własne etykiety (newsletter, pola zamówienia). W motywie lub nadpisanych szablonach modułów należy zostawić jedną etykietę na pole.

W WooCommerce

Często powodują to wtyczki formularzy, edytory pól zamówienia lub kreatory stron dodające drugą etykietę obok etykiety motywu. Należy sprawdzić ustawienia pola lub szablony wtyczki i zostawić jedną etykietę na pole.

Normy

Normy
Norma	Punkt
WCAG 2.2	3.3.2 (A) Labels or Instructions
WCAG 2.1	3.3.2 (A) Labels or Instructions
WCAG 2.0	3.3.2 (A) Labels or Instructions
EN 301 549 4.1.1	9.3.3.2
EN 301 549 3.2.1	9.3.3.2
Section 508 2017	E205.4
ДСТУ EN 301 549 2022	9.3.3.2

Automatyczny test: reguła axe-core form-field-multiple-labels. dequeuniversity.com, github.com, www.w3.org

Kilka osadzonych ramek ma tę samą nazwę
WCAG 4.1.2 A
Niestandardowe menu lub listy są zbudowane nieprawidłowo
WCAG 1.3.1 A
Lista rozwijana nie ma etykiety
WCAG 4.1.2 A
Strona nie ma tytułu
WCAG 2.4.2 A

Wszystkie reguły, które sprawdzamy