Un champ de saisie peut-il avoir deux étiquettes?

134

Mary avait une petite forme, et ses champs étaient étiquetés ainsi.
Chaque fois qu'une erreur s'introduisait, elle semait la confusion.

J'ai une étiquette pour chaque champ de saisie ... affaire assez standard. Après avoir validé le formulaire, j'affiche un petit paragraphe utile en haut du formulaire détaillant les informations manquantes ou incorrectes.

Puis-je avoir deux étiquettes pour le même champ de saisie? Un sous la forme appropriée et un dans le texte de rappel de validation? Y a-t-il une raison pour laquelle je ne devrais pas faire ça?

html forms labels

— aslum
source

Avez-vous essayé ce qui se passe? Si cela fonctionne, je ne pense pas que cela endommagerait votre formulaire ni la page. Et vous obtiendrez un plus car l'utilisation pourra cliquer sur l'erreur de validation et se concentrer sur le bon champ.

— Felipe Cypriano

Je n'ai pas essayé, mais je suppose que ce sera possible. Mais je ne recommande pas de l'utiliser, car une étiquette définit à quoi sert le champ, un message d'erreur ne le fait pas. Je ne devrais donc pas utiliser d'étiquette pour valider les avertissements.

— Guido Hendriks

S'agit-il d'une question générale de conception / d'utilisation de l'interface utilisateur?

— jball

Ouais. Cela "fonctionne" ... mais y a-t-il une raison pour laquelle c'est une mauvaise conception? Je suppose que cela peut être pour des raisons d'accessibilité, mais pour un utilisateur normal, je pense que pouvoir cliquer sur le message d'erreur et être redirigé vers le champ foiré rendrait les choses plus faciles ... Je ne sais tout simplement pas si ce sera le cas gâcher les «lecteurs pour malvoyants» ou autres.

— aslum

Dans certains cas, il est plus facile de placer votre contrôle et votre texte dans un seul label. Vous pouvez même omettre les attributs foret id. La spécification appelle cette association implicite.

— rybo111

Réponses:

158

Je suppose que cette question concerne les formulaires HTML. De la spécification :

L'élément LABEL peut être utilisé pour attacher des informations aux contrôles. Chaque élément LABEL est associé à exactement un contrôle de formulaire.

Ainsi, chaque contrôle de formulaire peut être référencé par plusieurs étiquettes, mais chaque étiquette ne peut référencer qu'un seul contrôle. Donc, s'il est judicieux d'avoir une deuxième étiquette pour un contrôle (et dans la situation que vous décrivez, c'est le cas), n'hésitez pas à ajouter une deuxième étiquette.

— James Sumners
source

C'est vraiment plus une question de convivialité / accessibilité que le HTML. Le html fonctionne.

— aslum

Nous devrions tous utiliser uniquement du code valide, sinon les choses pourraient se briser à l'avenir ou pour quelqu'un d'autre ou avec une bibliothèque JS ou autre.

— SHernandez

La bonne réponse est celle de Rob. Cette solution fonctionne pour les utilisateurs voyants et échoue dans certains lecteurs d'écran. Aslum, je suppose que vous avez accepté la réponse de jsummers ci-dessus avant que Rob ne soumette sa réponse.

— cage hochet

@AvramLavinsky non, c'est la bonne réponse à "un champ peut-il avoir deux étiquettes?" La spécification est assez claire. La façon dont les clients choisissent d'interpréter cela dépend d'eux. Votre lien vers «aria-describedby», qui renvoie vers «aria-namedby», est le moyen de «réparer» les lecteurs d'écran cassés.

— James Sumners

Drôle MDN dit "Une entrée peut être associée à plusieurs étiquettes." developer.mozilla.org/en-US/docs/Web/HTML/Element/label

— 2540625

Le HTML est légal, et cela fonctionne (cliquer sur l'une des étiquettes transférera le focus sur le champ en question).

C'est un peu plus difficile à faire pour des raisons d'accessibilité.

Ce n'est pas une approche "commune", et à cause de cela au moins un lecteur d'écran commun (que j'ai testé avec NVDA) ne lit que la première étiquette lorsque vous déplacez le focus dans le champ - il ignore les étiquettes supplémentaires pour le même champ.

Ainsi, si votre message d'erreur se trouve en haut de la page, un utilisateur aveugle ou malvoyant qui parcourt les champs n'entendra que le message d'erreur lorsqu'il atterrit sur le champ en question, et non l'étiquette «réelle» à côté.

Par conséquent, si vous formulez correctement le message d'erreur, cela pourrait être une bonne chose (certainement mieux que de simplement mettre en évidence le champ non validant en rouge!).

— Rob Whelan
source

C'est correct, et la bonne façon de coder ceci est via l' attribut aria-describedby

— cage rattler

Oui, plusieurs étiquettes peuvent pointer sur le même contrôle de formulaire. C'est parfaitement légal :

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

Ceci n'est qu'un exemple ... normalement, vous encapsuleriez ces lignes avec une étiquette puisqu'elles sont proches.

— Gert Grenander
source

+1 pour le lien vers le document où il indique clairement que "plusieurs LABELpeuvent être associés au même contrôle en créant plusieurs références via l' forattribut."

— alexg