5568 sujets

Sémantique web et HTML

Est-ce que les règles de l'art permettent d'assigner 2 label à un élément de formulaire ?




Bonjour,

Je me pose la question suivante et ne suis pas sûr qu'il n'y ait aucune réserve à cette pratique.
Le validateur du W3C n'a rien contre mais l'avis d'experts pratiquants conforterait mon avis.

J'ai bien conscience que le second label d'un élément de formulaire pourrait être remplacé par un span mais label apporte tout de même plus de sens et possède un invantage intrinsèque qui permet de placer le focus d'un simple clique.

Merci d'avoir prit la peine de répondre et de motiver votre réponse. Excellent week-end à toutes et tous.
Smiley smile
salut,
La première chose qui me vient à l'esprit est comment ?
Un label est rattaché à son input via un id et l'input n'aura qu'un seul id donc à moins que je sois fatigué, je ne vois pas comment pourrait-on faire ?

EDIT: je suis en effet très fatigué, je sors...
Modifié par Zelalsan (11 Nov 2017 - 19:40)
En fait c'est insensé de vouloir mettre deux labels pour 1 input car 1 label est attaché à 1 fonctionnalité et seulement une ...
Soldat8889 a écrit :
En fait c'est insensé de vouloir mettre deux labels pour 1 input car 1 label est attaché à 1 fonctionnalité et seulement une ...

Ben justement, si l'on veut proposer une deuxième fonctionnalité pour un même champ on pourra mettre un deuxième label... mais je n'ai jamais utilisé cette possibilité.

PS : l'inverse n'est pas vrai, un label ne peut contrôler 2 champs.
Soldat8889 a écrit :
En fait c'est insensé de vouloir mettre deux labels pour 1 input car 1 label est attaché à 1 fonctionnalité et seulement une ...

N'enlève pas le fait que 2 labels peuvent référer à un même input. Smiley cligne
Bonsoir,

Je remercie Zelalsan, Bzh, Soldat8889 et OlivierC pour vos réponses et au vu des résultats de ce sondage à cet instant (0 pour, 1 contre et 1 ça dépend) je sens comme un certain scepticisme.

Avant de vous apporter plus de précision sur le pourquoi de la question, je souhaite attendre un petit peu afin que celui-ci s'étoffe un peu plus, mais promis, je ne vous laisserai pas sur votre faim. De plus, je ne souhaite pas que vos réponses soient influencées par mon exemple. Restons pour l'instant sur une vision purement théorique de la chose.

@Zelalsan: Ça arrive, même aux meilleurs Smiley langue .

@bzh: Je te remercie pour ce lien Smiley biggrin . Mes recherches ne m'avaient pas conduites vers ce sujet qui confirme mon intuition et explique ainsi pourquoi le validateur du W3C n'a pas bronché mot Smiley smile .

@Soldat8889: Ce commentaire se rapproche beaucoup de l'idée première de Zelalsan Smiley sweatdrop . Je suis tout à fait d'accord sur le fait qu'un label ne peut-être rattaché qu'à une seule fonctionnalité ; c'est pourquoi l'attribut for ne peut contenir qu'un unique identifiant.
La question n'est pas là. En effet, il s'agit d'avoir plusieurs labels différents dont l'attribut for renvoi vers un même et unique identifiant, soit vers la même fonctionnalité Smiley smile .

@OlivierC: Qui sait, peut-être il y aura-t-il quelle-chose d'utile pour toi à tirer de ce sujet ?! Smiley ravi


Comme je le disais dans l'énoncé de la question, il est bien sûr envisageable de remplacer ce second label par un élément neutre. Néanmoins ce qui est intéressant avec cette méthode est qu'elle enrichirait la sémantique du formulaire sans, à ma connaissance, que ce soit au détriment d'autres aspects.
Si c'est le cas, quels sont-ils ?


En attendant d'en apprendre plus, je vous souhaite une excellente soirée. Smiley smile


Edit: Je n'avais pas vus la participation de OlivierC Smiley confus .
Note à moi-même: penser à rafraîchir l'onglet avant de répondre Smiley fache

Modifié par Greg_Lumiere (12 Nov 2017 - 20:47)
Modérateur
Pour l'accessibilité il vaudrait mieux ne pas avoir plusieurs labels (merci la navigation horrible), par contre rajouter de la précision avec aria-describedby:


<label for="resetpass">Reset Password:</label>
<input type="password" name="resetpass" id="resetpass" aria-describedby="newpass">
<br>
<span id="newpass">New password must be 8-15 characters and include letters and numbers</span> 

voir https://webaim.org/techniques/forms/advanced#multiple
Bonjour ,
Jquery validate utilise un label quand il affiche une erreur. Donc quand on clique sur l'erreur le champ en erreur prend le focus.
On peut imaginer que l'erreur soit :
"Vous devez saisir votre age" on clique et cela nous ramène sur le champ en erreur.
Après je ne sais pas si c'est bien ou pas au niveau code HTML, mais je trouve cela bien.
https://jqueryvalidation.org/files/demo/

