L'espace entre la case à cocher et l'étiquette doit-il être cliquable?
Prenons, par exemple, ces deux scénarios. HTML très similaires, mais sémantiquement différents:
Scénario 1:
<label for="myCheckbox">
<input type="checkbox" id="myCheckbox" />
My Checkbox
</label>
Scénario 2:
<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">My Checkbox</label>
Ces deux éléments apparaissent pour produire exactement la même chose. Mais ce n'est pas le cas. La différence est l'espace implicite entre la case à cocher et l'étiquette. Dans le premier scénario, cet espace activerait également la case à cocher car il fait partie de l'étiquette. Cependant, le deuxième scénario ne le serait pas car il est en dehors de l'étiquette. Cela crée une petite quantité d'espace où, si l'utilisateur cliquait, il n'activerait pas la case à cocher comme prévu.
En fonction de la configuration de la case à cocher, il pourrait y avoir un espace encore plus grand là-bas. Comme si vous flottiez la case à cocher vers la gauche et placez une marge de 10, 15 ou 20 pixels à droite.
Normalement, quand je pense à l'UX, j'essaie de rendre tout le bloc associé cliquable pour la même chose. Pour moi, le côté gauche de la case à cocher jusqu'au côté droit de son étiquette doit faire partie d'un bloc solide qui active le contrôle.
L'espace entre la case à cocher et son texte d'étiquette doit-il également l'activer? Quelles sont les circonstances (le cas échéant) dans lesquelles vous ne voudriez pas faire cela?
Je crois que cela devrait être le cas car toute la région aux yeux de l'utilisateur est la "sélection". Maintenant, je pense que vous pouvez regarder cette question sous un autre angle qui est ... comment pouvons-nous supprimer la perception d'un espace?
Une solution consiste à inclure un arrière-plan entourant la zone de case à cocher et d'étiquette. En survolant, l'arrière-plan peut également changer de couleur pour renforcer encore la possibilité de sélectionner toute cette zone. 
Je suis d'accord avec votre sentiment que la zone entière de gauche de la case à cocher à droite de l'étiquette doit être cliquable, car cela permet de réduire le nombre de clics et d'aider sur les appareils tactiles.
L'icône de la souris doit également l'indiquer visuellement sur toute la zone cliquable.
Selon http://www.w3.org/wiki/HTML/Elements/label votre premier scénario est incorrect et devrait être répertorié comme:
<!-- SCENARIO 1 -->
<label>
<input type="checkbox" id="myCheckbox" />
My Checkbox
</label>
Maintenant, de l'autre côté, comment gérer l'espace implicite?
<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">My Checkbox</label>
vs
<!-- SCENARIO 1 -->
<label>
<input type="checkbox" id="myCheckbox" />
My Checkbox
</label>
Je vais les re-décomposer, avec quelques remarques de mise en forme
<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" /><!-- implicit HTML space exists here, is outside "label" -->
<label for="myCheckbox">My Checkbox</label>
vs
<!-- SCENARIO 1 -->
<label>
<input type="checkbox" id="myCheckbox" /><!-- implicit HTML space exists here, is inside "label" -->
My Checkbox
</label>
L'espace entre la case à cocher et son texte d'étiquette doit-il également l'activer?
Le scénario 2 doit avoir un espace non cliquable entre la case à cocher et l'étiquette, car l'espace HTML implicite est entre les deux éléments.
Le scénario 1 doit avoir un espace cliquable entre la case à cocher et l'étiquette car il y a un espace HTML implicite adjacent à le nœud de texte et l'élément d'entrée.
Dans quelles circonstances (le cas échéant) vous ne voudriez pas faire cela?
Honnêtement, je ne peux pas penser à une telle circonstance. Personnellement, je veux qu'une région entière autour de ma case à cocher la sélectionne. Voir réponse de Tom R .
Si vous souhaitez empêcher cela à l'avenir, utilisez ce formulaire:
<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" /><label for="myCheckbox">My Checkbox</label>
<!-- non-implicit HTML space here, since the elements directly abut -->
Cependant, vous avez probablement un peu de remplissage sur vos éléments de formulaire pour commencer, donc ils auront de l'espace autour d'eux. Cela devient alors un problème CSS.
Le fait de cliquer sur l'étiquette est parfois utilisé pour accéder à des informations supplémentaires sur la sélection ou pour instancier l'info-bulle au clic plutôt qu'au survol à des fins esthétiques. À moins que cela ne soit nécessaire, la meilleure approche consiste généralement à maximiser la zone cliquable, même si elle n'est pas bien définie visuellement (les boîtes dans les boîtes sont à éviter autant que possible).
Oui, l'espace entre une case à cocher et son étiquette doit être cliquable. En effet, si un utilisateur clique sur l'espace entre les deux, c'est généralement parce qu'il voulait intentionnellement cliquer sur la case à cocher ou sur l'étiquette de texte, mais qu'il a accidentellement déplacé sa souris vers l'espace. Vous devez tenir compte de ces erreurs utilisateur et rendre l'écart cliquable également.
Voici un bon article qui vous montre la bonne façon de rendre vos cases à cocher cliquables: Pourquoi vos cases à cocher de formulaire doivent avoir des étiquettes d'étiquette
À mon avis, oui. Il s'agit simplement d'une continuation du contrôle avec la même action par opposition à deux actions distinctes.
Le seul cas où je peux voir où vous ne voudriez pas que cela se produise est si un clic dans l'un ou l'autre des espaces entraînait des actions différentes. (c'est-à-dire que cliquer sur une étiquette a sélectionné des enfants, d'autres éléments liés au même sujet, etc.)