WCAG 1.3.1 Informacje i relacje (A) · WCAG 3.3.2 Etykiety lub instrukcje (A) · WCAG 4.1.2 Nazwa, rola, wartość (A) · aktualizacja
Pole formularza bez etykiety: dlaczego placeholder nie wystarcza
Każde pole formularza potrzebuje widocznej etykiety połączonej z nim w kodzie: <label for="email"> i <input id="email">. Sam placeholder nie wystarcza, bo znika przy pisaniu, zwykle ma za niski kontrast i część czytników go nie odczytuje.
Jak często się zdarza
Według raportu WebAIM Million 2026 pola bez etykiety były na 51% stron głównych. W sklepach najczęściej chodzi o wyszukiwarkę, newsletter w stopce i pole kodu rabatowego.
Komu to przeszkadza
Osoby korzystające z czytnika ekranu słyszą tylko „pole edycji" i muszą zgadywać, co wpisać. Ale też osoby z problemami z pamięcią: gdy placeholder znika po pierwszej literze, łatwo zapomnieć, czy to było pole na imię, czy na nazwisko.
Skąd się bierze
- Pole wyszukiwarki z samą ikoną lupy i placeholderem „Szukaj...".
- Newsletter w stopce: jedno pole i przycisk, bez etykiety, „bo wiadomo".
- Etykieta jest widoczna, ale nie jest połączona z polem (brak for i id albo zła wartość).
- Własne komponenty (lista wyboru, kalendarz) zbudowane z elementów div bez nazwy dostępnej.
Poprawka w kodzie
Przed
<input type="email" placeholder="Twój e-mail">
<button>Zapisz</button>Po
<label for="newsletter-email">E-mail do newslettera</label>
<input id="newsletter-email" type="email" autocomplete="email">
<button>Zapisz się</button>Jeśli projekt naprawdę nie ma miejsca na widoczną etykietę (typowe przy wyszukiwarce), zostaw ją dla czytnika klasą „visually-hidden" albo dodaj aria-label. Widoczna etykieta jest jednak lepsza dla wszystkich.
Jak sprawdzić to samodzielnie
- Kliknij w tekst etykiety. Jeśli kursor pojawi się w polu, etykieta jest poprawnie połączona.
- Wpisz coś w każde pole i sprawdź, czy nadal wiesz, czego pole dotyczy.
- Przejdź formularz zamówienia klawiszem Tab z włączonym czytnikiem ekranu (NVDA jest darmowy, na Macu wbudowany VoiceOver). Każde pole powinno mieć nazwę.
Co wykryje skaner, a czego nie
Skaner wykryje
Skaner wykryje pola bez żadnej nazwy dostępnej, listy wyboru bez etykiety i pola z kilkoma sprzecznymi etykietami.
Wymaga sprawdzenia przez człowieka
Automat nie oceni, czy etykieta jest zrozumiała. „Pole 1" przejdzie test, choć nikomu nie pomoże. Nie sprawdzi też, czy komunikat o błędzie mówi, jak go poprawić.
Najczęstsze pytania
Czy placeholder może zastąpić etykietę pola?
Nie. Placeholder znika przy pisaniu, zwykle ma za niski kontrast i nie zawsze jest odczytywany przez czytniki. Może być dodatkową podpowiedzią (na przykład formatem numeru), ale nie etykietą.
Czy aria-label wystarczy zamiast widocznej etykiety?
Technicznie spełnia wymóg nazwy dostępnej, więc skaner go zaakceptuje. Osoby widzące nadal jednak nie widzą, co wpisać. Używaj go tam, gdzie cel pola jest oczywisty z otoczenia, na przykład przy wyszukiwarce z przyciskiem „Szukaj".
Co z polami obowiązkowymi oznaczonymi gwiazdką?
Gwiazdka to za mało, jeśli nie wyjaśnisz jej znaczenia. Dopisz na początku formularza „Pola oznaczone gwiazdką są wymagane" albo dodaj słowo „wymagane" w etykiecie.
Źródła
- [1] Understanding Success Criterion 3.3.2W3C Web Accessibility Initiative (WAI)
- [2] Understanding Success Criterion 1.3.1W3C Web Accessibility Initiative (WAI)
- [3] The WebAIM Million: raport 2026 o dostępności miliona stron głównychWebAIM, Institute for Disability Research, Policy, and Practice, Utah State University