Cases à cocher d'entrée enveloppées dans <étiquettes>
J'ai généralement tendance à envelopper mes cases à cocher et bouton radio dans leurs étiquettes respectives et je me demandais si cela était considéré comme une bonne pratique UX.
Avantages/inconvénients?
L'une de mes principales raisons est que cela aide à l'alignement des éléments car nous n'utilisons principalement qu'un seul élément pour le positionnement, tout en ayant des cases à cocher/radiobutton en dehors de l'étiquette, crée deux éléments qui vont souvent côte à côte, créant ainsi une mise en page problématique où ils les deux doivent être enveloppés dans un élément parent pour conserver le statut du bloc avec les autres éléments du formulaire.
Enveloppez l'étiquette autour de la case à cocher . Cela rend beaucoup plus facile de cliquer sur le bouton.
Si l'étiquette est distincte du contrôle, il existe souvent un espace non cliquable entre eux.
<input id="click-me" name="click-me" type="checkbox"/>
<label for="click-me">
Click me
</label>
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Envelopper l'étiquette autour du contrôle supprime cet espace.
<label for="no-click-me">
<input id="no-click-me" name="no-click-me" type="checkbox"/>
No, click me
</label>
4 bonnes raisons d'envelopper les deux <input type=radio> et <input type=checkbox> dans leur <label>.
- Facilité d'utilisation: "zone de frappe" plus grande = meilleure.
- Style: vous créez un contexte facile à isoler dans une cascade CSS. entrée {largeur: X%;} étiquette> entrée {largeur: auto;}
- Cette technique passe la validation W3C.
- Je ne vois pas de bonne raison de ne pas le faire.
Ce n'est peut-être pas la meilleure réponse, mais je ne pense pas que ce soit intrinsèquement bon ou mauvais. Cependant, l'un des avantages de l'encapsulation de l'élément de formulaire dans une balise label est que vous pouvez considérablement étendre la zone de l'objet cliquable via des feuilles de style.
Il convient de noter que, à des fins d'accessibilité, le fait de placer l'élément dans une balise d'étiquette n'est pas toujours suffisant. Vous devez toujours donner à vos éléments un ID et vous devez toujours utiliser l'attribut for dans la balise label. Certains lecteurs d'écran ne lieront pas correctement l'étiquette à l'élément de formulaire sans lui.
En dehors de cela, je pense que vous pouvez le faire de toute façon.
(Je m'excuse si cette réponse était de nature plus technique - mais alors, je suis développeur, pas designer.)
Voici la section pertinente de la référence html5:
https://html.spec.whatwg.org/multipage/forms.html#the-label-element
Il dit ceci:
- L'élément label peut contenir au plus un élément d'entrée descendant, un élément button, un élément select ou un élément textarea.
- L'attribut for de l'élément label doit faire référence à un contrôle de formulaire.
Vous pouvez donc l'enrouler autour d'un seul élément de formulaire, et si vous utilisez l'attribut for, il doit faire référence à un élément de formulaire, mais vous n'avez pas à utiliser l'attribut et vous n'avez pas à encapsuler.
D'un point de vue structurel, je préfère considérer l'étiquette comme un élément distinct qui n'est en fait que l'étiquette. Si vous avez besoin de quelque chose pour les contenir tous les deux, je préfère utiliser un conteneur div. De cette façon, vous pouvez styliser les étiquettes de manière générale sans vous soucier des éléments de formulaire qu'ils contiennent. Bien sûr, les éléments de forme de base n'ont pas tendance à hériter du style, la distinction est donc largement académique.
Une raison pour ne pas envelopper une étiquette autour d'une entrée est parce qu'un champ de saisie n'est pas une étiquette. Sémantiquement, je ne pense pas qu'il soit logique de mettre une entrée dans une étiquette. Il n'était pas destiné à être utilisé de cette façon.
Le seul problème que je peux voir survenir lors de l'encapsulation d'une entrée dans une étiquette est le style de l'étiquette lorsque l'état d'entrée est vrai (vérifié). En règle générale, cela peut être facilement accompli avec CSS input:checked + label - lorsque l'entrée sera imbriquée, vous devrez utiliser Javascript pour styliser l'étiquette qui me semble inutile.
L'exemple ici ( https://www.piccolino.com/collections/gliders ) montre des échantillons de couleurs dans le menu du filtre qui affiche une image d'arrière-plan, un état de survol et un état actif à l'aide de l'étiquette - tandis que le l'entrée est masquée et simplement utilisée pour capturer les données du modèle.
Voir aussi Bootstrap pour quelques bons exemples de comment éviter le navigateur croisé, les clics et d'autres problèmes signalés dans les déclarations ci-dessus.
Consultez cette vidéo pour les étiquettes implicites sur les lecteurs d'écran: https://youtu.be/F02AWoK9dXo sur l'article http://usability.com.au/2013/04/accessible-forms-1 -étiquettes-et-identification /
Envelopper la case à cocher à l'intérieur de la balise LABEL est un bon balisage, car cliquer sur 'étiquette' déclenchera le clic de la case à cocher même dans IE8.
Sinon, vous devrez utiliser une solution de contournement JavaScript pour corriger le même problème, qui est du code supplémentaire pour votre site Web.