Libellé de champ

Les libellés de champs (ou étiquettes de champs) doivent décrire le rôle de chaque champ du formulaire et être correctement associés à leur champ.

Implémentation HTML

L’étiquette de champ sera implémentée avec les balises <label>...</label>.
L’attribut for sera utilisé pour l’associer à l’ìd du champ auquel elle fait référence.

Une façon simple de s’assurer que le libellé est bien relié à son champ consiste à cliquer sur le libellé du champ. Si le libellé est bien associé alors le curseur se placera dans le champ lié (ou s’il s’agit de case à cocher, la case sera cochée/décochée ; s’il s’agit d’un bouton radio, le bouton sera coché/décoché).

<label for="nom">Nom</label>
<input type="text" name="nom" id="nom">

Visuel
Cliquez sur l’étiquette “Nom” et vérifiez que le curseur se place bien dans la zone de texte.

Autre implémentation possible
Dans cet exemple, le inputest inclus entre les balises label.

<label>Nom
<input type="text" name="nom" class="exempleCodeInput">
</label>

Bonnes pratiques de présentation visuelle

Il est impératif de maintenir une relation visuelle étroite et distincte entre l’étiquette et le champ du formulaire. C’est pourquoi, l’intitulé du champ sera accolé à son champ. Dans le cas d’un sens de lecture de gauche à droite :

• pour les boutons radio et les cases à cocher, le libellé soit placé à droite du bouton ;
• pour les autres champs de formulaires, le libellé sera accolé immédiatement au-dessus ou à gauche du champ correspondant.

Exemple d’une bonne présentation
Les champs de formulaire et de leurs libellés associés sont accolés au champ :

Étiquette invisible

Un champ sans étiquette visible doit rester exceptionnel. On réservera ce cas à des champs dont la fonction est suffisamment claire et compréhensible sans étiquette  comme, par exemple, un champ de recherche. Dans ce cas, on créera le nom accessible du champ avec l’attribut aria-label.

<input type="text" name="search" aria-label="Rechercher sur le site..." class="exempleCodeInput">
<button type="submit">Lancer la recherche</button>

Visuel

Autre implémentation possible

Une autre implémentation possible consiste à utiliser un libellé qui sera caché visuellement mais lu par les logiciels de synthèse vocale. :

HTML

   <label for="search" class="sr-only">Rechercher sur le site</label>
   <input type="search" name="search" id="search" class="exempleCodeInput">
   <button type="submit">Rechercher</button>

Le code CSS ci-dessous pour masquer le texte mais le rendre interprétable par les synthétiseurs vocaux est le plus optimum quelque soit le logiciel de synthèse utilisé (Jaws, NVDA, Voice Over…).

/** sr-only : screen-reader only : seulement pour lecteur d'écran */
.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

Étiquette et placeholder

L’attribut placeholder qui permet de renseigner un texte indicatif par défaut dans un champ de formulaire ne peut en aucun cas remplacer l’élément label.
En effet, l’attribut placeholder disparaît dès que l’utilisateur active le champ de formulaire ou commence à écrire dedans.