Prawidłowe identyfikatory etykiet

Silktide sprawdza etykiety formularzy, które wskazują swoje pole za pomocą identyfikatora, i weryfikuje, czy identyfikator istnieje na stronie oraz należy do elementu, który rzeczywiście może mieć etykietę. Etykieta wskazująca na nic lub na niewłaściwy typ elementu powoduje, że pole nie ma nazwy.

W element <label> jest połączony ze swoim polem formularza przez ustawienie atrybutu for etykiety na wartość id pola. Połączenie zostaje zerwane, gdy identyfikator zawiera literówkę, gdy identyfikator pola się zmieni lub kiedy element docelowy w ogóle nie jest polem formularza.

<!-- Problem: nie istnieje element o id="fullname" -->
<label for="fullname">Imię i nazwisko</label>
<input type="text" id="full-name">

Dlaczego to ważne

Etykieta pozwala ogłosić pole. Gdy odwołanie for jest nieprawidłowe, etykieta i pole są dwoma niepowiązanymi elementami: użytkownik słyszy nienazwane „pole edycji tekstu” i musi zgadywać, co należy w nim wpisać. Wizualnie nic się nie zmienia — etykieta nadal znajduje się obok swojego pola — dlatego takie błędy pozostają niezauważone, dopóki osoba, która zależy od tego połączenia, nie spróbuje użyć formularza.

Jak to naprawić

Znajdź pole, którego dotyczyła etykieta, i ustaw wartość for etykiety dokładnie taką samą jak id pola (w identyfikatorach wielkość liter ma znaczenie):

<!-- Naprawiono: odwołanie odpowiada id pola -->
<label for="full-name">Imię i nazwisko</label>
<input type="text" id="full-name">

Jeśli etykieta wskazuje na element, który nie może mieć etykiety — na przykład <div> pełniący funkcję niestandardowej kontrolki — użyj zamiast tego : nadaj elementowi atrybut aria-labelledby, który wskazuje z powrotem tekst nadający mu nazwę.
Jeśli etykieta jest pozostałością bez odpowiadającego jej pola, usuń ją.

Jak Silktide to sprawdza

Znajdź na każdej stronie każdy element <label> z atrybutem for.
Wyszukaj element, którego id odpowiada wartości for.
Zgłoś etykietę, jeśli taki element nie istnieje.
Jeśli istnieje, zgłoś etykietę, gdy element docelowy nie jest formularzowym elementem obsługującym etykiety — przyciskiem, polem input (innym niż ukryte), listą rozwijaną, polem tekstowym, miernikiem, elementem output lub paskiem postępu.

Rozwiązywanie problemów

Pole jest dodawane przez skrypty

Silktide analizuje każdą stronę w postaci po wyrenderowaniu. Jeśli element docelowy pola istnieje tylko w niektórych stanach strony — na przykład po otwarciu panelu — może go nie być podczas testu. Rozważ renderowanie etykiety i jej pola razem.