Corriger les champs de formulaire sans étiquette

Le problème

Un champ sans étiquette associée est un champ muet : le lecteur d’écran annonce « édition, vide » sans dire quoi saisir. Le placeholder ne remplace pas l’étiquette : il disparaît à la saisie, contraste mal et n’est pas restitué de façon fiable. C’est l’erreur critique la plus fréquente sur les formulaires (critère 11.1 du RGAA) — précisément là où se jouent vos conversions.

Les trois corrections valides

1. Le label associé (à privilégier — il agrandit aussi la zone de clic) :

<label for="email">Votre adresse email</label>
<input id="email" type="email" name="email">

2. Le label englobant :

<label>Votre adresse email <input type="email" name="email"></label>

3. aria-label quand aucune étiquette visible n’est possible (champ de recherche avec icône) :

<input type="search" aria-label="Rechercher sur le site">

Dans les CMS

Les constructeurs de formulaires récents (WPForms, Gravity Forms, modules Shopify) associent correctement les labels ; l’option « masquer l’étiquette » est le piège classique — elle doit masquer visuellement, pas supprimer. Sur les formulaires codés main, vérifiez la correspondance exacte for ↔ id : un id dupliqué ou une faute de frappe casse l’association silencieusement.

Vérifier la correction

Relancez l’analyse : la détection « Champs de formulaire sans étiquette » liste chaque champ fautif avec son code. Complétez avec les boutons sans intitulé, l’autre erreur majeure des formulaires.

Autres erreurs fréquentes à corriger

• Corriger un code de langue invalide
• Corriger une hiérarchie de titres incohérente
• Corriger la langue de page non déclarée (attribut lang)
• Corriger les contrastes de texte insuffisants
• Corriger les liens non explicites (« cliquez ici », « en savoir plus »)
• Corriger une page sans titre principal h1

← Retour au guide RGAA complet