Balise label en HTML : la meilleure solution pour l’accessibilité et la convivialité

Avec l’élément HTML

Hébergement Web
Hébergement Web flexible, performant et sûr
  • Certificat SSL et protection DDoS
  • Sauvegarde et restauration des données
  • Assistance 24/7 et conseiller personnel

À quoi sert la balise HTML label ?

La balise HTML label est particulièrement importante pour la clarté et l’accessibilité d’un site Web. Elle est utilisée dans les formulaires et ajoute une légende explicative ou une étiquette à des éléments tels que les champs de saisie, les boutons ou les cases à cocher.

Ceci est particulièrement important pour deux cas d’application. D’une part, elle facilite la navigation sur un site Web pour les internautes qui ont des problèmes avec les petites surfaces. Comme la zone cliquable s’agrandit, il est également plus facile de cliquer. D’autre part, pour les utilisateurs qui utilisent un lecteur d’écran, l’élément HTML permet de lire les légendes à haute voix. Cela améliore la convivialité pour tous les visiteurs de votre site.

Comment utiliser la balise label en HTML ?

La balise label peut être utilisée de deux façons en HTML. Avec l’attribut for, vous pouvez relier logiquement le label directement au champ de saisie. Vous pouvez également intégrer le formulaire à côté de l’étiquette directement à l’intérieur de la balise label. Pour une meilleure illustration, voici les deux options disponibles pour label en HTML.

Pour les cases à cocher :

<p>
<input type="checkbox" name="lu" id="read" value="ja" />
<label for="read">J’ai lu les conditions</label>
</p>

Il est important que l’attribut for, utilisé dans la balise label, ait la même valeur que l’attribut id du champ de saisie.

Pour les boutons :

<input type="radio" id="radio" value="accepter" />
<label for="read">Accepter</label>

Avec la deuxième option, la légende est incluse. Voici à quoi cela ressemble :

<p>
<label>
<input type="checkbox" name="lu" value="ja" />
J’ai lu les conditions
</label>
</p>

Quels éléments sont concernés par la balise label ?

Pour permettre par exemple aux utilisateurs et utilisatrices de lecteurs d’écran d’accéder à votre site, les éléments suivants doivent être marqués avec une balise label en HTML :

  • Champs de saisie : <input type="text" />, <input type="password" />, <testarea>
  • Cases à cocher : <input type="checkbox" />
  • Boutons : <input type="radio" />
  • Listes de sélection : <select>
  • Champs pour les téléchargements : <input type="file" />

Quels sont les attributs pris en charge par la balise label ?

La balise label supporte tous les attributs HTML universels ainsi que les attributs d’événements. Pour cela, les attributs suivants peuvent être associés à la balise HTML :

for : l’attribut for permet de déterminer l’ID de l’élément d’entrée auquel la balise doit être associée. Cela signifie également que dans un document, le premier élément d’entrée correspondant à cette valeur est automatiquement associé à la légende.

form : l’attribut form définit quel élément de forme doit être associé à la balise label en HTML. Dans la pratique, cela se présente par exemple comme suit :

<form id="participant">
<label class="h2" form="participant">Nom</label>
<label for="prénom">Prénom</label>
<input name="prénom" id="prénom" maxlength="25">
<label for="nomdefamille">Nom de famille</label>
<input name="nomdefamille" id="nomdefamille" maxlength="30">
<button>Valider les données</button>
</form>
Conseil

Créez un site Internet qui vous ressemble ! Avec l’outil de création de sites Web de IONOS, vous concevez vous-même votre page professionnelle, sans connaissances préalables. Vous pouvez également faire appel à l’expertise de nos développeurs. Choisissez simplement la solution qui convient le mieux à vos besoins !

Cet article vous a-t-il été utile ?