Zalecana praktyka Priorytet: Poważne
Pola formularza nie mają widocznej etykiety
Niektóre pola formularza są opisane tylko podpowiedzią (atrybut title), ukrytym opisem lub ukrytą etykietą, więc na ekranie nie widać żadnej etykiety. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opierają się przepisy o dostępności.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Klienci widzą puste pole i muszą zgadywać, czy chodzi o numer telefonu, kod pocztowy czy kod rabatowy. Podpowiedź pojawia się tylko po najechaniu myszą, nigdy na telefonie, a placeholder znika, gdy ktoś zaczyna pisać. Osoby sterujące stroną głosem nie mogą wywołać pola, którego nazwy nie widzą.
Kogo to dotyczy
- osoby z trudnościami poznawczymi lub problemami z pamięcią
- starsi klienci
- użytkownicy sterowania głosowego
- klienci na smartfonach
Jak to naprawić
Każdemu polu input, select i textarea nadaj widoczny element <label> powiązany przez for i id albo umieść pole wewnątrz etykiety. Nie używaj atrybutu title, aria-describedby ani wizualnie ukrytej etykiety jako jedynej nazwy i nie traktuj placeholdera jak etykiety. W kompaktowych polach, takich jak wyszukiwarka czy newsletter, zostaw krótką widoczną etykietę obok pola.
W Shopify
Zwykle dotyczy formularzy newslettera, wyszukiwarki lub własnych formularzy kontaktowych w sekcjach lub snippetach motywu, gdzie etykieta jest ukryta, a widać tylko placeholder. Pokaż etykietę w kodzie Liquid i CSS tej sekcji; w formularzach dodanych przez aplikacje zwróć się do twórcy aplikacji.
W Shoptet (CZ)
Zależy od szablonu. Sprawdź ustawienia szablonu lub jego nowszą wersję; jeśli etykieta istnieje, ale jest ukryta, można ją pokazać własnym CSS w ramach opcji własnego kodu Shoptet. W przeciwnym razie zwróć się do Shoptet lub partnera.
W PrestaShop
Zwykle chodzi o szablony modułów newslettera, wyszukiwarki lub kontaktu. Nadpisz plik .tpl modułu w swoim motywie i pokaż prawdziwą etykietę zamiast placeholdera lub title.
W WooCommerce
Zwykle wynika z motywu, wtyczki formularzy lub page buildera, który ukrywa etykiety dla minimalistycznego wyglądu. Włącz etykiety w ustawieniach wtyczki formularzy albo pokaż je w szablonach lub CSS motywu potomnego.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core label-title-only.
dequeuniversity.com, github.com, www.w3.org