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

Mary avait une petite forme, et ses champs étaient étiquetés juste comme ça.
À chaque fois qu’une erreur se glissait, il y aurait confusion.

J’ai un label pour chaque champ de saisie … une affaire assez classique. 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 le faire?

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 faire référence 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, cela est le cas), n’hésitez pas à append une deuxième étiquette.

Le HTML est légal, et cela fonctionne (cliquer sur n’importe laquelle des étiquettes transférera le focus au champ en question).

C’est un peu plus compliqué à faire pour des raisons d’accessibilité.

Ce n’est pas une approche “commune” et à cause de cela, au moins un lecteur d’écran commun (j’ai testé avec NVDA) ne lit que la première étiquette lorsque vous déplacez le focus dans le champ.

Donc, si votre message d’erreur est en haut de la page, un utilisateur aveugle ou malvoyant effectuant une tabulation à travers les champs entendra uniquement le message d’erreur lorsqu’il atterrira sur le champ en question, et non l’étiquette «réelle» à côté.

Par conséquent, si vous écrivez correctement le message d’erreur, cela pourrait être une bonne chose (certainement mieux que de simplement mettre en surbrillance le champ de non-validation en rouge!).

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

     

Ceci est juste un exemple … normalement, vous envelopperiez ces lignes avec une étiquette car elles sont proches.

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 une étiquette pour les avertissements de validation.

Avez-vous essayé ce qui se passe? Si cela fonctionne, je ne crois pas que cela pourrait endommager votre formulaire ou la page. Et vous obtiendrez un plus car l’utilisation pourra cliquer sur l’erreur de validation et se concentrer sur le champ correct.

Bien que légal, ce n’est pas le meilleur moyen d’associer plusieurs étiquettes à un seul élément . Au lieu de cela, vous devez utiliser l’atsortingbut aria-labelledby .

Vous devez d’abord atsortingbuer des atsortingbuts uniques aux éléments . Vous placez ensuite un atsortingbut aria-labelledby sur l’élément , définissant sa valeur sur les valeurs d’ id des éléments , séparés par un espace.

Voici l’exemple de la page “Utilisation de l’atsortingbut aria-labelledby” dans les documents Web MDN:

 
Billing
Name
Address