Juste un petite info :
Ce que disait le HTML 4 :
Chaque élément LABEL est associé à un seul contrôle de formulaire.
Ce que dit le HTML5.1 si je comprend bien (je suis pas non plus un pro de l'anglais) et en traduisant vite fait c'est que :
Les input, textarea,... ont une NodeList contenant les <label> associés.
Donc je pense que mettre plusieurs label pointant sur le même élément de formulaire est autorisé, le w3c ne considère pas cela comme une erreur.
Labelable elements have a NodeList object associated with them that represents the list of <label> elements, in tree order,..
https://www.w3.org/TR/html51/sec-forms.html#the-label-element
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. Smiley smile



@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 ! Smiley biggrin
Ce serait intéressant d'avoir une page pour tester ça avec un lecteur d'écran. JE suis moi-même utilisateur de lecteur d'écran et l'emploi de deux labels me laisse sceptique, au-delà de la validité purement technique.
Modifié par QuentinC (19 Nov 2017 - 08:19)
Tiens je viens de lire ce sujet qui parle exactement de ton problème.
https://www.w3.org/WAI/tutorials/forms/instructions/#using-aria-labelledby

Le WAI propose 2 méthodes pour suggérer un format d'un input
L'exemple est un input qui attend une date au format MM/YYYY

Méthode 1 : utilisation de aria-labelledby qui pointe vers le label et un span qui contient le format attendu
<label id="expLabel" for="expire" tabindex="-1">Expiration date:</label>
<span>
	<input type="text" name="expire" id="expire" aria-labelledby="expLabel expDesc">
	<span id="expDesc" tabindex="-1">MM/YYYY</span>
</span>


Méthode 2 : utilisation de describedby qui pointe vers un span qui décrit le format attendu (méthode proposée par kustolovic un peu plus haut dans le sujet)
<label id="expLabel" for="expire">Expiration date:</label>
<span>
	<input type="text" name="expire" id="expire" aria-labelledby="expLabel" aria-describedby="expDesc">
	<span id="expDesc">MM/YYYY</span>
</span>

Modifié par taspeur (11 Dec 2017 - 22:39)
Bonjour,

Attention, je pense que la css content n'est pas interprétée par tous les lecteurs d'écran.

D'autre pas, je pense que tu utiles mal les aria-labelledby , mais n'étant pas un expert je mets des guillemet dans ce que je dis.
Prenons l'exemple ci-dessous que j'ai pris dans Accessibles form objects. :
<fieldset id="Textarea-Required">
    <legend>Textarea</legend>
    <label for="textarea">Required with restrictions</label>
    <textarea id="textarea" name="textarea-data" placeholder="from 5 to 500 caracters" minlength="5" maxlength="500" rows="2" autocomplete="off" aria-required="true" required=""></textarea>
    <span class="field-requirement" aria-describedby="textarea">field require</span>
    <span class="field-placeholder" aria-describedby="textarea">from 5 to 5000 caracters</span>
  </fieldset>

field require, from 5 to 5000 caracters ne sont pas décrits par id="textarea"
c'est id="textarea" qui est décrit par field require et from 5 to 5000 caracters
Salut,

Cela n'a pas vraiment de sens.
Describedby, cela veut dire "décrit par"
Tes span seraient donc décrit par l'id textarea. Ce qui est en fait l'inverse, c'est textarea qui est décrit par les span. Donc c'est texarea qui doit recevoir l'attribut describedby Smiley cligne
Bonjour,

QuentinC a écrit :
Ce serait intéressant d'avoir une page pour tester ça avec un lecteur d'écran. JE suis moi-même utilisateur de lecteur d'écran et l'emploi de deux labels me laisse sceptique, au-delà de la validité purement technique.
Je n'ai pas laissé tombé le sujet je vous rassure mais je suis actuellement pris par d'autres recherches.

Je mettrai en ligne une page qu'il sera possible de tester avec un lecteur d'écran et posterai ici dès que ce sera fait car je suis très intéressé par le retour d'expérience qui peut en résulter.


Affaire à suivre...
Bonjour,

Je me permets de déterrer ce sujet fort intéressant.

Un des nombreux cas où deux labels sont souhaitables est une liste de cartes bancaires, le client devant choisir par exemple entre e-carte, CB ou Visa :

<ul>
<li><label for="E-CARTEBLEUE"><img src="E-CARTEBLEUE.gif" alt="e-Carte" width="72" height="25" /></label></li>
<li><input type="radio" name="moyen" id="E-CARTEBLEUE" value="E-CARTEBLEUE"  />e-Carte</li>
</ul>
<ul>
<li><label for="CB"><img src="CB.gif" alt="CB" width="29" height="25" /></label></li>
<li><input type="radio" name="moyen" id="CB" value="CB"  />CB</li>
</ul>
<ul>
<li><label for="VISA"><img src="VISA.gif" alt="Visa" width="66" height="25" /></label></li>
<li><input type="radio" name="moyen" id="VISA" value="VISA"  />Visa</li>
</ul>


Si j'ai bien compris.
1) Ne pas mettre 2 labels pour l'accessibilité.
2) Utiliser aria-labelledby
3) Conserver un label pour les vieux coucous qui ne comprennent pas aria-labelledby

Donc ce code est-il bon ?

<ul>
<li><label for="E-CARTEBLEUE"><img id="AA" src="E-CARTEBLEUE.gif" alt="e-Carte" width="72" height="25" /></label></li>
<li><input type="radio" name="moyen" id="E-CARTEBLEUE" value="E-CARTEBLEUE"   aria-labelledby="AA AB" /><span id="AB">e-Carte</span></li>
</ul>

Modifié par boteha_2 (27 Dec 2018 - 20:40)