Un campo di input può avere due etichette?

134

Mary aveva una piccola forma e i suoi campi erano etichettati proprio così.
Ogni volta che si verificava un errore, si confondeva la confusione.

Ho un'etichetta per ogni campo di input ... affare piuttosto standard. Dopo aver convalidato il modulo, visualizzo un utile piccolo paragrafo nella parte superiore del modulo che descrive in dettaglio quali informazioni mancano o sono errate.

Posso avere due etichette per lo stesso campo di input? Uno nella forma corretta e uno nel testo del promemoria di convalida? C'è qualche motivo per cui non dovrei farlo?

html forms labels

— aslum
fonte

Hai provato cosa succede? Se funziona, non credo che provocherebbe danni al modulo né alla pagina. E otterrai un vantaggio perché l'uso sarà in grado di fare clic sull'errore di convalida e concentrarsi sul campo corretto.

— Felipe Cypriano,

Non l'ho provato, ma credo che sarà possibile. Ma non consiglio di usarlo, poiché un'etichetta definisce lo scopo del campo, un messaggio di errore no. Quindi non dovrei usare un'etichetta per gli avvisi di convalida.

— Guido Hendriks,

Si tratta di una domanda generale di progettazione / usabilità dell'interfaccia utente?

— jball,

Si. "Funziona" ... ma c'è qualche motivo per cui questo è un cattivo design? Immagino che potrebbe essere per motivi di accessibilità, ma per un utente normale immagino di essere in grado di fare clic sul messaggio di errore ed essere portato nel campo incasinato renderebbe le cose più facili ... Non so se lo farà rovinare "lettori per non vedenti" o simili.

— aslum,

In alcuni casi, è più facile inserire il controllo e il testo all'interno di uno label. Puoi persino omettere gli attributi fore id. La specifica chiama questa associazione implicita.

— Rybo111,

Risposte:

158

Presumo che questa domanda riguardi i moduli HTML. Dalla specifica :

L'elemento LABEL può essere utilizzato per allegare informazioni ai controlli. Ogni elemento LABEL è associato esattamente a un controllo modulo.

Pertanto, ogni controllo del modulo può essere referenziato da più etichette, ma ogni etichetta può fare riferimento a un solo controllo. Quindi, se ha senso avere una seconda etichetta per un controllo (e nella situazione che descrivi, lo fa) sentiti libero di aggiungere una seconda etichetta.

— James Sumners
fonte

È davvero più una domanda di usabilità / accessibilità che l'HTML. L'html funziona.

— aslum,

Dovremmo usare tutti solo un codice valido, altrimenti le cose potrebbero rompersi in futuro o per qualcun altro o con qualche libreria JS o altro.

— SHernandez,

La risposta corretta è quella di Rob. Questa soluzione funziona per gli utenti vedenti e non riesce in alcuni screen reader. Aslum, supponendo che tu abbia accettato la risposta di jsummers sopra prima che Rob inviasse la sua risposta.

— cage rattler

@AvramLavinsky no, questa è la risposta corretta a "un campo può avere due etichette?" Le specifiche sono abbastanza chiare. Il modo in cui i clienti scelgono di interpretare dipende da loro. Il tuo link ad "aria-descritto da", che collega ad "aria-etichettato da", è il modo di "riparare" i lettori di schermi rotti.

— James Sumners,

Funny MDN dice "Un input può essere associato a più etichette". developer.mozilla.org/en-US/docs/Web/HTML/Element/label

— 2540625

L'HTML è legale e funziona (facendo clic su una qualsiasi delle etichette si trasferirà il focus sul campo in questione).

È un po 'più complicato fare bene per motivi di accessibilità.

Non è un approccio "comune" e, a causa di ciò, almeno un lettore di schermo comune (che ho testato con NVDA) legge la prima etichetta solo quando si sposta lo stato attivo sul campo: ignora eventuali etichette aggiuntive per lo stesso campo.

Quindi, se il tuo messaggio di errore si trova nella parte superiore della pagina, un utente cieco o ipovedente che passa in rassegna i campi sentirà solo il messaggio di errore quando atterra sul campo in questione, non l'etichetta "reale" accanto ad esso.

Quindi - se pronunci correttamente il messaggio di errore, potrebbe essere una buona cosa (sicuramente meglio che evidenziare in rosso il campo non validante!).

— Rob Whelan
fonte

Questo è corretto e il modo corretto per codificarlo è tramite l' attributo aria-descritto da

— cage rattler

Sì, puoi avere più etichette che puntano allo stesso controllo modulo. Questo è perfettamente legale :

<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">

Questo è solo un esempio ... normalmente potresti avvolgere queste righe con un'etichetta poiché sono vicine.

— Gert Grenander
fonte

+1 per il collegamento al documento in cui si afferma chiaramente che "Più di uno LABELpuò essere associato allo stesso controllo creando più riferimenti tramite l' forattributo".

— alex