Un formulaire inaccessible peut rendre impossible une inscription, un achat ou une démarche administrative. Voici les règles fondamentales pour que vos formulaires fonctionnent pour tous.

1. Chaque champ doit avoir un label visible

N'utilisez jamais le placeholder comme seul label. Il disparaît à la saisie, n'est pas toujours lu par les lecteurs d'écran et offre un contraste insuffisant.

<!-- ❌ Mauvais -->
<input type="email" placeholder="Votre email">

<!-- ✅ Correct -->
<label for="email">Adresse email</label>
<input type="email" id="email" name="email">

2. Les messages d'erreur doivent être explicites et liés au champ

Un message d'erreur doit :

  • Expliquer ce qui ne va pas (pas juste « champ invalide »)
  • Indiquer comment corriger
  • Être associé au champ via aria-describedby

3. Ne pas utiliser uniquement la couleur pour signaler une erreur

10% des hommes sont daltoniens. Une bordure rouge seule ne suffit pas. Ajoutez une icône et un texte d'erreur explicite.

4. Grouper les champs liés avec fieldset/legend

Pour les boutons radio, cases à cocher ou groupes de champs liés, utilisez <fieldset> et <legend> pour donner le contexte aux lecteurs d'écran.

5. Indiquer les champs obligatoires

N'utilisez pas seulement l'astérisque — ajoutez required et aria-required="true", et expliquez la convention en début de formulaire.