La réponse courte

Donnez à chaque champ une étiquette visible liée par for et id, indiquez les champs obligatoires en toutes lettres, regroupez les options liées avec fieldset et legend, affichez les erreurs en mots à côté du champ et dans un résumé, utilisez les bons types de champs et la saisie automatique, et assurez-vous que tout le formulaire fonctionne au clavier.

À retenir

  • Chaque champ a besoin d'une vraie étiquette visible, pas seulement d'un texte d'exemple.
  • Écrivez « obligatoire » en toutes lettres, pas seulement avec un astérisque rouge.
  • Les messages d'erreur expliquent comment régler le problème.
  • Utilisez la saisie automatique pour éviter de retaper les mêmes renseignements.
  • Ne comptez pas sur le glisser-déposer ou les casse-têtes pour prouver qu'une personne est humaine.

Le rapport WebAIM Million 2026 a trouvé des étiquettes de formulaire manquantes sur 51 % du million de pages d’accueil les plus visitées. Sans étiquette, un lecteur d’écran dit seulement « zone de texte modifiable », et la personne doit deviner. Chaque supposition est une chance de perdre une vente ou un client potentiel.

La correction, étape par étape

  1. Étiquetez chaque champ

    Utilisez <label for="courriel">Courriel</label> avec <input id="courriel">. Cliquer sur l’étiquette doit placer le curseur dans le champ.

  2. Indiquez clairement les champs obligatoires

    Écrivez « (obligatoire) » dans l’étiquette, ou expliquez l’astérisque en haut du formulaire. Ajoutez l’attribut required.

  3. Regroupez les choix liés

    Placez les boutons radio et groupes de cases à cocher dans un fieldset avec une legend, comme « Moyen de contact préféré ».

  4. Utilisez les bons types

    type=”email”, type=”tel” et inputmode affichent le bon clavier sur téléphone. Ajoutez autocomplete=”email”, “name”, “postal-code” et ainsi de suite.

  5. Rédigez des erreurs utiles

    Affichez l’erreur à côté du champ, en texte (« Entrez une date comme 2026-03-15 »), liez-la depuis un résumé en haut et associez-la avec aria-describedby.

  6. Testez

    Remplissez le formulaire au clavier seulement, puis avec un lecteur d’écran, puis faites exprès une erreur pour voir si le message aide.

Un texte d’exemple n’est pas une étiquette

Le texte d’exemple disparaît dès qu’on tape, a souvent un faible contraste et n’est pas lu de façon fiable par toutes les technologies d’assistance. Gardez une étiquette visible au-dessus du champ. Utilisez le texte d’exemple seulement pour montrer un format, si besoin.

Des erreurs qui aident

« Saisie invalide » n’aide personne. Dites ce qui ne va pas et comment le corriger : « Le numéro de téléphone doit avoir 10 chiffres, comme 514 555 0199. » N’utilisez pas la couleur seule; ajoutez une icône ou le mot « Erreur ». Quand l’envoi échoue, déplacez le focus vers un résumé en haut qui liste chaque problème sous forme de lien vers le champ.

Les nouvelles règles des WCAG 2.2 pour les formulaires

  • Saisie redondante (3.3.7) : ne demandez pas aux gens de taper deux fois les mêmes renseignements dans un même processus. Proposez « identique à l’adresse de facturation ».
  • Authentification accessible (3.3.8) : n’obligez pas les gens à résoudre un casse-tête ou à mémoriser un code pour se connecter. Permettez les gestionnaires de mots de passe et le collage.
  • Taille de la cible (2.5.8) : les boutons et cases à cocher devraient mesurer au moins 24 pixels sur 24, ou être assez espacés pour être faciles à toucher.

Lisez la liste complète dans les WCAG 2.2 expliquées simplement.

Les extensions de formulaire de contact

La plupart des extensions de formulaire populaires pour WordPress peuvent produire un code accessible, mais les réglages comptent. Activez les étiquettes (pas seulement les textes d’exemple), choisissez les messages d’erreur en ligne et évitez les CAPTCHA à images. Après avoir changé les réglages, lancez une analyse : Accessible Nord signale les champs sans étiquette sur chaque page qu’il vérifie.

Sources

La plupart des sources sont des documents officiels en anglais.

  1. The WebAIM Million, 2026 report
  2. W3C WAI: Forms tutorial
  3. Understanding WCAG 2.2: Redundant Entry (3.3.7)
  4. Understanding WCAG 2.2: Accessible Authentication (Minimum) (3.3.8)

Dernière révision le .

Questions fréquentes

Puis-je masquer visuellement les étiquettes?

Vous pouvez utiliser une étiquette masquée visuellement pour les cas simples, comme un seul champ de recherche avec un bouton de recherche clair. Pour la plupart des formulaires, des étiquettes visibles aident tout le monde, y compris les personnes qui ont des difficultés de mémoire ou d'attention.

Un CAPTCHA est-il accessible?

Les CAPTCHA à images et à casse-tête bloquent beaucoup de gens. Utilisez des vérifications invisibles comme un champ piège, des limites de fréquence ou un défi moderne qui ne demande pas de résoudre une tâche.

Dois-je valider pendant la saisie?

Validez quand la personne quitte un champ ou envoie le formulaire, pas à chaque touche, ce qui peut être bruyant pour les utilisateurs de lecteurs d'écran.

Ce guide est de l'information générale, pas un avis juridique. Pour vos obligations précises, consultez un avocat ou votre organisme de réglementation.