{"id":5412,"date":"2026-07-16T09:29:18","date_gmt":"2026-07-16T07:29:18","guid":{"rendered":"https:\/\/ideance.net\/blog\/?p=5412"},"modified":"2026-07-17T15:20:25","modified_gmt":"2026-07-17T13:20:25","slug":"6-mauvaises-facons-dutiliser-la-balise-label-pour-un-champ-de-formulaire","status":"publish","type":"post","link":"https:\/\/ideance.net\/blog\/en\/5412\/6-mauvaises-facons-dutiliser-la-balise-label-pour-un-champ-de-formulaire\/","title":{"rendered":"6 mauvaises fa\u00e7ons d\u2019utiliser la balise label pour un champ de formulaire"},"content":{"rendered":"

Qu’est-ce qu’un <label><\/code> ?<\/h2>\n\n\n\n

Le <label><\/code> permet d’associer un intitul\u00e9 \u00e0 un champ de formulaire (<input><\/code>, <select><\/code>, <textarea><\/code>…).<\/p>\n\n\n\n

Cette association est essentielle pour les personnes aveugles ou fortement malvoyantes qui utilisent un lecteur d’\u00e9cran, mais aussi pour les personnes ayant des troubles moteurs (elle agrandit la zone cliquable du champ).<\/p>\n\n\n\n

Voici un exemple simple :<\/p>\n\n\n\n

<label for=\"email\">Adresse e-mail<\/label>\n<input type=\"email\" id=\"email\"><\/code><\/pre>\n\n\n\n
Pourtant, lors des audits de conformit\u00e9 au RGAA ou RAWeb, le <label><\/code> est tr\u00e8s souvent mal utilis\u00e9, voire compl\u00e8tement absent.<\/p>\n\n\n\n
Voici les erreurs les plus courantes.<\/p>\n\n\n\n
1 : L’oubli pur et simple<\/h2>\n\n\n\n
C’est l’erreur la plus basique mais aussi une des plus fr\u00e9quentes.<\/p>\n\n\n\n
Adresse e-mail<\/mark><\/strong>\n<input type=\"email\" id=\"email\"><\/code><\/pre>\n\n\n\n
Sans <label><\/code> associ\u00e9, les technologies d’assistance peuvent :<\/p>\n\n\n\n
    \n
  • Ne rien annoncer du tout.<\/li>\n\n\n\n
  • Ou lire un intitul\u00e9 g\u00e9n\u00e9rique et inutile comme \u00ab champ de saisie \u00bb.<\/li>\n<\/ul>\n\n\n\n
    \u00c0 retenir : tout champ de formulaire doit avoir un label associ\u00e9, sans exception.<\/strong><\/p>\n\n\n\n
    2 : Casser l’association avec le for<\/code> \/ id<\/code><\/h2>\n\n\n\n
    Parfois le <label><\/code> existe mais il n’est associ\u00e9 \u00e0 rien, \u00e0 cause d’une faute de frappe ou d’un id<\/code> dupliqu\u00e9 ailleurs sur la page.<\/p>\n\n\n\n
    <label for=\"mail\"<\/strong><\/mark>>Adresse e-mail<\/label>\n<input type=\"email\" id=\"email\"<\/strong><\/mark>><\/code><\/pre>\n\n\n\n
    Ici, for=\"mail\"<\/code> ne correspond \u00e0 aucun id=\"mail\"<\/code> : le lien est rompu. Le lecteur d’\u00e9cran annoncera le champ sans son intitul\u00e9.<\/p>\n\n\n\n
    <label for=\"email\"<\/strong><\/mark>>Adresse e-mail<\/label>\n<input type=\"email\" id=\"email\"<\/mark><\/strong>><\/code><\/pre>\n\n\n\n
    \u00c0 retenir : le for<\/code> et l’id<\/code> doivent \u00eatre identiques, uniques dans la page, et v\u00e9rifi\u00e9s apr\u00e8s chaque modification du code.<\/strong><\/p>\n\n\n\n
    3 : Un label trop vague, coup\u00e9 de son contexte<\/h2>\n\n\n\n
    Un intitul\u00e9 peut \u00eatre pr\u00e9sent et pourtant inutile une fois lu hors contexte visuel.<\/p>\n\n\n\n
    <label for=\"champ1\">Nom<\/mark><\/strong><\/label>\n<input type=\"text\" id=\"champ1\">\n\n<label for=\"champ2\">Nom<\/mark><\/strong><\/label>\n<input type=\"text\" id=\"champ2\"><\/code><\/pre>\n\n\n\n
    Un lecteur d’\u00e9cran \u00e9noncera deux fois \u00ab Nom \u00bb, sans qu’on sache lequel concerne la personne factur\u00e9e et lequel concerne le destinataire.<\/p>\n\n\n\n
    <label for=\"nom-facturation\">Nom (facturation)<\/strong><\/mark><\/label>\n<input type=\"text\" id=\"nom-facturation\">\n\n<label for=\"nom-livraison\">Nom (destinataire de la livraison)<\/strong><\/mark><\/label>\n<input type=\"text\" id=\"nom-livraison\"><\/code><\/pre>\n\n\n\n
    \u00c0 retenir : un label doit rester compr\u00e9hensible m\u00eame sorti de son environnement visuel.<\/strong><\/p>\n\n\n\n
    4 : Utiliser un placeholder<\/code> \u00e0 la place d’un <label><\/code><\/h2>\n\n\n\n
    Une erreur tr\u00e8s r\u00e9pandue consiste \u00e0 se dire qu’un placeholder<\/code> suffit.<\/p>\n\n\n\n
    <input type=\"search\" placeholder=\"Nom complet\"<\/mark><\/strong>><\/code><\/pre>\n\n\n\n
    Probl\u00e8me : ici, rien n’indique \u00e0 un lecteur d’\u00e9cran \u00e0 quoi correspond ce champ. Le placeholder<\/code> dispara\u00eet d\u00e8s que l’utilisateur commence \u00e0 saisir du texte, et son support par les lecteurs d’\u00e9cran est in\u00e9gal. Une personne qui perd le fil (interruption, trouble de la m\u00e9moire de travail) ne sait plus ce qui \u00e9tait demand\u00e9.<\/p>\n\n\n\n
    <label for=\"nom\">Nom complet<\/label><\/mark><\/strong>\n<input type=\"text\" id=\"nom\" placeholder=\"Jean Dupont\"<\/mark><\/strong>><\/code><\/pre>\n\n\n\n
    \u00c0 retenir : le placeholder<\/code> est un compl\u00e9ment (un exemple de format), jamais un substitut au <label><\/code>.<\/strong><\/p>\n\n\n\n
    5 : Multiplier les intitul\u00e9s qui se contredisent<\/h2>\n\n\n\n
    Un pi\u00e8ge classique : empiler <label><\/code>, aria-label<\/code> et aria-labelledby<\/code> sur un m\u00eame champ, en esp\u00e9rant que cela soit d’avantage accessible.<\/p>\n\n\n\n
    <label for=\"tel\">T\u00e9l\u00e9phone<\/mark><\/strong><\/label>\n<input type=\"tel\" id=\"tel\" aria-label=\"Num\u00e9ro de portable\"<\/mark><\/strong>><\/code><\/pre>\n\n\n\n
    Quand plusieurs sources de nommage coexistent, l’ordre de priorit\u00e9 du navigateur peut ignorer le <label><\/code> visible au profit de l’aria-label<\/code>, cr\u00e9ant un d\u00e9calage entre ce que voit une personne voyante et ce qu’entend une personne aveugle.<\/p>\n\n\n\n
    Cela peut \u00e9galement cr\u00e9er des probl\u00e9matiques pour les reconnaissances vocales qui cibleront aussi l’aria-label<\/code> et non l’intitul\u00e9 visible. <\/p>\n\n\n\n
    <label for=\"tel\">T\u00e9l\u00e9phone<\/label>\n<input type=\"tel\" id=\"tel\"><\/code><\/pre>\n\n\n\n
    \n
    \u00c0 retenir : un seul m\u00e9canisme de nommage \u00e0 la fois, sauf besoin r\u00e9ellement justifi\u00e9.<\/strong><\/p>\n\n\n\n
    6 : Ne pas distinguer label visible et label accessible<\/h2>\n\n\n\n
    Un champ de recherche ne poss\u00e8de parfois aucun texte, seulement une ic\u00f4ne. Dans cet exemple l’ic\u00f4ne n’est qu’une image de fond CSS, invisible pour les technologies d’assistance.<\/p>\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n
    <input type=\"search\" class=\"champ-recherche\"><\/code><\/pre>\n\n\n\n
    .champ-recherche {\n  background: url(\"loupe.svg\");\n}<\/code><\/pre>\n\n\n\n
    Pour y rem\u00e9dier, une solution consiste \u00e0 masquer un <label><\/code> gr\u00e2ce \u00e0 CSS.<\/p>\n\n\n\n
    Attention cependant, n’utilisez pas display:none<\/code> ou visibility:hidden<\/code> pour \u00ab faire dispara\u00eetre \u00bb le texte car ces propri\u00e9t\u00e9s CSS retirent aussi l’\u00e9l\u00e9ment de l’arbre d’accessibilit\u00e9. Le label dispara\u00eet donc pour tout le monde, y compris pour le lecteur d’\u00e9cran.<\/p>\n\n\n\n
    \u00c0 la place, utiliser une classe CSS qui permet la restitution uniquement \u00e0 certaines technologies d\u2019assistance (dont les lecteurs d\u2019\u00e9cran) :<\/p>\n\n\n\n
    .visually-hidden<\/mark><\/strong> {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twhite-space: nowrap;\n\tborder-width: 0;\n}<\/code><\/pre>\n\n\n\n
    Cette technique masque le texte visuellement tout en le laissant accessible aux technologies d’assistance.<\/p>\n\n\n\n
    <label for=\"recherche\" class=\"visually-hidden\">Rechercher sur le site<\/label><\/mark><\/strong>\n<input type=\"search\" class=\"champ-recherche\"><\/code><\/pre>\n<\/div><\/div>\n\n\n\n
    \u00c0 retenir : un champ dont le seul rep\u00e8re visuel est une ic\u00f4ne a quand m\u00eame besoin d’un label accessible, masqu\u00e9 avec une technique adapt\u00e9e.<\/strong><\/p>\n\n\n\n
    Conclusion : comment bien utiliser le <label><\/code> ?<\/h2>\n\n\n\n
    Comme souvent en accessibilit\u00e9, la r\u00e8gle est \u00ab simple \u00bb mais demande de la rigueur.<\/p>\n\n\n\n
    Priorit\u00e9s \u00e0 respecter :<\/p>\n\n\n\n
      \n
    • Associer un <label><\/code> \u00e0 chaque champ de formulaire.<\/li>\n\n\n\n
    • V\u00e9rifier que for<\/code> et id<\/code> correspondent bien.<\/li>\n\n\n\n
    • Garder les intitul\u00e9s compr\u00e9hensibles hors contexte.<\/li>\n\n\n\n
    • Masquer un label visuellement sans le retirer de l’arbre d’accessibilit\u00e9.<\/li>\n\n\n\n
    • \u00c9viter les m\u00e9canismes de nommage multiples et contradictoires.<\/li>\n<\/ul>\n\n\n\n
      Et surtout : penser \u00e0 l’utilisateur final.<\/p>","protected":false},"excerpt":{"rendered":"
      La balise label permet d\u2019\u00e9tiqueter des champs de formulaire. Elle est essentielle pour les personnes aveugles ou fortement malvoyantes qui utilisent un lecteur d’\u00e9cran, mais aussi pour les personnes ayant des troubles moteurs (elle agrandit la zone cliquable du champ).<\/p>","protected":false},"author":6,"featured_media":5444,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22],"tags":[],"class_list":["post-5412","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css-et-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts\/5412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/comments?post=5412"}],"version-history":[{"count":64,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts\/5412\/revisions"}],"predecessor-version":[{"id":5652,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts\/5412\/revisions\/5652"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/media\/5444"}],"wp:attachment":[{"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/media?parent=5412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/categories?post=5412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/tags?post=5412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}