Introduction à la balise <label>
La balise <label> est un élément HTML fondamental pour la création de formulaires accessibles et ergonomiques. Elle permet d'associer une étiquette textuelle à un champ de formulaire, offrant ainsi une meilleure expérience utilisateur et une accessibilité accrue pour les personnes utilisant des technologies d'assistance.
Si vous souhaitez maîtriser parfaitement les formulaires HTML et leurs bonnes pratiques, notre formation complète sur HTML vous guidera pas à pas dans la création de sites web professionnels et accessibles.
💡 Un formulaire sans balises <label> est considéré comme inaccessible. Les labels sont essentiels pour les lecteurs d'écran et améliorent l'expérience de tous les utilisateurs !
Dans cet article, nous allons explorer en profondeur la balise <label>, ses différentes méthodes d'association avec les champs de formulaire, ses attributs, et les meilleures pratiques pour créer des formulaires véritablement accessibles.
Définition et syntaxe de la balise <label>
Qu'est-ce qu'un label ?
La balise <label> représente une légende ou un intitulé associé à un élément de formulaire. Contrairement à un simple texte placé à côté d'un champ, le label crée une connexion programmatique entre le texte descriptif et le champ correspondant. Cette association permet notamment de cliquer sur le texte du label pour activer ou sélectionner le champ associé.
La balise <label> est un élément inline qui peut contenir du texte et d'autres éléments de phrasé, mais elle ne peut pas contenir d'autres éléments interactifs comme des boutons ou d'autres labels imbriqués.
Syntaxe de base
Il existe deux méthodes principales pour associer un label à un champ de formulaire :
<!-- Méthode 1 : Association explicite avec l'attribut for -->
<label for="email">Adresse email :</label>
<input type="email" id="email" name="email">
<!-- Méthode 2 : Association implicite (englobante) -->
<label>
Adresse email :
<input type="email" name="email">
</label>Les deux méthodes sont valides et fonctionnelles. Cependant, la méthode explicite avec l'attribut for est généralement recommandée car elle offre une plus grande flexibilité dans la mise en page et une meilleure compatibilité avec les anciennes technologies d'assistance.
Attributs de la balise <label>
La balise <label> accepte les attributs globaux HTML ainsi qu'un attribut spécifique :
| Attribut | Description | Obligatoire |
|---|---|---|
for | Spécifie l'ID de l'élément de formulaire associé | Non (si association implicite) |
class | Permet d'appliquer des styles CSS | Non |
id | Identifiant unique pour le label | Non |
Méthodes d'association du label
Association explicite avec l'attribut for
L'association explicite utilise l'attribut for du label qui doit correspondre exactement à l'attribut id du champ de formulaire. Cette méthode est la plus courante et la plus flexible :
<form>
<div class="form-group">
<label for="nom-apprenant">Nom de l'apprenant :</label>
<input type="text" id="nom-apprenant" name="nom" placeholder="Entrez votre nom">
</div>
<div class="form-group">
<label for="formation-choisie">Formation choisie :</label>
<select id="formation-choisie" name="formation">
<option value="html">HTML et CSS</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
</select>
</div>
</form>Avec cette méthode, vous pouvez positionner le label et le champ n'importe où dans le document, tant que l'ID correspond. Cela facilite grandement la mise en page CSS.
Association implicite (englobante)
L'association implicite consiste à englober directement le champ de formulaire dans la balise <label>. Cette méthode ne nécessite pas d'attribut for ni d'id sur le champ :
<form>
<label>
Accepter les conditions d'utilisation
<input type="checkbox" name="conditions">
</label>
<label>
Choisissez votre niveau :
<select name="niveau">
<option value="debutant">Débutant</option>
<option value="intermediaire">Intermédiaire</option>
<option value="avance">Avancé</option>
</select>
</label>
</form>Attention : certains anciens lecteurs d'écran peuvent avoir des difficultés avec l'association implicite. Pour une accessibilité maximale, privilégiez l'association explicite avec l'attribut for.
Combinaison des deux méthodes
Pour une compatibilité maximale, vous pouvez combiner les deux approches :
<label for="newsletter">
<input type="checkbox" id="newsletter" name="newsletter">
Je souhaite recevoir la newsletter Believemy
</label>Cette technique garantit que le label fonctionne correctement sur tous les navigateurs et toutes les technologies d'assistance.
Éléments compatibles avec la balise <label>
Liste des éléments associables
La balise <label> peut être associée aux éléments de formulaire suivants :
<input>(tous les types : text, email, password, checkbox, radio, etc.)<select><textarea><meter><output><progress>
Chacun de ces éléments bénéficie de l'association avec un label pour améliorer l'accessibilité et l'ergonomie du formulaire.
Exemples avec différents types d'inputs
<!-- Champ texte -->
<label for="prenom">Prénom :</label>
<input type="text" id="prenom" name="prenom">
<!-- Champ email -->
<label for="contact-email">Email de contact :</label>
<input type="email" id="contact-email" name="email">
<!-- Champ mot de passe -->
<label for="mot-de-passe">Mot de passe :</label>
<input type="password" id="mot-de-passe" name="password">
<!-- Case à cocher -->
<input type="checkbox" id="remember" name="remember">
<label for="remember">Se souvenir de moi</label>
<!-- Bouton radio -->
<input type="radio" id="option1" name="options" value="1">
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="options" value="2">
<label for="option2">Option 2</label>
<!-- Zone de texte -->
<label for="commentaire">Votre commentaire :</label>
<textarea id="commentaire" name="commentaire" rows="4"></textarea>
<!-- Liste déroulante -->
<label for="pays">Pays :</label>
<select id="pays" name="pays">
<option value="fr">France</option>
<option value="be">Belgique</option>
<option value="ch">Suisse</option>
</select>
Accessibilité et la balise <label>
Importance pour les lecteurs d'écran
Les lecteurs d'écran utilisent les labels pour annoncer le but de chaque champ de formulaire. Sans label correctement associé, l'utilisateur entend simplement "champ de saisie" ou "case à cocher" sans savoir à quoi il correspond.
Avec un label correctement associé, le lecteur d'écran annonce par exemple : "Adresse email, champ de saisie" ou "Accepter les conditions, case à cocher non cochée". Cette information contextuelle est essentielle pour permettre aux utilisateurs de naviguer efficacement dans le formulaire.
Zone de clic étendue
L'un des avantages ergonomiques majeurs du label est l'extension de la zone cliquable. Lorsqu'un utilisateur clique sur le texte du label, le champ associé est automatiquement activé ou sélectionné. Cette fonctionnalité est particulièrement utile pour :
- Les cases à cocher et boutons radio (petites cibles difficiles à cliquer)
- Les utilisateurs sur appareils mobiles (écrans tactiles)
- Les personnes ayant des difficultés motrices
<!-- Sans label : l'utilisateur doit cliquer précisément sur la case -->
<input type="checkbox"> Accepter les conditions
<!-- Avec label : toute la zone de texte est cliquable -->
<label>
<input type="checkbox">
Accepter les conditions d'utilisation de Believemy
</label>
Conformité WCAG
Les directives d'accessibilité WCAG (Web Content Accessibility Guidelines) exigent que tous les éléments de formulaire possèdent un label accessible. Les critères de succès concernés incluent :
- 1.3.1 Info and Relationships : Les informations et relations transmises par la présentation doivent être déterminées par programmation
- 2.4.6 Headings and Labels : Les labels doivent décrire le sujet ou le but
- 3.3.2 Labels or Instructions : Des labels ou instructions sont fournis quand le contenu requiert une saisie utilisateur
Exemples pratiques de formulaires
Formulaire d'inscription complet
Voici un exemple de formulaire d'inscription typique pour une plateforme de formation :
<form class="formulaire-inscription" action="/inscription" method="post">
<fieldset>
<legend>Informations personnelles</legend>
<div class="champ">
<label for="inscription-nom">Nom complet *</label>
<input type="text" id="inscription-nom" name="nom" required
aria-describedby="aide-nom">
<small id="aide-nom">Tel qu'il apparaîtra sur vos certificats</small>
</div>
<div class="champ">
<label for="inscription-email">Adresse email *</label>
<input type="email" id="inscription-email" name="email" required>
</div>
<div class="champ">
<label for="inscription-password">Mot de passe *</label>
<input type="password" id="inscription-password" name="password"
required minlength="8" aria-describedby="aide-password">
<small id="aide-password">Minimum 8 caractères</small>
</div>
</fieldset>
<fieldset>
<legend>Préférences</legend>
<div class="champ">
<label for="niveau-actuel">Votre niveau actuel</label>
<select id="niveau-actuel" name="niveau">
<option value="">-- Sélectionnez --</option>
<option value="debutant">Débutant complet</option>
<option value="notions">Quelques notions</option>
<option value="intermediaire">Intermédiaire</option>
<option value="avance">Avancé</option>
</select>
</div>
<div class="champ-checkbox">
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Recevoir les actualités et conseils Believemy</label>
</div>
<div class="champ-checkbox">
<input type="checkbox" id="conditions" name="conditions" required>
<label for="conditions">J'accepte les conditions d'utilisation *</label>
</div>
</fieldset>
<button type="submit">Créer mon compte</button>
</form>
Formulaire avec groupes de boutons radio
Les boutons radio nécessitent chacun leur propre label. Voici comment les organiser correctement :
<form class="formulaire-choix">
<fieldset>
<legend>Quelle formation vous intéresse ?</legend>
<div class="option-radio">
<input type="radio" id="formation-html" name="formation" value="html">
<label for="formation-html">HTML et CSS - Créer des sites web</label>
</div>
<div class="option-radio">
<input type="radio" id="formation-js" name="formation" value="javascript">
<label for="formation-js">JavaScript - Rendre vos pages interactives</label>
</div>
<div class="option-radio">
<input type="radio" id="formation-python" name="formation" value="python">
<label for="formation-python">Python - Automatisation et data science</label>
</div>
</fieldset>
<button type="submit">Voir la formation</button>
</form>
Styliser les labels avec CSS
Styles de base
Les labels peuvent être stylisés comme n'importe quel élément HTML. Voici quelques styles courants :
/* Style de base pour tous les labels */
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #333;
}
/* Labels pour champs obligatoires */
label.required::after {
content: " *";
color: #e74c3c;
}
/* Labels en ligne (pour checkbox et radio) */
.champ-checkbox label,
.option-radio label {
display: inline;
font-weight: normal;
margin-left: 0.5rem;
cursor: pointer;
}
/* État focus - améliore l'accessibilité visuelle */
input:focus + label,
label:focus-within {
color: #3498db;
}
Labels flottants (floating labels)
Une technique populaire consiste à créer des labels qui se déplacent lorsque le champ reçoit le focus :
<div class="champ-flottant">
<input type="text" id="email-flottant" name="email" placeholder=" " required>
<label for="email-flottant">Adresse email</label>
</div>.champ-flottant {
position: relative;
margin-bottom: 1.5rem;
}
.champ-flottant input {
width: 100%;
padding: 1rem 0.75rem 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
.champ-flottant label {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
transition: all 0.2s ease;
pointer-events: none;
color: #666;
}
/* Quand le champ a du contenu ou le focus */
.champ-flottant input:focus + label,
.champ-flottant input:not(:placeholder-shown) + label {
top: 0.25rem;
transform: translateY(0);
font-size: 0.75rem;
color: #3498db;
}
Bonnes pratiques pour les labels
Rédaction des textes de label
Un bon label doit être :
- Concis : "Email" plutôt que "Veuillez entrer votre adresse email ci-dessous"
- Descriptif : "Date de naissance" plutôt que "Date"
- Unique : Évitez les labels identiques pour des champs différents
- Sans jargon : Utilisez des termes compréhensibles par tous
Placement des labels
Le placement optimal des labels dépend du contexte :
| Position | Avantages | Cas d'usage |
|---|---|---|
| Au-dessus du champ | Lecture naturelle, bon pour mobile | Formulaires longs, mobile-first |
| À gauche du champ | Compact, économise l'espace vertical | Formulaires courts, desktop |
| À droite du champ | Convention pour checkbox/radio | Cases à cocher, boutons radio |
| Placeholder uniquement | Minimaliste | À éviter (problèmes d'accessibilité) |
N'utilisez jamais le placeholder comme seul label ! Le texte disparaît dès que l'utilisateur commence à saisir, ce qui pose des problèmes d'accessibilité et d'utilisabilité.
Labels et champs obligatoires
Indiquez clairement les champs obligatoires :
<!-- Méthode recommandée : astérisque avec explication -->
<p class="note-obligatoire">Les champs marqués d'un * sont obligatoires</p>
<label for="nom">Nom *</label>
<input type="text" id="nom" name="nom" required aria-required="true">
<!-- Alternative : indication textuelle -->
<label for="telephone">Téléphone (optionnel)</label>
<input type="tel" id="telephone" name="telephone">
Erreurs courantes à éviter
Labels manquants ou incorrects
<!-- ❌ INCORRECT : pas de label -->
<input type="text" placeholder="Entrez votre nom">
<!-- ❌ INCORRECT : label sans association -->
<label>Nom :</label>
<input type="text" name="nom">
<!-- ❌ INCORRECT : ID ne correspond pas -->
<label for="nom">Nom :</label>
<input type="text" id="prenom" name="nom">
<!-- ✅ CORRECT -->
<label for="nom-utilisateur">Nom :</label>
<input type="text" id="nom-utilisateur" name="nom">
Labels vides ou inutiles
<!-- ❌ INCORRECT : label vide -->
<label for="champ"></label>
<input type="text" id="champ">
<!-- ❌ INCORRECT : label avec seulement une icône -->
<label for="recherche">🔍</label>
<input type="search" id="recherche">
<!-- ✅ CORRECT : label accessible même avec icône -->
<label for="recherche">
<span class="sr-only">Rechercher</span>
<span aria-hidden="true">🔍</span>
</label>
<input type="search" id="recherche">
Multiple labels pour un seul champ
<!-- ❌ INCORRECT : deux labels pour un champ -->
<label for="email">Email :</label>
<label for="email">(format: exemple@domaine.com)</label>
<input type="email" id="email">
<!-- ✅ CORRECT : un seul label avec aria-describedby pour les infos supplémentaires -->
<label for="email">Email :</label>
<input type="email" id="email" aria-describedby="format-email">
<small id="format-email">Format: exemple@domaine.com</small>
Compatibilité navigateurs
La balise <label> bénéficie d'une excellente compatibilité avec tous les navigateurs :
| Navigateur | Version minimale | Support |
|---|---|---|
| Chrome | 1.0 | Complet ✅ |
| Firefox | 1.0 | Complet ✅ |
| Safari | 1.0 | Complet ✅ |
| Edge | 12 | Complet ✅ |
| Opera | 4.0 | Complet ✅ |
| Internet Explorer | 4.0 | Complet ✅ |
La balise <label> fait partie des spécifications HTML depuis les premières versions et est universellement supportée. Vous pouvez l'utiliser sans aucune inquiétude de compatibilité.
Questions fréquentes sur la balise <label>
Peut-on associer plusieurs labels à un même champ de formulaire ?
Techniquement, vous pouvez avoir plusieurs labels pointant vers le même ID, mais ce n'est pas recommandé. Les lecteurs d'écran peuvent avoir des comportements imprévisibles dans ce cas. Si vous avez besoin d'ajouter des informations supplémentaires, utilisez plutôt l'attribut aria-describedby pour associer un texte d'aide au champ.
Le label est-il obligatoire pour tous les champs de formulaire ?
Pour l'accessibilité, oui. Chaque champ de formulaire devrait avoir un label associé. Si vous ne souhaitez pas afficher le label visuellement (par exemple, pour un champ de recherche avec une icône), vous pouvez utiliser la classe CSS sr-only (screen reader only) pour masquer le texte visuellement tout en le gardant accessible aux technologies d'assistance.
Quelle est la différence entre placeholder et label ?
Le placeholder est un texte d'exemple ou d'indication qui apparaît à l'intérieur du champ et disparaît dès que l'utilisateur commence à saisir. Le label est un texte permanent qui identifie le champ. Le placeholder ne doit jamais remplacer le label car il pose des problèmes d'accessibilité : les utilisateurs ne peuvent plus voir l'indication une fois qu'ils ont commencé à remplir le champ.
Comment puis-je apprendre à créer des formulaires HTML accessibles ?
Pour maîtriser la création de formulaires accessibles et tous les aspects du HTML, notre formation pour apprendre HTML vous accompagne pas à pas. Vous y découvrirez toutes les bonnes pratiques pour créer des sites web professionnels et accessibles à tous.