Ressources · 32
Concevoir des formulaires accessibles et des erreurs réparables
Guider la saisie, montrer la cause d’un échec et préserver la progression de la personne.
· 8 min
Ce que ce guide permet
- Réduire les champs
- Nommer et guider
- Rendre les erreurs utiles
- Tester la reprise
Contrôle express
- Chaque champ a-t-il un nom perceptible ?
- Les formats attendus sont-ils expliqués avant la saisie ?
- Une erreur pointe-t-elle le champ et la correction possible ?
- Les valeurs valides sont-elles conservées ?
- Le parcours aboutit-il au clavier et au zoom ?
Méthode pas à pas
- 01
Partir de la tâche
Lister les données strictement nécessaires et les étapes que la personne doit comprendre. Retirer les demandes sans utilité pour la transaction.
Livrable : formulaire minimal et justification des champs.
- 02
Nommer et regrouper
Relier chaque contrôle à un label visible, grouper les choix liés et afficher l’aide à proximité. Vérifier l’ordre de lecture et de tabulation.
Livrable : structure et libellés testés.
- 03
Prévenir les erreurs
Donner des exemples de format et signaler les contraintes avant la soumission. Ne pas faire porter à la couleur seule le sens d’un champ obligatoire.
Livrable : consignes et états de saisie.
- 04
Expliquer chaque échec
Après validation, annoncer un résumé, relier chaque problème à son champ et décrire comment le résoudre. Conserver les valeurs correctes et le contexte.
Livrable : scénario d’erreur corrigible.
- 05
Traiter les pannes
Distinguer erreur de saisie, refus métier, délai et incident serveur. Donner une suite possible sans prétendre qu’une demande a réussi.
Livrable : messages et reprise par état.
- 06
Tester avec de vraies tâches
Rejouer succès et échecs au clavier, avec zoom, sur mobile et avec assistance adaptée. Mesurer les blocages, corriger et retester.
Livrable : preuve de tâche terminée.
Indicateurs de pilotage
| Indicateur | Ce qu’il mesure | Première action |
|---|---|---|
| Complétude | Champs nécessaires avec label et aide | Corriger les champs ambigus |
| Erreurs | Échecs avec explication et lien au champ | Réécrire les messages |
| Reprise | Valeurs conservées après correction | Réparer la gestion d’état |
| Tâche | Parcours aboutis avec clavier et zoom | Corriger les barrières |
Erreurs fréquentes
- Remplacer les labels par des placeholders
- Afficher seulement « une erreur est survenue »
- Effacer tout le formulaire après une erreur
- Tester uniquement le chemin heureux à la souris
Questions fréquentes
Un placeholder suffit-il ?
Non. Un label identifiable doit rester disponible lorsque la personne saisit une valeur.
Quand montrer l’erreur ?
Choisir un moment utile, puis fournir une cause et une correction, sans interrompre inutilement la saisie.
Que faire si le serveur échoue ?
Ne pas annoncer de succès ; conserver ce qui peut l’être et proposer une reprise compréhensible.
Formulaires : critères, erreurs et contraste
Un formulaire accessible permet de comprendre la demande, d’atteindre les commandes, de corriger une erreur et de terminer la tâche. Pour un portail de signalement, une demande de service ou une authentification, la qualité du parcours dépend aussi des états d’attente, d’échec et de retour en arrière.
Cette sélection éditoriale relie 17 critères de niveaux A ou AA de WCAG 2.2 à des questions de revue et à des preuves à conserver. Les identifiants, titres anglais et niveaux ont été vérifiés dans la Recommandation W3C du 12 décembre 2024, consultée le 23 octobre 2026. Cette sélection ne couvre pas tous les critères applicables à une page ou à un processus.
Distinguer la règle, son explication et la preuve de terrain
| Niveau de lecture | Ce qu’il apporte | Comment l’utiliser |
|---|---|---|
| Recommandation WCAG 2.2 | Texte normatif : critère, définition et exceptions à lire ensemble. | Relier le constat au critère exact et au périmètre examiné. |
| Understanding et tutoriels WAI | Explications et conseils informatifs ; ils aident à interpréter et à mettre en œuvre. | Les utiliser pour préparer les essais sans les présenter comme une nouvelle exigence normative. |
| Observation du parcours | Résultat d’un essai sur une page, une version, un état et une configuration. | Conserver les étapes et la preuve ; un calcul ou un scanner ne remplace pas l’évaluation complète. |
W3C · Web Content Accessibility Guidelines (WCAG) 2.2 · Recommendation · 12 December 2024
17 critères pour examiner un formulaire
Les questions et essais ci-dessous sont une méthode éditoriale CIE. Le lien de chaque critère conduit au texte normatif daté ; le lien Understanding conduit à son explication informative. Les niveaux n’expriment ni une note attribuée au site ni le résultat d’un audit.
| Critère et niveau W3C | Question de revue CIE | Preuve ou essai à préparer |
|---|---|---|
| 1.3.1 · Info and Relationships Level A | Les libellés et groupes de champs restent-ils compréhensibles dans la structure sémantique ? | Arbre d’accessibilité et essai de parcours des groupes, avec leur nom. |
| 1.3.5 · Identify Input Purpose Level AA | Pour les données personnelles couvertes par la taxonomie, le but de saisie est-il identifiable par programme ? | Attributs autocomplete adaptés au but ; ne pas confondre libellé et jeton de finalité. |
| 1.4.1 · Use of Color Level A | Une erreur ou une sélection reste-t-elle compréhensible sans se fier uniquement à une couleur ? | Texte d’erreur, indication du champ et état observables indépendamment du rouge ou du vert. |
| 1.4.3 · Contrast (Minimum) Level AA | Le texte utile se distingue-t-il de son fond dans chaque état pertinent ? | Couleurs réellement adjacentes, taille et graisse du texte ; seuil et exceptions du critère. |
| 1.4.11 · Non-text Contrast Level AA | Les informations visuelles nécessaires pour identifier les composants et leurs états sont-elles discernables ? | Bordure, icône ou autre repère nécessaire comparé aux couleurs adjacentes ; examiner les exceptions. |
| 2.1.1 · Keyboard Level A | Les actions du parcours sont-elles utilisables au clavier dans le périmètre du critère ? | Scénario sans pointeur : choix, saisie, aide, correction et validation. |
| 2.4.7 · Focus Visible Level AA | Le visiteur voit-il quel élément interactif possède le focus clavier ? | Parcours Tab et Maj+Tab dans les états initial, erreur et confirmation. |
| 2.4.11 · Focus Not Obscured (Minimum) Level AA | Le composant qui reçoit le focus reste-t-il au moins partiellement visible malgré le contenu créé par le site ? | Tester en-têtes fixes, bandeaux et panneaux ; ce minimum AA ne signifie pas absence de toute occultation. |
| 2.5.3 · Label in Name Level A | Le nom accessible contient-il le texte du libellé visible lorsque ce critère s’applique ? | Comparer le texte visible et le nom calculé, notamment pour une commande vocale. |
| 2.5.8 · Target Size (Minimum) Level AA | Les cibles de pointeur atteignent-elles 24 × 24 pixels CSS, ou remplissent-elles une exception du critère ? | Mesurer les boîtes et examiner espacement, équivalent, texte en ligne, contrôle natif ou caractère essentiel. |
| 3.3.1 · Error Identification Level A | Quand une erreur de saisie est détectée automatiquement, son champ et sa nature sont-ils décrits en texte ? | Soumettre un cas incomplet puis un format incorrect ; conserver le message associé au champ. |
| 3.3.2 · Labels or Instructions Level A | Les personnes disposent-elles des libellés ou instructions nécessaires avant de saisir ? | Exigences connues à l’avance : champ attendu, caractère obligatoire et format utile. |
| 3.3.3 · Error Suggestion Level AA | Une correction connue est-elle proposée lorsque cela ne compromet pas la sécurité ou le but du contenu ? | Comparer message générique et aide concrète, applicable à l’erreur réellement détectée. |
| 3.3.7 · Redundant Entry Level A | Dans un même processus, une information déjà fournie est-elle préremplie ou disponible à sélectionner, hors exceptions ? | Revenir à une étape ; distinguer donnée encore valable, nécessité essentielle et besoin de sécurité. |
| 3.3.8 · Accessible Authentication (Minimum) Level AA | Une étape d’authentification exige-t-elle un test cognitif sans alternative, aide ou exception prévue ? | Gestionnaire de mots de passe, collage et autres mécanismes réellement utilisables ; lire les exceptions complètes. |
| 4.1.2 · Name, Role, Value Level A | Nom, rôle, valeur et états utiles des composants sont-ils exposés aux technologies d’assistance ? | Inspecter contrôles natifs et composants personnalisés, puis modifier leurs états. |
| 4.1.3 · Status Messages Level AA | Les messages d’état concernés peuvent-ils être présentés par les technologies d’assistance sans recevoir le focus ? | Attente, erreur ou résultat bref ; tester les annonces et éviter les interruptions inutiles. |
Cinq situations de récupération à écrire et à tester
| Situation illustrative | Retour utile au visiteur | Point de contrôle |
|---|---|---|
| Champ requis vide | Identifier le champ et expliquer l’information attendue en texte. | Le message reste associé au champ ; le libellé demeure visible. |
| Format non accepté | Expliquer le format effectivement accepté et donner une suggestion lorsque possible. | Ne pas effacer les autres valeurs valides ; permettre de reprendre la correction. |
| Plusieurs champs en erreur | Présenter une vue d’ensemble et des messages près des champs. | Les liens du résumé atteignent les bons contrôles et le parcours clavier reste cohérent. |
| Attente ou échec du service | Dire si la demande est en cours, a échoué ou nécessite une nouvelle action. | Le message d’état utile est perceptible sans annonces répétées à chaque frappe. |
| Retour à une étape du même processus | Retrouver les informations encore valables ou pouvoir les sélectionner. | Examiner les exceptions de 3.3.7 et éviter une nouvelle saisie imposée sans raison. |
W3C WAI · Forms Tutorial · Labeling Controls · Practical guidance · consulted 2026-10-23
W3C WAI · Forms Tutorial · User Notifications · Practical guidance · consulted 2026-10-23
Calculateur local de contraste
Le calcul porte sur deux couleurs sRGB opaques unies. Saisissez #RGB ou #RRGGBB ; la casse est indifférente. Le rapport utilise les luminances relatives et la formule (L clair + 0,05) / (L sombre + 0,05). Le rendu numérique est arrondi pour la lecture ; les comparaisons utilisent le résultat non arrondi.
Ce modèle ne lit pas les styles d’un site et ne traite ni transparence, dégradés, image de fond, vidéo, espace colorimétrique différent ni variations de rendu. Il compare des nombres à des seuils ; il ne détermine pas si un critère s’applique ou si ses exceptions sont satisfaites.
Rapport calculé : ·
| Référence et usage | Seuil du rapport | Comparaison pour la paire saisie |
|---|---|---|
| 1.4.3 · AA · texte courant | 4.5:1 | |
| 1.4.3 · AA · grand texte | 3:1 | |
| 1.4.6 · AAA · texte courant | 7:1 | |
| 1.4.6 · AAA · grand texte | 4.5:1 | |
| 1.4.11 · AA · information visuelle non textuelle concernée | 3:1 |
Au sens de WCAG, le grand texte correspond notamment à au moins 18 points, ou 14 points en gras, ou une taille équivalente selon les règles de la définition. Une apparence « grande » à l’écran ne suffit pas à choisir le seuil réduit. Pour le non-texte, examiner les informations nécessaires à l’identification et toutes les couleurs adjacentes pertinentes.
W3C WAI · Understanding SC 1.4.3 · Contrast (Minimum) · Informative explanation · consulted 2026-10-23
W3C WAI · Understanding SC 1.4.6 · Contrast (Enhanced) · Informative explanation · consulted 2026-10-23
W3C WAI · Understanding SC 1.4.11 · Non-text Contrast · Informative explanation · consulted 2026-10-23
Sept paires calculées, consultables sans JavaScript
| Cas pédagogique | Premier plan / fond | Rapport calculé | Seuils numériques atteints |
|---|---|---|---|
| Or et fond sombre illustratifs | #D4BD7F / #101719 | 9,826201:1 | 3:1 · 4.5:1 · 7:1 |
| Noir et blanc | #000000 / #FFFFFF | 21,000000:1 | 3:1 · 4.5:1 · 7:1 |
| Gris sous le seuil 4,5 | #777777 / #FFFFFF | 4,478089:1 | 3:1 |
| Gris juste sous le seuil 3 | #959595 / #FFFFFF | 2,995346:1 | Seuil numérique non atteint |
| Gris au-dessus du seuil 7 | #595959 / #FFFFFF | 7,004729:1 | 3:1 · 4.5:1 · 7:1 |
| Rouge et blanc | #FF0000 / #FFFFFF | 3,998477:1 | 3:1 |
| Couleurs identiques | #777777 / #777777 | 1,000000:1 | Seuil numérique non atteint |
Le gris #777777 sur blanc donne environ 4,478089:1 : le seuil 4,5:1 n’est pas atteint. #959595 sur blanc donne environ 2,995346:1 : arrondir ce nombre à 3,0 ne permet pas de considérer le seuil 3:1 comme atteint. Ces calculs ne sont pas des mesures d’un parcours réel.
Une recette de vérification orientée tâche
- Définir la tâche
Préciser ce que la personne doit terminer, avec quelles pages et quels états : saisie, attente, erreur, correction et confirmation.
- Tester des usages distincts
Parcourir au clavier, avec zoom et sur petit écran ; examiner aussi le nom et les états exposés aux technologies d’assistance.
- Conserver les constats reproductibles
Noter version, configuration, étapes, résultat attendu et résultat observé. Relier la barrière au critère et garder les exceptions examinées.
- Rejouer après correction
Vérifier la tâche complète avec les composants et services réellement utilisés, puis conserver les points restant à confirmer.
Copyright © 2020–2024 World Wide Web Consortium. Recommandation W3C WCAG 2.2 du 12 décembre 2024. Copyright © 2023 W3C®. Ce document inclut des éléments copiés ou dérivés de Web Content Accessibility Guidelines (WCAG) 2.2. Identifiants, titres et niveaux sont attribués au W3C ; questions, cas et méthode sont une synthèse CIE. Il ne s’agit pas d’une traduction officielle ni d’une spécification modifiée.
W3C · Web Content Accessibility Guidelines (WCAG) 2.2 · Recommendation · 12 December 2024
W3C · Document license · 2023 version · Terms and attribution consulted 2026-10-23
Édition documentaire vérifiée
WCAG 2.2 · Recommendation · 2024-12-12 · 2026-10-23
Source HTML SHA-256: 6e3c5fe397257cae509a2fb4752b73062cf8cbeb92c2cec618989b17e4cf7057
Références officielles
Date de consultation des références : . La méthode et la fiche de travail proposent des contrôles à adapter à votre contexte ; elles ne constituent pas une certification.
- W3C WAI — Forms tutorial
- W3C WAI — Form validation
- W3C · Web Content Accessibility Guidelines (WCAG) 2.2
- W3C WAI · Understanding SC 1.4.3 · Contrast (Minimum)
- W3C WAI · Understanding SC 1.4.6 · Contrast (Enhanced)
- W3C WAI · Understanding SC 1.4.11 · Non-text Contrast
- W3C WAI · Forms Tutorial · Labeling Controls
- W3C WAI · Forms Tutorial · User Notifications
- W3C WAI · Understanding SC 3.3.8 · Accessible Authentication (Minimum)
- W3C · Document license · 2023 version
Pour aller plus loin
Analyses associées
