Les formulaires sont parmi les éléments les plus problématiques pour les utilisateurs en situation de handicap. Quelques ajustements simples peuvent transformer radicalement leur expérience.
Un formulaire inaccessible, c'est souvent une porte fermée pour des millions d'utilisateurs. Malvoyants, personnes naviguant au clavier, utilisateurs de lecteurs d'écran : tous rencontrent des obstacles évitables si le formulaire a été mal conçu. La bonne nouvelle, c'est que les correctifs sont rarement complexes.
La première règle est simple : chaque champ doit avoir un label visible et lié via l'attribut for. Un placeholder
n'est pas un label. Il disparaît dès que l'utilisateur commence à saisir, laissant sans contexte ceux qui ont du mal à
mémoriser. Utilisez <label for="email">Adresse e-mail</label> systématiquement, jamais un placeholder seul.
Les messages d'erreur méritent une attention particulière. Ils doivent être explicites (« Le mot de passe doit
contenir au moins 8 caractères » et non « Erreur »), proches du champ concerné, et annoncés aux lecteurs d'écran
via aria-describedby ou role="alert". Le champ en erreur doit être marqué avec aria-invalid="true". Pour les
formulaires multi-étapes, indiquer la progression avec un attribut aria-label sur l'élément de progression.
Côté navigation clavier, l'ordre de tabulation doit suivre le sens logique de lecture. L'attribut tabindex peut forcer
cet ordre si nécessaire, mais il vaut mieux construire un DOM bien ordonné. Les boutons de soumission doivent être de
vrais <button type="submit">, pas des <div> cliquables qui n'existent pas pour le clavier.
- Liez chaque champ à un label via
for/id - Ne comptez pas sur le placeholder comme seule indication
- Annoncez les erreurs avec
aria-describedby - Testez l'ensemble du flux uniquement au clavier