Sur cette page
Publié le : Mise à jour le :
Tester et documenter l’accessibilité
Un constat d’accessibilité doit permettre à quelqu’un de reproduire le problème et de le corriger. Indiquez la page, les étapes du test, la difficulté rencontrée et le résultat attendu.
Comparer des exemples
| Exemple | Ce que vous examinez | Ce que vous pouvez conclure |
|---|---|---|
| Ara et sa déclaration | Liens d’évitement (skip links), titres, navigation, formulaire de connexion sans envoyer de données | Déclaration à 100 % RGAA 4.1.2, mise à jour le 9 octobre 2025, consultée le 30 septembre 2026. Lire le périmètre et l’environnement de l’audit |
| W3C, site avant correction et après correction | Même contenu, structure et alternatives différentes. Comparer aussi les formulaires Survey | Démonstration pédagogique ancienne du W3C. Elle n’a pas fait l’objet d’un audit RGAA |
| Grenoble Alpes Métropole | Lire la déclaration et le défaut restant | 98,55 % annoncés lors de la consultation du 30 septembre 2026, avec des PDF non conformes. L’ancien taux de 100 % ne décrit plus le résultat actuel |
| Ada Tech School | Choisir une tâche et deux pages, observer réellement | Aucun verdict préétabli. Retenir seulement les résultats que vous avez reproduits |
Une déclaration qui annonce une conformité totale s’appuie sur un audit daté et un périmètre précis. Lisez les pages et les environnements testés. Le résultat ne couvre pas tous les usages possibles et peut évoluer avec le site.
Lire les chiffres d’un audit
Le baromètre Contentsquare Foundation 2023 étudie 50 sites français, sur trois pages par site et une sélection de 11 critères RGAA parmi les plus bloquants. Les audits manuels ont été réalisés par Numérik-ea et Temesis.
| Secteur | Part des 11 critères respectés, en moyenne |
|---|---|
| Sites publics | 69 % |
| Banques | 61 % |
| Médias | 44 % |
| E-commerce | 36 % |
52 % des sites étudiés sont sous 50 %, et 64 % ne publient pas leur taux. Les sites publics, soumis à une obligation depuis 2005, arrivent en tête. Le graphique suivant détaille quatre familles de critères. Il sert à comparer les obstacles étudiés, pas à décrire l’état de tous les sites en 2026.
Lire les valeurs du graphique en tableau
| Secteur | Mouvement | Alternatives médias | Espacement | Navigation clavier |
|---|---|---|---|---|
| Public | 25 % | 40 % | 77 % | 78 % |
| Banque | 0 % | 32 % | 64 % | 78 % |
| Médias | 0 % | 23 % | 64 % | 48 % |
| E-commerce | 11 % | 17 % | 38 % | 47 % |
Dans cet échantillon, la catégorie e-commerce atteint 47 % pour les critères de navigation clavier sélectionnés. Ce chiffre ne signifie pas que 47 % des sites marchands sont entièrement accessibles.
La méthodologie du PDF (pages 45 à 48) précise que cette étude n’est pas un audit de conformité complet. Les entretiens (pages 30 à 37) donnent des pistes pour tester les cookies, les formulaires, les CAPTCHA, les fenêtres qui s’ouvrent par-dessus la page (pop-ups) et les contrastes. Présentation de l’étude 2023 par Contentsquare.
Que nous apprend une étude plus récente ?
L’étude e-commerce 2025 de Contentsquare Foundation signale des obstacles majeurs dans 94 % des sites audités. Elle porte sur les parcours d’achat et utilise une autre méthode. On ne peut donc pas soustraire ce résultat aux pourcentages de 2023 pour mesurer une évolution.
Testez le parcours jusqu’à son résultat, y compris le panier, les erreurs et la confirmation. Étude 2025 et périmètre.
Tester en cinq étapes
Avant de commencer, fixez le périmètre : une tâche, les pages concernées et les états à tester. Pour l’exercice local, la page fournie suffit. Notez les URL, la date, le navigateur et les outils. Suivez ensuite ces étapes dans l’ordre.
- Réalisez la tâche au clavier. Tab avance et Maj+Tab revient entre les éléments interactifs. Entrée active un lien ou un bouton. Espace active un bouton ou une case à cocher. Vérifiez l’ordre de tabulation (tab order), le focus visible et les menus. Repérez les pièges au clavier (keyboard trap, souvent appelé focus trap), où le focus reste bloqué. Dans une boîte de dialogue ouverte, garder le focus à l’intérieur est voulu, tant qu’Échap ou un bouton permet d’en sortir. Tab ne parcourt pas les paragraphes.
- Testez avec un lecteur d’écran (screen reader). Repérez un titre, un champ et un bouton. Vérifiez les noms, les rôles, les états et les messages annoncés. Inspectez aussi le HTML et l’arbre d’accessibilité (accessibility tree) : titres, noms des liens, libellés, langue et alternatives des images.
- Vérifiez l’affichage et les médias. Agrandissez le texte à 200 %, essayez une largeur de 320 px et mesurez les contrastes. Dans les DevTools de Chromium, ouvrez Rendering puis “Emulate vision deficiencies” pour examiner les couleurs. Vérifiez qu’une information reste compréhensible sans distinguer le rouge du vert. Coupez le son d’une vidéo et vérifiez que les sous-titres (captions) restituent la parole et les sons utiles.
- Lancez une analyse automatique avec axe, WAVE ou Lighthouse. Examinez au moins un résultat dans la page. Les alertes “à vérifier” demandent votre analyse. Un score de 100 ne certifie pas le site.
- Documentez et retestez. Notez le constat, sa preuve et la correction proposée. Après modification, refaites les mêmes manipulations.
Les outils ne jugent pas la pertinence de tous les textes et ne vérifient pas qu’une personne peut terminer le parcours. La part des problèmes détectés dépend de l’outil et de la page. Évaluer l’accessibilité, W3C.
Un lecteur d’écran permet de parcourir les titres, les liens et les champs, puis d’en écouter le contenu. Vidéo W3C WAI sur la synthèse vocale, avec transcription. Vignette © W3C, Web Accessibility Perspectives.
Essayer un lecteur d’écran
Sur Mac : commandes de VoiceOver
Ouvrez la page à tester, puis activez VoiceOver avec Commande + F5. Le même raccourci permet de le désactiver. Utilisez les commandes ci-dessous pour parcourir la page. Dans ces raccourcis, VO désigne la combinaison Contrôle + Option par défaut.
| Action | Raccourci |
|---|---|
| Activer ou désactiver VoiceOver | Commande + F5, parfois avec Fn selon le clavier |
| Aller à l’élément suivant | VO + flèche droite |
| Activer l’élément | VO + Espace |
| Ouvrir le rotor | VO + U |
| Interrompre la parole | Contrôle |
Le rotor permet de parcourir la page par type d’élément. Choisissez par exemple Titres ou Contrôles de formulaire. Guide Apple.
Sur Windows : commandes de NVDA
Si NVDA n’est pas installé, suivez la rubrique d’installation du guide NVDA. Lancez NVDA, puis ouvrez la page à tester dans votre navigateur. Dans les raccourcis suivants, NVDA désigne la touche Inser ou Verr. maj., selon votre configuration.
| Action | Raccourci |
|---|---|
| Aller au titre suivant, en mode navigation | H |
| Aller au champ suivant, en mode navigation | F |
| Ouvrir la liste d’éléments | NVDA + F7 |
| Changer de mode navigation/formulaire | NVDA + Espace |
| Quitter NVDA | NVDA + Q |
Le mode navigation (browse mode) sert à parcourir le contenu. Le mode formulaire (focus mode) permet de saisir ou d’agir dans les contrôles. Consultez le guide NVDA.
Avant de déclarer un défaut clavier sur Mac, vérifiez que la navigation clavier de macOS et du navigateur permet d’atteindre tous les contrôles. Safari et Helium peuvent avoir des réglages différents. Notez le système, le navigateur et le lecteur d’écran utilisés. Ce premier essai ne couvre pas toutes les combinaisons à vérifier pour un audit.
Testez sur une page locale, avec des données fictives. Notez ce qui est réellement annoncé. L’arbre d’accessibilité aide à diagnostiquer, mais ne remplace pas la restitution du lecteur d’écran. Si le lecteur ne fonctionne pas, indiquez “non testé” et notez le blocage. Consultez le guide correspondant ci-dessus pour vérifier son activation et ses réglages, puis refaites l’essai. Vous pouvez poursuivre les autres tests en conservant cette limite dans vos notes.
Lire un critère RGAA
Ouvrez les critères et tests. Pour une action impossible au clavier, cherchez 7.3, puis son test 7.3.1. Lisez les conditions du test et les cas particuliers, puis appliquez-le à la page. Expliquez ce que vous avez vérifié et le résultat observé.
Utilisez ces repères pour trouver le critère, puis lisez son test avant de conclure.
| Point à examiner | Critères RGAA |
|---|---|
| Images et alternatives | 1.1 à 1.3 |
| Couleur et contraste | 3.1 à 3.3 |
| Liens explicites | 6.1 |
| Composants pilotés par JavaScript | 7.1 et 7.3 |
| Messages de statut (status messages) | 7.5 |
| Langue de la page, présente puis pertinente | 8.3 et 8.4 |
| Titre de la page, présent puis pertinent | 8.5 et 8.6 |
| Hiérarchie des titres | 9.1 |
| Texte agrandi à 200 % et affichage à 320 px | 10.4 et 10.11 |
| Focus visible | 10.7 |
| Étiquettes des champs (labels) | 11.1 et 11.2 |
| Intitulés des boutons | 11.9 |
| Erreurs de saisie | 11.10 et 11.11 |
| Ordre de tabulation (tab order) et piège au clavier (keyboard trap, focus trap) | 12.8 et 12.9 |
Conforme, non conforme, non applicable, non testé
- Conforme : le critère applicable et ses tests sont satisfaits sur le périmètre contrôlé.
- Non conforme : au moins un test applicable échoue. Décrivez le cas.
- Non applicable : le critère ne s’applique pas à ce contenu, avec une justification. Une page sans vidéo ne permet pas de conclure que ses sous-titres sont conformes.
- Non testé : vous n’avez pas effectué les vérifications nécessaires. Ce statut de suivi pédagogique n’est ni une conformité ni une exemption.
Dans un audit complet, le taux dépend des critères applicables à l’échantillon et des règles de la méthode. Dans cet atelier, vous ne calculez aucun taux global. RGAA, méthode de test.
Un constat utile
Sur la page locale a-corriger.html, après le champ e-mail, Tab passe directement à Recommencer. L’action Recevoir les informations est un div cliquable absent du parcours clavier. Une personne utilisant uniquement le clavier ne peut pas déclencher cette demande. Je propose un bouton submit et un gestionnaire submit sur le formulaire. Je retesterai avec Tab puis Entrée, y compris avec une saisie invalide.
Une capture montre l’affichage à un instant donné. Pour expliquer le parcours du focus, ajoutez les touches utilisées et le résultat observé. Distinguez les corrections proposées sur un site externe de celles réalisées dans votre code.
Notez vos constats dans votre dossier. Vous pouvez copier le modèle de diagnostic pour structurer vos notes. Ce diagnostic limité ne produit pas de taux de conformité. Un audit RGAA complet exige un échantillon et l’ensemble des critères applicables, avec la méthode prévue. Méthode officielle.
Modèle : un ticket que quelqu’un peut reprendre
Page et tâche : a-corriger.html, demander les informations sur un atelier.
Environnement : date, système, navigateur et version, lecteur d’écran si utilisé.
Étapes : recharger, appuyer sur Tab jusqu’au champ e-mail, appuyer à nouveau sur Tab.
Observé : le focus arrive sur Recommencer et saute Recevoir les informations.
Attendu et impact : l’action d’envoi doit être atteignable et activable au clavier. La demande est actuellement impossible sans souris.
Référence à vérifier : RGAA 7.3, test 7.3.1 pour cette action scriptée, et parcours clavier selon le cas.
Correction proposée : remplacer le div par un bouton submit et traiter l’événement submit du formulaire.
Retest : refaire le parcours avec Tab et Entrée, puis tester une adresse invalide et une adresse valide. Consigner le résultat réel et les points restants.