# Étiquette de champ

> Texte associé formellement à un champ de formulaire HTML, qui en décrit le contenu attendu et agrandit sa zone cliquable, notamment sur mobile.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/etiquette-de-champ/

Un champ sans texte explicite à côté peut sembler compréhensible visuellement, mais reste invisible pour une personne qui navigue au clavier ou avec un lecteur d'écran, à moins qu'un lien formel n'existe entre ce texte et le champ concerné.

## Deux façons de créer ce lien

La méthode la plus courante associe un attribut `for` à l'identifiant du champ :

```
<label for="nom_complet">Nom complet</label>
<input type="text" id="nom_complet" name="nom_complet">
```

Une alternative consiste à imbriquer directement le champ à l'intérieur de la balise, ce qui dispense de l'attribut `for` et de l'identifiant correspondant, utile pour un champ généré dynamiquement dont l'identifiant n'est pas garanti unique.

## Bon à savoir

- Cliquer sur ce texte associé active ou donne le focus au champ correspondant, un comportement natif du navigateur particulièrement appréciable pour les cases à cocher, dont la zone cliquable native est petite.
- Sur les écrans d'administration de WordPress, cette association est systématiquement utilisée dans les boîtes méta et les pages de réglages générées par le cœur, un bon repère à suivre pour un formulaire personnalisé sur le site public.
- Un champ sans étiquette associée reste souvent signalé par les outils d'audit d'accessibilité comme un problème critique, même quand un texte proche semble visuellement jouer ce rôle sans lien formel avec le champ.
- Masquer visuellement une étiquette avec du CSS, sans la retirer du HTML, permet de garder une bonne accessibilité tout en respectant une maquette où le champ seul suffit visuellement à comprendre son usage.