Unikalne powiązania etykiet
Silktide kontroluje etykiety formularzy, które wskazują swoje pola za pomocą identyfikatora, i zgłasza etykiety współdzielące ten sam identyfikator z inną etykietą. Każde pole powinno mieć dokładnie jedną wskazującą na nie etykietę, aby zawsze było ogłaszane w ten sam sposób.
W języku element <label> jest połączony z polem formularza przez ustawienie atrybutu for etykiety na wartość id pola. Gdy co najmniej dwie etykiety używają tej samej wartości for, wszystkie wskazują to samo pole — zwykle dlatego, że formularz został skopiowany i wklejony, a identyfikatory nigdy nie zostały zaktualizowane.
<!-- Problem: obie etykiety wskazują id="name" -->
<label for="name">Twoje imię i nazwisko</label>
<input id="name">
<label for="name">Nazwa firmy</label>
<input id="company">
Dlaczego to ważne
musi wybrać, którą etykietę ogłosić dla pola, a różne wybierają inaczej — niektóre odczytują pierwszą, a inne obie. Tymczasem pole, dla którego przeznaczona była druga etykieta, pozostaje całkowicie bez etykiety, więc jest ogłaszane jako pole bez nazwy. Kliknięcie etykiety również przenosi fokus do jej pola, więc użytkownik, który kliknie „Nazwa firmy”, może zacząć wpisywać tekst w niewłaściwym polu.
Jak to naprawić
- Nadaj każdemu polu formularza własny unikalny
id. - Ustaw atrybut
forkażdej etykiety na identyfikator jednego pola, które opisuje:
<!-- Poprawione: każda etykieta wskazuje własne pole -->
<label for="name">Twoje imię i nazwisko</label>
<input id="name">
<label for="company">Nazwa firmy</label>
<input id="company">
- Jeśli kilka fragmentów tekstu rzeczywiście opisuje jedno pole, zachowaj pojedynczy element
<label>i połącz dodatkowy tekst za pomocąaria-describedbyzamiast drugiej etykiety.
Jak Silktide to testuje
- Znajduje na każdej stronie każdy element
<label>z atrybutemfor. - Grupuje etykiety według ich wartości
for. - Gdy co najmniej dwie etykiety współdzielą tę samą wartość, zgłasza każdą etykietę w grupie.
Rozwiązywanie problemów
Etykiety znajdują się w oddzielnych formularzach
Identyfikatory muszą być unikalne na całej stronie, a nie tylko w obrębie jednego formularza. Dwa formularze, z których każdy zawiera <label for="email"> na tej samej stronie, nadal powodują konflikt — zmień nazwy identyfikatorów, aby się różniły, na przykład na signup-email i newsletter-email.