Utilisation des étiquettes pour une meilleure accessibilité des formulaires
Glissez pour afficher le menu
L’élément <label> est utilisé pour associer une étiquette à un champ de saisie dans un formulaire. Cette association aide les utilisateurs à comprendre l’information demandée dans le champ du formulaire. Lorsqu’un utilisateur clique sur l’étiquette, le champ de saisie correspondant reçoit automatiquement le focus.
Il existe deux façons de relier les éléments label et input :
Imbrication
Vous pouvez imbriquer un <input> à l’intérieur d’un <label>, et le navigateur les liera automatiquement.
index.html
Un clic sur « Nom » place le focus sur le champ de saisie.
Utilisation de l'attribut id
Si le champ de saisie ne peut pas être placé à l'intérieur du label, les connecter manuellement :
index.html
Ici, le label utilise for="name" et le champ de saisie utilise id="name". Des valeurs identiques créent la connexion.
En utilisant ces méthodes, vous établissez une connexion visuelle et sémantique entre le champ label et le champ input. Cependant, il peut y avoir des situations où il est impossible d’imbriquer l’élément input dans le label en raison de contraintes de style ou de la logique du site web. Dans ces cas, il est courant de s’appuyer sur la connexion par attributs afin de conserver la flexibilité dans l’application des styles et la mise en œuvre de la logique de fond.
Examinons la différence entre les deux approches en analysant le code illustré dans l’image.
Du point de vue du navigateur, la méthode choisie pour établir la connexion est sans importance. Les deux méthodes permettent de lier l'étiquette et le champ de saisie afin d'améliorer l'utilisabilité et l'accessibilité.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
