Checklist WCAG 2.2 : Les 50 critères Level A & AA
Checklist WCAG 2.2 gratuite couvrant les 50 critères de succès Level A & AA. Découvrez quels problèmes les outils automatisés détectent et lesquels nécessitent des tests manuels. Conseils pratiques inclus.
Pourquoi la conformité WCAG 2.2 AA est importante en 2026
La conformité en matière d’accessibilité web n’est plus optionnelle pour la plupart des organisations. Le paysage réglementaire a considérablement évolué : l’European Accessibility Act (EAA) exige la conformité EN 301 549 pour les services numériques, et les entreprises font de plus en plus face à des actions en justice citant les WCAG comme norme.
Selon l’étude WebAIM Million, 94,8 % des pages d’accueil présentent des non-conformités WCAG détectables. Les problèmes les plus courants — texte alternatif manquant, faible contraste des couleurs, labels de formulaire manquants — sont parmi les plus faciles à corriger. C’est là que cette checklist entre en jeu.
Les WCAG 2.2, publiées en octobre 2023 et désormais la norme en vigueur, ajoutent 9 nouveaux critères de succès axés sur l’accessibilité cognitive, la convivialité mobile et l’authentification. Elles s’appuient sur les WCAG 2.1, ce qui signifie que la conformité complète aux 2.2 couvre également les 2.1. Cette checklist couvre les 50 critères Level A et AA que vous devez respecter.
Points clés sur les WCAG 2.2 AA
- 50 critères de succès répartis entre Level A (18) et Level AA (32)
- Environ 40 % des problèmes peuvent être détectés par des outils de scan automatisés
- Les 60 % restants nécessitent des tests manuels avec des technologies d’assistance
- Les WCAG 2.2 AA sont référencées par les exigences ADA, EAA et EN 301 549
Référence rapide : WCAG 2.2 en un coup d’œil
Cette checklist couvre tous les critères de succès WCAG 2.2 Level A et AA. Utilisez-la pour auditer votre site web en matière d’accessibilité. Les critères marqués d’une coche verte peuvent être partiellement détectés par des outils automatisés comme inclly. Ceux marqués d’une icône d’avertissement nécessitent des tests manuels.
Comment utiliser cette checklist
- Automatisé critères peuvent être détectés par des outils de scan (inclly les détecte)
- Manuel critères nécessitent un jugement et des tests humains
Les outils automatisés détectent environ 40 % des problèmes d’accessibilité. Utilisez cette checklist pour couvrir les 60 % restants qui nécessitent des tests manuels.
Perceptible
Les informations et les composants de l’interface utilisateur doivent être présentés aux utilisateurs de manière perceptible.
Contenu non textuel
Level ATout contenu non textuel dispose d’une alternative textuelle servant un objectif équivalent.
Comment corriger
- -Ajoutez un texte alternatif à toutes les images porteuses de sens
- -Utilisez un alt="" vide pour les images décoratives
- -Fournissez des alternatives textuelles pour les graphiques et diagrammes
- -Ajoutez des sous-titres ou des transcriptions pour le contenu audio
Audio seul et vidéo seule
Level AFournissez des alternatives pour les médias temporels.
Comment corriger
- -Fournissez des transcriptions pour le contenu audio seul
- -Fournissez une audiodescription ou une alternative textuelle pour le contenu vidéo seul
Sous-titres (préenregistrés)
Level ADes sous-titres sont fournis pour tout contenu audio préenregistré dans un média synchronisé.
Comment corriger
- -Ajoutez des sous-titres à toutes les vidéos avec audio
- -Assurez-vous que les sous-titres sont synchronisés avec l’audio
- -Incluez l’identification du locuteur lorsqu’il y a plusieurs intervenants
Information et relations
Level AL’information, la structure et les relations véhiculées par la présentation peuvent être déterminées par programmation.
Comment corriger
- -Utilisez du HTML sémantique (titres, listes, tableaux)
- -Associez les labels de formulaire aux champs de saisie
- -Utilisez les landmarks ARIA de manière appropriée
- -Assurez-vous que l’ordre de lecture correspond à l’ordre visuel
Ordre séquentiel significatif
Level ALorsque la séquence affecte le sens, un ordre de lecture correct peut être déterminé par programmation.
Comment corriger
- -Assurez-vous que l’ordre du DOM correspond à l’ordre visuel
- -Testez avec le CSS désactivé pour vérifier l’ordre de lecture
Caractéristiques sensorielles
Level ALes instructions ne reposent pas uniquement sur des caractéristiques sensorielles comme la forme, la couleur, la taille ou l’emplacement.
Comment corriger
- -N’utilisez pas « cliquez sur le bouton rouge » ou « voir la barre latérale »
- -Fournissez plusieurs moyens d’identifier les éléments
Utilisation de la couleur
Level ALa couleur n’est pas utilisée comme seul moyen visuel de transmettre une information.
Comment corriger
- -Ajoutez des icônes ou des labels textuels en complément des indicateurs de couleur
- -Utilisez des motifs en plus des couleurs dans les graphiques
- -Assurez-vous que les liens sont soulignés ou ont d’autres indicateurs non colorés
Contrôle du son
Level ASi un son se lance automatiquement pendant plus de 3 secondes, fournissez un moyen de le mettre en pause ou de contrôler le volume.
Comment corriger
- -Évitez la lecture automatique du son
- -Si nécessaire, fournissez des contrôles visibles de pause/arrêt
- -Incluez un contrôle du volume indépendant du volume système
Contraste (minimum)
Level AALe texte a un rapport de contraste d’au moins 4,5:1 (3:1 pour le texte de grande taille).
Comment corriger
- -Utilisez un outil de vérification du contraste
- -Le texte de grande taille (18pt+ ou 14pt gras) nécessite un rapport de 3:1
- -Le texte normal nécessite un rapport de 4,5:1
Redimensionnement du texte
Level AALe texte peut être redimensionné jusqu’à 200 % sans perte de contenu ni de fonctionnalité.
Comment corriger
- -Utilisez des unités relatives (rem, em) au lieu des pixels
- -Testez à un zoom de 200 % dans le navigateur
- -Assurez-vous qu’il n’y a pas de défilement horizontal à 200 % de zoom
Images de texte
Level AASi la même présentation visuelle peut être réalisée avec du texte, n’utilisez pas d’images de texte.
Comment corriger
- -Utilisez le CSS pour la mise en forme du texte au lieu d’images
- -Les logos sont une exception à cette règle
Redistribution
Level AALe contenu peut être présenté sans défilement horizontal à une largeur de 320px.
Comment corriger
- -Utilisez un design responsive
- -Testez à une largeur de viewport de 320px
- -Évitez le défilement bidimensionnel sauf pour le contenu complexe
Contraste du contenu non textuel
Level AALes composants d’interface et les éléments graphiques ont un rapport de contraste de 3:1.
Comment corriger
- -Les champs de formulaire nécessitent des bordures visibles avec un contraste suffisant
- -Les icônes porteuses de sens nécessitent un contraste de 3:1
- -Les indicateurs de focus nécessitent un contraste de 3:1
Espacement du texte
Level AAPas de perte de contenu lorsque l’espacement du texte est ajusté.
Comment corriger
- -N’utilisez pas de conteneurs à hauteur fixe pour le texte
- -Testez avec une hauteur de ligne, un espacement des lettres et des mots augmentés
Contenu au survol ou au focus
Level AALe contenu supplémentaire déclenché au survol/focus est masquable, survolable et persistant.
Comment corriger
- -Les infobulles doivent pouvoir être fermées avec Échap
- -L’utilisateur doit pouvoir survoler le contenu de l’infobulle
- -Le contenu doit rester visible jusqu’à sa fermeture
Utilisable
Les composants de l’interface utilisateur et la navigation doivent être utilisables.
Clavier
Level AToutes les fonctionnalités sont accessibles au clavier uniquement.
Comment corriger
- -Testez l’ensemble du site en utilisant uniquement Tab, Entrée, Espace et les touches fléchées
- -Assurez-vous que tous les éléments interactifs sont focalisables
- -Les composants personnalisés nécessitent une prise en charge du clavier
Pas de piège au clavier
Level ALe focus clavier n’est jamais piégé dans un composant.
Comment corriger
- -Testez les modales et les boîtes de dialogue pour la navigation au clavier
- -Assurez-vous que le focus peut toujours quitter n’importe quel élément
Raccourcis clavier à caractère unique
Level ALes raccourcis clavier à caractère unique peuvent être désactivés ou reconfigurés.
Comment corriger
- -Évitez les raccourcis à touche unique (comme « s » pour rechercher)
- -Si utilisés, fournissez des paramètres pour reconfigurer ou désactiver
Délai ajustable
Level ALes utilisateurs peuvent prolonger, ajuster ou désactiver les limites de temps.
Comment corriger
- -Les expirations de session doivent avertir les utilisateurs et permettre une prolongation
- -Ne faites pas avancer automatiquement les carrousels sans contrôle de l’utilisateur
Mettre en pause, arrêter, masquer
Level ALe contenu en mouvement ou mis à jour automatiquement peut être mis en pause, arrêté ou masqué.
Comment corriger
- -Les carrousels nécessitent des contrôles de pause
- -Le contenu mis à jour automatiquement nécessite des contrôles d’arrêt
- -Les animations de plus de 5 secondes nécessitent des contrôles
Pas plus de trois flashs ou en dessous du seuil
Level ALe contenu ne clignote pas plus de 3 fois par seconde.
Comment corriger
- -Évitez complètement le contenu clignotant
- -Si nécessaire, maintenez la fréquence de clignotement en dessous de 3 Hz
Contourner des blocs
Level AFournissez un moyen de contourner les blocs de contenu répétés.
Comment corriger
- -Ajoutez un lien « aller au contenu principal »
- -Utilisez les landmarks ARIA (main, nav, etc.)
- -Assurez une structure de titres correcte
Titre de page
Level ALes pages ont des titres qui décrivent le sujet ou l’objectif.
Comment corriger
- -Chaque page doit avoir un titre unique et descriptif
- -Le titre doit inclure le nom de la page et le nom du site
Parcours du focus
Level AL’ordre du focus préserve le sens et l’opérabilité.
Comment corriger
- -L’ordre de tabulation doit suivre l’ordre de lecture visuel
- -Les modales doivent capturer le focus de manière appropriée
- -Le focus doit revenir à l’élément déclencheur lorsque la modale se ferme
Fonction du lien (selon le contexte)
Level ALa fonction du lien peut être déterminée à partir du texte du lien ou de son contexte.
Comment corriger
- -Évitez « cliquez ici » ou « en savoir plus » sans contexte
- -Le texte du lien doit avoir un sens hors contexte ou avec le texte environnant
- -Utilisez aria-label si le texte du lien seul n’est pas descriptif
Accès multiples
Level AAPlus d’un moyen est disponible pour localiser une page au sein d’un ensemble de pages.
Comment corriger
- -Fournissez une recherche sur le site
- -Incluez un plan du site
- -Utilisez des menus de navigation clairs
En-têtes et labels
Level AALes en-têtes et les labels décrivent le sujet ou l’objectif.
Comment corriger
- -Utilisez des en-têtes descriptifs et uniques
- -Les labels de formulaire doivent décrire clairement la saisie attendue
Visibilité du focus
Level AAL’indicateur de focus clavier est visible.
Comment corriger
- -Ne supprimez pas les styles de contour sans remplacement
- -L’indicateur de focus doit être clairement visible
- -Utilisez :focus-visible pour les styles de focus clavier uniquement
Focus non masqué (minimum)
Level AAL’élément focalisé n’est pas entièrement masqué par d’autre contenu.
Comment corriger
- -Les en-têtes fixes ne doivent pas couvrir les éléments focalisés
- -Les bannières de cookies ne doivent pas couvrir les éléments focalisés
- -Utilisez scroll-margin pour tenir compte des éléments fixes
Gestes pour le pointeur
Level ALes gestes multipoints ou basés sur une trajectoire ont des alternatives à pointeur unique.
Comment corriger
- -Le pincement pour zoomer doit avoir des alternatives par bouton
- -Les gestes de balayage nécessitent des alternatives par bouton
- -Les interactions cartographiques nécessitent des alternatives par clic simple
Annulation du pointeur
Level ALes actions déclenchées par l’appui du pointeur peuvent être annulées.
Comment corriger
- -Utilisez click/touch-end au lieu de mousedown/touchstart
- -Fournissez une fonctionnalité d’annulation pour les actions destructives
Label dans le nom
Level ALes labels textuels visibles sont inclus dans les noms accessibles.
Comment corriger
- -Le nom accessible doit inclure ou correspondre au label visible
- -N’utilisez pas d’aria-label en contradiction avec le texte visible
Activation par le mouvement
Level ALes fonctions déclenchées par le mouvement ont des alternatives d’interface.
Comment corriger
- -Secouer pour annuler nécessite une alternative par bouton
- -Les contrôles par mouvement doivent être optionnels
Mouvements de glissement
Level AALes opérations de glisser-déposer ont des alternatives à pointeur unique.
Comment corriger
- -Glisser pour réorganiser doit avoir des alternatives par bouton
- -Fournissez des flèches haut/bas pour la réorganisation des listes
Taille de la cible (minimum)
Level AALes cibles tactiles font au moins 24x24 pixels CSS (avec des exceptions).
Comment corriger
- -Les boutons et les liens doivent faire au moins 24x24 pixels
- -Fournissez un espacement adéquat entre les cibles tactiles
- -44x44 pixels est recommandé pour le mobile
Compréhensible
Les informations et le fonctionnement de l’interface utilisateur doivent être compréhensibles.
Langue de la page
Level ALa langue humaine par défaut de la page peut être déterminée par programmation.
Comment corriger
- -Ajoutez l’attribut lang à l’élément html
- -Utilisez le bon code de langue (en, es, fr, etc.)
Langue d’un passage
Level AALes changements de langue au sein du contenu sont identifiés.
Comment corriger
- -Utilisez l’attribut lang sur les éléments contenant du texte dans une autre langue
- -Incluez les noms propres et termes techniques dans la langue principale
Au focus
Level ALa réception du focus ne modifie pas automatiquement le contexte.
Comment corriger
- -Ne soumettez pas automatiquement les formulaires au focus
- -N’ouvrez pas de nouvelles fenêtres au focus
- -Ne naviguez pas ailleurs au focus
À la saisie
Level ALa modification de paramètres ne change pas automatiquement le contexte, sauf si l’utilisateur est averti.
Comment corriger
- -Les formulaires doivent avoir des boutons de soumission explicites
- -Avertissez les utilisateurs avant la soumission automatique
- -Les boutons radio ne doivent pas soumettre automatiquement les formulaires
Navigation cohérente
Level AALa navigation apparaît dans le même ordre sur toutes les pages.
Comment corriger
- -Maintenez la navigation au même emplacement sur toutes les pages
- -Conservez un ordre cohérent des éléments de navigation
Identification cohérente
Level AALes composants ayant la même fonctionnalité sont identifiés de manière cohérente.
Comment corriger
- -Utilisez des labels cohérents pour des fonctions similaires
- -Les icônes de recherche doivent toujours signifier la recherche
- -N’utilisez pas de labels différents pour la même action
Aide cohérente
Level ALes mécanismes d’aide apparaissent dans le même ordre relatif sur les pages.
Comment corriger
- -Maintenez les liens d’aide à un emplacement cohérent
- -Les informations de contact doivent être au même endroit sur toutes les pages
Identification des erreurs
Level ALes erreurs de saisie sont automatiquement détectées et décrites à l’utilisateur.
Comment corriger
- -Affichez des messages d’erreur clairs pour les saisies invalides
- -Identifiez quel champ contient une erreur
- -Ne comptez pas uniquement sur la couleur pour indiquer les erreurs
Labels ou instructions
Level ADes labels ou des instructions sont fournis lorsque le contenu nécessite une saisie utilisateur.
Comment corriger
- -Chaque champ de formulaire nécessite un label visible ou sr-only
- -Fournissez des indications de format (par ex. « JJ/MM/AAAA »)
- -Indiquez les champs obligatoires
Suggestion après erreur
Level AASi une erreur de saisie est détectée, des suggestions sont fournies.
Comment corriger
- -Suggérez des corrections lorsque c’est possible
- -Affichez le format attendu pour les saisies invalides
- -Fournissez des exemples de saisie valide
Prévention des erreurs (juridique, financier, données)
Level AAPour les transactions juridiques/financières, les soumissions sont réversibles, vérifiées ou confirmées.
Comment corriger
- -Permettez aux utilisateurs de vérifier avant la soumission finale
- -Fournissez une étape de confirmation pour les actions importantes
- -Permettez aux utilisateurs d’annuler ou de corriger les soumissions
Saisie redondante
Level ALes informations précédemment saisies sont pré-remplies ou disponibles pour sélection.
Comment corriger
- -Ne demandez pas aux utilisateurs de ressaisir des informations
- -Pré-remplissez l’adresse de livraison à partir de l’adresse de facturation
- -Mémorisez les préférences au sein d’une session
Authentification accessible (minimum)
Level AALes tests de fonction cognitive ne sont pas requis pour l’authentification, sauf si des alternatives existent.
Comment corriger
- -Autorisez les gestionnaires de mots de passe
- -Permettez le copier-coller pour les codes de vérification
- -N’utilisez pas les CAPTCHAs comme seule option
Robuste
Le contenu doit être suffisamment robuste pour être interprété de manière fiable par une grande variété d’agents utilisateurs.
Nom, rôle et valeur
Level ALes composants d’interface ont des noms accessibles, des rôles et des états.
Comment corriger
- -Les composants personnalisés nécessitent des rôles ARIA appropriés
- -Les boutons bascule nécessitent aria-pressed
- -Les sections dépliables nécessitent aria-expanded
Messages de statut
Level AALes messages de statut peuvent être déterminés par programmation sans recevoir le focus.
Comment corriger
- -Utilisez les régions aria-live pour les mises à jour dynamiques
- -Les messages de succès/erreur nécessitent role="alert" ou aria-live
- -Les états de chargement doivent être annoncés
Questions fréquemment posées
Quelle est la différence entre WCAG 2.1 et 2.2 ?
WCAG 2.2 s’appuie sur WCAG 2.1 en ajoutant 9 nouveaux critères de succès axés sur les utilisateurs ayant des handicaps cognitifs, une basse vision et les utilisateurs d’appareils mobiles. Les ajouts clés incluent Focus non masqué (2.4.11), Mouvements de glissement (2.5.7) et Taille de la cible minimum (2.5.8). WCAG 2.2 a également supprimé le critère 4.1.1 Analyse syntaxique comme obsolète. Si vous êtes conforme à WCAG 2.2, vous êtes automatiquement conforme à 2.1.
Quel pourcentage de problèmes WCAG les outils automatisés peuvent-ils détecter ?
Les outils de test d’accessibilité automatisés peuvent détecter environ 30 à 40 % des problèmes WCAG. Ceux-ci incluent des problèmes techniques comme le texte alternatif manquant, les échecs de contraste des couleurs, les labels de formulaire manquants et la structure de titres incorrecte. Les 60 à 70 % restants nécessitent un jugement humain—par exemple, si le texte alternatif est pertinent, si le contenu est organisé logiquement ou si les messages d’erreur sont utiles.
Le WCAG 2.2 AA est-il légalement obligatoire ?
Cela dépend de votre juridiction. Aux États-Unis, la règle du DOJ d’avril 2024 exige que les gouvernements étatiques et locaux respectent le WCAG 2.1 Level AA. Les entreprises privées font face à des poursuites ADA citant le WCAG comme norme. Dans l’UE, l’European Accessibility Act (en vigueur depuis juin 2025) exige le WCAG 2.1 AA pour de nombreux produits et services numériques. Le WCAG 2.2 devient de plus en plus la norme attendue.
Combien de temps faut-il pour atteindre la conformité WCAG 2.2 AA ?
Le délai varie considérablement en fonction de l’état actuel, de la taille et de la complexité de votre site. Un petit site marketing peut nécessiter quelques semaines de travail concentré, tandis qu’une grande application web peut nécessiter plusieurs mois. L’essentiel est de prioriser : corrigez d’abord les problèmes critiques (Level A), puis abordez les critères AA. N’oubliez pas que l’accessibilité est un processus continu—les nouveaux contenus et fonctionnalités nécessitent des tests en permanence.
Quelles sont les non-conformités WCAG les plus courantes ?
Selon le rapport WebAIM Million, les non-conformités les plus courantes sont : le texte alternatif manquant pour les images (54,5 %), le faible contraste des couleurs (81 %), les labels de formulaire manquants (45,9 %), les liens vides (44,6 %), la langue du document manquante (17,1 %) et les boutons vides (26,9 %). La plupart peuvent être détectés par des outils automatisés et sont relativement simples à corriger.
Continuer à apprendre
Explorez des guides connexes pour approfondir votre stratégie de conformité en accessibilité.
Tests automatisés vs manuels
Comprenez ce que chaque approche détecte et construisez une stratégie de test efficace.
Guide de test manuel
5 tests essentiels que tout développeur devrait connaître.
Checklist de conformité EAA
Exigences EN 301 549 mappées aux WCAG 2.2 pour la conformité EAA.
Outils d’accessibilité comparés
Comparez axe DevTools, WAVE, Lighthouse, Pa11y et plus encore.
Besoin d’aide pour implémenter ces corrections ?
inclly scanne automatiquement votre site web à la recherche de problèmes WCAG 2.2 AA et fournit des exemples de code spécifiques à votre framework. Commencez par un scan gratuit pour voir quels critères votre site respecte — et lesquels nécessitent une attention.
Lancer un scan gratuit