Bonjour,
La participation sur ce sujet se tarie mais les réponses que vous m'avez apporté répondent parfaitement à mon questionnement. Il me semble donc être le moment opportun pour une conclusion.
De ce que vous m'en dites,
associer plusieurs label à un élément de formulaire est tout à fait conforme et ne transgresse aucune règle. Les recommandations du W3C n’émettent pas d'avis contraire et les navigateurs et validateurs ne s'y opposent pas non plus.
Donc:
<label for="my_input">Étiquette principale de l'input</label>
<input id="my_input">
<!-- EST VALIDE -->
<label for="my_input">Étiquette principale de l'input</label>
<label for="my_input">Étiquette secondaire de l'input</label>
<input id="my_input">
<!-- EST VALIDE AUSSI -->
<label for="my_input">Étiquette principale de l'input</label>
<label for="my_input">Étiquette secondaire de l'input</label>
<input id="my_input">
<label for="my_input">Encore une autre étiquette pour l'input</label>
<!-- EST ENCORE VALIDE -->
<!-- Par contre: -->
<label for="my_input my_input_2">Étiquette principale de l'input</label>
<input id="my_input">
<input id="my_input_2">
<!-- N'EST ABSOLUMENT PAS ENVISAGEABLE (nous sommes d'accord) -->
Néanmoins, et là Kustolovic tu as mis le doigt sur le fond de ma pensée,
cette méthode est une régression en terme d'accessibilité.
Je ne dispose pas d'outil pour constater les problèmes de navigation qui en sont inhérents, pourrais-tu me décrire le comportement d'un assistant dans ce cas de figure Kustolovic ?
En effet, inspiré par un article, cette idée m'est venue afin d'augmenter l'accessibilité des champs de formulaire. Il est recommandé de placer dans le
placeholder d'un champs une aide concernant les attentes en terme de saisie.
Seulement, vous le savez bien, dès que l'utilisateur commence sa saisie, celui-là disparaît pour laisser place à celle-ci.
Mon objectif est dont de permettre à l'utilisateur de pouvoir contrôler la conformité de sa saisie à tout moment.
C'est pourquoi j'ai développé un
pen afin de pouvoir y concentrer les techniques qui améliorent l'accessibilité des composantes d'un formulaire:
Accessibles form objects.
Cette réflexion m'a amenée aux conclusions présentes dans ce
pen et même si le travail n'est pas encore terminé car je n'ai pas traité tous les éléments, je vous invite à y jeter un œil. Je serais fort heureux si vous pouviez m'en faire un retour car j'en suis sûr, des leçons restent à apprendre.
Je vous remercie tous pour votre (précieuse) contribution.
@Aliasdmc à propos de Jquery Validate: Effectivement l'idée est bonne, je cherche moi-même à implémenter une technique dans ce style. Toutefois, au vu des conclusions que j'ai tiré de ce sujet, personnellement je renverrais directement l'utilisateur au champs concerné par une erreur par un scrolling progressif et afficherai à cet endroit 2 choses:
D'une part j'indiquerai qu'il y a une erreur ici et lui donnerai des précisions sur celle-ci (par exemple signifier qu'il a mit un accent alors que le champs ne le tolère pas) avec une mise à jour du message en temps réel (dès que c'est corrigé le message disparaît et laisse place à un truc du genre "problème corrigé, champs valide !").
D'autre part, j'indiquerai s'il y a d'autres erreurs dans le formulaire avec pour chacune d'elle un lien qui lui permette de s'y rendre directement.
D'autant que la méthode que tu me décris revient à améliorer un point d'accessibilité en échange d'un autre (voir message de Kustolovic).
Je vous souhaite une excellente journée, tenez bon le week-end approche !