---
title: "Formulaires accessibles : là où les sites perdent leurs utilisateurs"
description: "Cette page s’inscrit dans la rubrique accessibilité numérique. Le moment où l’utilisateur doit agir Partout ailleurs sur un site, on se contente de lire. Dans un formulaire, il faut saisir, choisir, valider. Et l’échec n’y est jamais partiel : soit l’envoi aboutit, soit la personne abandonne. Cela explique le nombre de critères que le RGAA […]"
url: "https://www.newp.fr/accessibilite-numerique/formulaires-accessibles/"
author: ""
date: "2026-09-20T09:27:36+00:00"
modified: "2026-09-21T18:32:35+00:00"
lang: "fr_FR"
---

# Formulaires accessibles : là où les sites perdent leurs utilisateurs

 Cette page s’inscrit dans la rubrique [accessibilité numérique](/accessibilite-numerique/).

 

## Le moment où l’utilisateur doit agir

 Partout ailleurs sur un site, on se contente de lire. Dans un formulaire, il faut saisir, choisir, valider. Et l’échec n’y est jamais partiel : soit l’envoi aboutit, soit la personne abandonne.

 Cela explique le nombre de critères que le RGAA consacre aux formulaires, et pourquoi, sur un site marchand, nous auditons le tunnel de commande de bout en bout, messages d’erreur inclus.

## Six règles pour des formulaires accessibles

### 1. Une étiquette visible, reliée à son champ

 L’étiquette passe par un `<label>` associé au champ (attributs `for` et `id`). Le texte indicatif `placeholder` ne la remplace pas : il s’efface dès la première lettre, manque presque toujours de contraste et n’est pas annoncé de façon constante par les lecteurs d’écran.

### 2. Un libellé clair, placé juste avant

 Le libellé dit précisément ce qu’on attend (« Numéro de téléphone portable » vaut mieux que « Tél. ») et se trouve immédiatement avant le champ, dans le même conteneur.

### 3. Des groupes de champs regroupés et nommés

 On encadre les champs liés par un `<fieldset>` doté d’une `<legend>`. Pour des boutons radio ou des cases à cocher, c’est vital : sans légende, l’utilisateur entend les réponses possibles mais jamais la question.

### 4. Le type de donnée est indiqué

 Avec l’attribut `autocomplete` (valeurs `name`, `email`, `tel`, `postal-code`…), le navigateur peut préremplir le champ. Le RGAA en fait un critère, et vos visiteurs gagnent du temps.

### 5. Des erreurs précises et rattachées au champ

 « Le formulaire contient des erreurs » ne guide personne. Un bon message nomme **le champ fautif** et **la correction attendue**, par exemple : « Code postal : saisissez cinq chiffres ». Il est lié au champ dans le code, et un récapitulatif en haut du formulaire permet de retrouver chaque erreur.

### 6. L’aide arrive avant l’erreur

 Afficher le format attendu *avant* l’envoi prévient l’erreur au lieu de la constater. Quant aux champs obligatoires, leur signalement ne doit pas tenir à la seule couleur.

 Le maillon faible : l’écran d’erreur Nous voyons souvent des formulaires bien conçus qui débouchent sur une page d’erreur négligée : messages sans lien avec les champs, saisies effacées, focus laissé tout en haut. La personne reste coincée au moment précis où elle avait besoin d’être guidée.

 Voilà pourquoi le RGAA exige l’audit de *chaque* étape et de chaque état d’un processus en plusieurs écrans. Sur notre propre site, la page d’erreur du formulaire de contact est produite côté serveur et contrôlée à chaque mise en ligne, comme n’importe quelle page statique.

 

## Les défauts que nous repérons le plus

- un `placeholder` utilisé à la place de l’étiquette ;
- un astérisque dont la signification n’est expliquée nulle part ;
- des boutons radio sans `fieldset` ni `legend` ;
- une erreur signalée uniquement par une bordure rouge ;
- une session qui expire ou un délai imposé sans moyen de le prolonger ;
- un CAPTCHA qui n’offre aucune autre méthode de vérification ;
- plusieurs formulaires sur la page, tous validés par un bouton « Envoyer » identique.
 
  [ Rubrique précédente Les attributs ARIA ](/accessibilite-numerique/aria/) [ Rubrique suivante Sous-titrer et décrire ses vidéos ](/accessibilite-numerique/videos-sous-titres-audiodescription/)

---

*Source : [www.newp.fr](https://www.newp.fr/accessibilite-numerique/formulaires-accessibles/)*