Wymaganie WCAG A/AA Priorytet: Krytyczne
Pola formularza nie mają etykiet
Niektóre pola formularza nie mają etykiety, którą mogą odczytać technologie wspomagające, więc nie wiadomo, co należy w nie wpisać.
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 „pole edycji” i nie wiedzą, czy wpisać imię, telefon czy kod pocztowy. W kasie prowadzi to wprost do porzuconych zamówień. Pola opisane wyłącznie placeholderem dezorientują też starszych klientów, gdy zaczną pisać.
Kogo to dotyczy
- niewidomi klienci
- osoby korzystające z czytników ekranu
- starsi klienci
- osoby z niepełnosprawnością intelektualną lub trudnościami poznawczymi
- osoby sterujące urządzeniem za pomocą głosu
Jak to naprawić
Połącz widoczną etykietę <label for> z każdym polem albo umieść pole wewnątrz etykiety. aria-label stosuj tylko wtedy, gdy widoczna etykieta naprawdę nie jest możliwa. Placeholder nie jest etykietą. Sprawdź pola wyszukiwania, newslettera, ilości i kasy.
W Shopify
Kasą zarządza Shopify, więc problemy dotyczą zwykle pól wyszukiwania, newslettera, kontaktu lub ilości w motywie albo formularzy dodanych przez aplikacje. Dodaj etykiety w szablonach Liquid motywu lub w ustawieniach aplikacji.
W Shoptet (CZ)
Zwykle pola wyszukiwania, newslettera lub kontaktu w szablonie. Najpierw sprawdź ustawienia szablonu; głębsze zmiany w kodzie formularzy zwykle wymagają Shoptet lub partnera Shoptet.
W PrestaShop
Sprawdź szablony wyszukiwania, newslettera, konta i kasy w motywie i modułach. Dodaj elementy <label> w plikach .tpl lub nadpisanych szablonach modułów.
W WooCommerce
Sprawdź formularze kasy, konta i wyszukiwania w motywie oraz we wtyczkach formularzy lub kasy. Dodaj etykiety w szablonach motywu potomnego lub użyj opcji wtyczki, które generują prawdziwe elementy <label>.
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 label.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Niektóre linki nie mówią, dokąd prowadzą
WCAG 2.4.4 A
-
Przyciski i linki są za małe, by wygodnie je dotknąć
WCAG 2.5.8 AA
-
Niektóre etykiety są tam, gdzie czytniki ekranu je pomijają
WCAG 4.1.2 A
-
Strona deklaruje dwa różne języki
WCAG 3.1.1 A