Qu’est-ce que la balise HTML et comment l’utiliser ?

Avec la balise HTML <label>, vous améliorez l’ergonomie et l’ac­ces­si­bi­lité de votre site Web. Ce tag permet d’associer clai­re­ment un libellé à un champ de saisie, une case à cocher ou un bouton radio. Ce tag fonc­tionne avec les attributs globaux et les attributs d’événement, ainsi qu’avec les attributs for et form, afin d’assurer une liaison correcte entre le libellé et l’élément de for­mu­laire cor­res­pon­dant.

À quoi sert la balise HTML <label> ?

La balise HTML <label> joue un rôle central dans la clarté et l’ac­ces­si­bi­lité d’un site Web. Utilisé dans les for­mu­laires, ce tag ajoute une des­crip­tion explicite à des éléments tels que les champs de saisie, boutons radio ou cases à cocher.

Cela est par­ti­cu­liè­re­ment important dans deux si­tua­tions :

• D’une part, la balise HTML <label> facilite la na­vi­ga­tion sur un site Web pour les visiteurs qui ren­contrent des dif­fi­cul­tés avec de petites zones cli­quables. Comme la zone cliquable est agrandie, l’in­te­rac­tion devient plus simple et plus précise.
• D’autre part, pour les personnes qui utilisent un lecteur d’écran, la balise HTML <label> garantit que le libellé associé puisse être lu à haute voix. Cela améliore l’UX et rend votre site Web plus ac­ces­sible à tous les uti­li­sa­teurs.

En quoi la balise HTML <label> est-elle per­ti­nente pour les WCAG ?

Les for­mu­laires HTML ne doivent pas seulement être com­pré­hen­sibles vi­suel­le­ment, mais aussi respecter les normes actuelles en matière d’ac­ces­si­bi­lité numérique. Les WCAG (Web Content Ac­ces­si­bi­lity Gui­de­lines) 2.2 exigent notamment que tous les champs de saisie disposent d’une étiquette ou d’ins­truc­tions claires (critère de succès 3.3.2 « Labels or Ins­truc­tions »). Cela permet aux personnes ayant des dé­fi­ciences cog­ni­tives ou visuelles de com­prendre pré­ci­sé­ment quelle saisie est attendue.

Par ailleurs, le critère de succès 2.5.3 des WCAG, « Label in Name », impose que le libellé visible figure également dans le code source comme nom ac­ces­sible. L’uti­li­sa­tion correcte de la balise HTML <label> contribue à sa­tis­faire cette exigence. Cela est par­ti­cu­liè­re­ment important pour les personnes qui utilisent des tech­no­lo­gies d’as­sis­tance ou des systèmes de commande vocale.

Comment utiliser la balise HTML <label> en HTML ?

Il existe deux manières d’utiliser la balise HTML <label> en HTML. Les deux variantes ga­ran­tis­sent que les tech­no­lo­gies d’as­sis­tance comme les lecteurs d’écran re­con­nais­sent cor­rec­te­ment le libellé et que les uti­li­sa­teurs puissent accéder di­rec­te­ment au champ de saisie cor­res­pon­dant en cliquant sur ce libellé.

As­so­cia­tion explicite (avec for et id)

Avec la méthode explicite, vous séparez le libellé et le champ de for­mu­laire dans le code HTML, puis vous les reliez à l’aide de l’attribut for, qui fait référence à la valeur id du champ de saisie. Cette approche offre la meilleure com­pa­ti­bi­lité avec les na­vi­ga­teurs et les tech­no­lo­gies d’as­sis­tance. Cette première méthode est donc gé­né­ra­le­ment re­com­man­dée.

<p>
    <input type="checkbox" name="lu" id="read" value="oui" />
    <label for="read">J’ai lu et j’accepte les conditions.</label>
</p>

Il est important que la valeur de l’attribut for cor­res­ponde exac­te­ment à l’attribut id du champ de saisie.

As­so­cia­tion implicite (input dans le label)

Vous pouvez également placer le champ de saisie à l’intérieur de l’élément <label>. Dans ce cas, l’as­so­cia­tion se fait au­to­ma­ti­que­ment, sans qu’il soit né­ces­saire de définir for et id. Cette variante constitue un HTML valide, mais peut présenter des li­mi­ta­tions dans certains en­vi­ron­ne­ments ou tech­no­lo­gies d’as­sis­tance plus anciens.

<p>
    <label>
        <input type="checkbox" name="lu" value="oui" />
        J’ai lu et j’accepte les conditions.
    </label>
</p>

Quels éléments sont marqués avec la balise HTML <label> ?

Pour permettre par exemple aux uti­li­sa­teurs de lecteurs d’écran d’accéder de façon ac­ces­sible à votre page, les éléments suivants, en par­ti­cu­lier, devraient être balisés en HTML avec un tag <label> :

• Champs de saisie : <input type="text" />, <input type="password" />, <textarea>
• Cases à cocher : <input type="checkbox" />
• Boutons radio : <input type="radio" />
• Listes dé­rou­lantes : <select>
• Champs de té­lé­char­ge­ment de fichiers : <input type="file" />

Quels attributs sont pris en charge par la balise HTML <label> ?

La balise HTML <label> prend en charge tous les attributs HTML globaux ainsi que les attributs d’événement. En com­plé­ment, les attributs suivants peuvent être utilisés :

• for : l’attribut for indique l’ID de l’élément de for­mu­laire auquel le libellé doit être associé. Sa valeur doit cor­res­pondre exac­te­ment à celle de l’attribut id d’un autre contrôle de for­mu­laire présent dans le même document.
• form : l’attribut form peut s’avérer utile dans des mises en page complexes, notamment lorsque le champ de for­mu­laire ne se trouve pas dans le même élément <form>. Pour les for­mu­laires ac­ces­sibles clas­siques avec balise HTML <label> et champ associé, il n’est gé­né­ra­le­ment pas né­ces­saire. L’as­so­cia­tion doit alors se faire via for et id ou par im­bri­ca­tion. L’attribut form est toutefois défini dans la spé­ci­fi­ca­tion HTML pour <label>, même s’il est rarement utilisé en pratique.

<form id="participant">
    <label for="prenom">Prénom</label>
    <input name="prenom" id="prenom" maxlength="25">
    <label for="nom">Nom</label>
    <input name="nom" id="nom" maxlength="30">
    <button>Confirmer les informations</button>
</form>