Czy pole wejściowe może mieć dwie etykiety?

137

Mary miała mały kształt, a jej pola były tak oznaczone.
Ilekroć wkradał się błąd, siał zamieszanie.

Mam etykietę dla każdego pola wejściowego ... dość standardowa sprawa. Po sprawdzeniu formularza, na górze formularza wyświetlam pomocny mały akapit z wyszczególnieniem brakujących lub niepoprawnych informacji.

Czy mogę mieć dwie etykiety dla tego samego pola wejściowego? Jeden w prawidłowej formie, a drugi w tekście przypomnienia o walidacji? Czy jest jakiś powód, dla którego nie powinienem tego robić?

html forms labels aslum
źródło
Czy próbowałeś, co się stało? Jeśli to zadziała, nie sądzę, że spowodowałoby to jakiekolwiek uszkodzenie formularza ani strony. Otrzymasz plus, ponieważ użytkownik będzie mógł kliknąć błąd walidacji i skupić się na odpowiednim polu.
Felipe Cypriano
Nie próbowałem tego, ale myślę, że będzie to możliwe. Ale nie polecam go używać, ponieważ etykieta określa, do czego służy pole, a komunikat o błędzie nie. Dlatego nie powinienem używać etykiety do ostrzeżeń dotyczących weryfikacji.
Guido Hendriks
1
Czy to jest ogólne pytanie dotyczące projektowania interfejsu użytkownika / użyteczności?
jball
Tak. To "działa" ... ale czy jest jakiś powód, dla którego to zły projekt? Zgaduję, że może to być spowodowane ułatwieniami dostępu, ale dla zwykłego użytkownika myślę, że kliknięcie komunikatu o błędzie i przeniesienie do pomieszanego pola ułatwiłoby sprawę ... Po prostu nie wiem, czy to będzie zepsuć „czytelników dla niedowidzących” lub tym podobne.
aslum
1
W niektórych przypadkach łatwiej jest umieścić kontrolkę i tekst w jednym label. Możesz nawet pominąć atrybuty fori id. Specyfikacja nazywa to niejawny stowarzyszenie.
rybo111,

Odpowiedzi:

163

Zakładam, że to pytanie dotyczy formularzy HTML. Ze specyfikacji :

Element LABEL może służyć do dołączania informacji do kontrolek. Każdy element LABEL jest powiązany z dokładnie jedną kontrolką formularza.

W ten sposób do każdej kontrolki formularza można odwoływać się za pomocą wielu etykiet, ale każda etykieta może odwoływać się tylko do jednej kontrolki. Jeśli więc sensowne jest posiadanie drugiej etykiety dla elementu sterującego (aw opisanej sytuacji ma), możesz dodać drugą etykietę.

James Sumners
źródło
2
To bardziej kwestia użyteczności / dostępności niż HTML. HTML działa.
aslum
2
Wszyscy powinniśmy używać tylko prawidłowego kodu, w przeciwnym razie coś może się zepsuć w przyszłości lub dla kogoś innego, z jakąś biblioteką JS lub czymkolwiek.
SHernandez,
1
Prawidłowa odpowiedź to Rob. To rozwiązanie działa dla widzących użytkowników i zawodzi w niektórych czytnikach ekranu. Aslum, zakładając, że zaakceptowałeś powyższą odpowiedź jsummersa, zanim Rob złożył swoją odpowiedź.
grzechotnik klatkowy
3
@AvramLavinsky nie, to jest prawidłowa odpowiedź na pytanie „czy pole może mieć dwie etykiety?” Specyfikacja jest całkiem jasna. To, jak klienci decydują się interpretować, zależy od nich. Twój link do „aria-opisanyby”, który prowadzi do „aria-labeledby”, jest sposobem na „naprawienie” zepsutych czytników ekranu.
James Sumners
Śmieszne MDN mówi: „Jedno wejście może być powiązane z wieloma etykietami”. developer.mozilla.org/en-US/docs/Web/HTML/Element/label
2540625
40

Kod HTML jest legalny i działa (kliknięcie dowolnej etykiety spowoduje przeniesienie fokusu na dane pole).

Jest to trochę trudniejsze ze względu na dostępność.

Nie jest to „powszechne” podejście iz tego powodu co najmniej jeden wspólny czytnik ekranu (testowałem z NVDA) odczytuje tylko pierwszą etykietę po przeniesieniu fokusu na pole - ignoruje wszelkie dodatkowe etykiety dla tego samego pola.

Jeśli więc Twój komunikat o błędzie znajduje się na górze strony, niewidomy lub niedowidzący użytkownik przeglądający pola w oknie usłyszy tylko komunikat o błędzie, gdy trafi do danego pola, a nie „rzeczywistą” etykietę obok niego.

W związku z tym - jeśli poprawnie sformułujesz komunikat o błędzie, może to być dobra rzecz (z pewnością lepsza niż po prostu zaznaczenie pola nie weryfikującego na czerwono!).

Rob Whelan
źródło
1
To jest poprawne, a prawidłowy sposób kodowania to za pomocą atrybutu opisanego
Cage Rattler.
28

Tak, możesz mieć wiele etykiet wskazujących tę samą kontrolkę formularza. Jest to całkowicie legalne :

<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">

To tylko przykład ... normalnie owinąłbyś te wiersze jedną etykietą, ponieważ są blisko.

Gert Grenander
źródło
13
+1 dla linku do dokumentu, w którym wyraźnie stwierdza się, że „Więcej niż jeden LABELmoże być powiązany z tą samą kontrolką, tworząc wiele odniesień za pomocą foratrybutu”.
alexg