Etykiety pól

Silktide sprawdza, czy każde pole formularza i przycisk na Twoich stronach ma nazwę, którą może odczytać oprogramowanie. Osoby, które nie widzą formularza, polegają na tych nazwach, aby wiedzieć, o co pyta każde pole.

Widzący użytkownik rozpoznaje znaczenie pola na podstawie tekstu znajdującego się obok niego. To wizualne powiązanie nie ma znaczenia w kodzie: nazwa musi być przypisana bezpośrednio do pola, najczęściej za pomocą elementu <label> w .

<!-- Problem: tekst wygląda jak etykieta, ale nie jest przypisany do pola -->
<p>Imię i nazwisko</p>
<input type="text">

Dlaczego to ważne

odczytuje każde pole za pomocą jego , gdy użytkownik porusza się po formularzu. Pole bez nazwy jest odczytywane jedynie jako „edytuj tekst” — użytkownik musi odgadnąć z kontekstu, co wpisać, a w dłuższym formularzu szybko staje się to niemożliwe. Pola bez etykiet to jedna z najczęstszych przyczyn, dla których formularza nie można wypełnić bez wzroku, co oznacza utracone rejestracje, zamówienia i zapytania.

Jak to naprawić

Przypisz <label> do każdego pola, łącząc je za pomocą identyfikatora lub otaczając nim pole:

<!-- Połączone za pomocą identyfikatora -->
<label for="name">Imię i nazwisko</label>
<input type="text" id="name">

<!-- Lub otaczające pole -->
<label>Imię i nazwisko <input type="text"></label>

Przyciski mają własną nazwę dzięki tekstowi lub wartości value — element label nie jest potrzebny:

<button>Wyślij wiadomość</button>
<input type="submit" value="Wyślij wiadomość">

Gdy widoczna etykieta jest niepraktyczna, użyj atrybutu , takiego jak aria-label lub aria-labelledby. Pamiętaj, że pomaga to tylko — widzący użytkownicy tego nie zobaczą.

Nie polegaj na tekście placeholder jako etykiecie: znika on, gdy tylko użytkownik zacznie pisać, i nie zawsze jest konsekwentnie traktowany jako nazwa.

Jak Silktide to testuje

Znajduje kontrolki formularza na każdej stronie: pola wejściowe, obszary tekstowe, listy rozwijane i przyciski, a także elementy z rolą kontrolki formularza nadaną za pomocą ARIA (np. role="button" lub role="checkbox").
Pomija kontrolki, które nie potrzebują nazwy: ukryte pola wejściowe, pola dodane przez znane widżety innych firm (np. usługi lub ukryte formularze, które skrypty śledzące i tłumaczące dodają na własny użytek), oraz elementy, których rola ARIA nie wymaga etykiety.
Ustala dostępną nazwę każdej kontrolki na podstawie jej etykiety, atrybutów ARIA, tekstu przycisku lub wartości.
Zgłasza każdą kontrolkę, której dostępna nazwa jest pusta.

Rozwiązywanie problemów

Pole ma obok siebie tekst

Tekst znajdujący się w pobliżu nie nadaje polu nazwy, chyba że jest połączony w kodzie — użyj <label> z atrybutem for lub otocz pole etykietą.

Pole jest dekoracyjne lub zarządzane przez wtyczkę

Pola dodane przez widżety, nad którymi nie masz kontroli, mogą być trudne do bezpośredniego naprawienia. Sprawdź, czy wtyczka oferuje ustawienie dostępności lub aktualizację; jeśli pole faktycznie nie ma wpływu na użytkowników, możesz wynik.