Un champ de saisie peut-il avoir deux étiquettes?
Mary avait une petite forme, et ses champs étaient étiquetés ainsi.
Chaque fois qu'une erreur se glissait, la confusion semait.
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 dans le formulaire proprement dit et un dans le texte de rappel de validation? Y a-t-il une raison pour laquelle je ne devrais pas faire cela?
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 logique 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.
Le code HTML est légal, et il fonctionne (en cliquant sur l'une des étiquettes, le focus sera transféré vers le champ en question).
Il est un peu plus délicat de bien faire pour des raisons d'accessibilité.
Ce n'est pas une approche "courante", et à cause de cela, au moins un lecteur d'écran commun (que j'ai testé avec NVDA) ne lit la première étiquette que lorsque vous déplacez la mise au point dans le champ - il ignore toutes les étiquettes supplémentaires pour le même champ.
Donc, si votre message d'erreur se trouve en haut de la page, un utilisateur aveugle ou malvoyant parcourant les champs entendra uniquement le message d'erreur lors de l'atterrissage sur le champ en question, pas le "vrai" label à côté.
Par conséquent - si vous formulez correctement le message d'erreur, cela pourrait être une bonne chose (certainement mieux que de simplement surligner le champ non valide en rouge!).
Oui, vous pouvez avoir plusieurs étiquettes pointant vers 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">
Ce n'est qu'un exemple ... normalement, vous encapsulez ces lignes avec une seule étiquette car elles sont proches.
Bien que légal, ce n'est pas le meilleur moyen d'associer plusieurs étiquettes à un seul <input> élément. Au lieu de cela, vous devez utiliser le aria-labelledby attribut.
Vous donnez d'abord des attributs id uniques aux <label> éléments. Vous placez ensuite un aria-labelledby attribut sur le <input> élément, définissant sa valeur sur les valeurs id du <label> éléments, séparés par un espace.
Voici l'exemple de la page "Utilisation de l'attribut aria-labelledby" dans les documents Web MDN:
<div id="billing">Billing</div> <div> <div id="name">Name</div> <input type="text" aria-labelledby="billing name"/> </div> <div> <div id="address">Address</div> <input type="text" aria-labelledby="billing address"/> </div>