Liste de contrôle WCAG 2.2 AA pour les boutiques en ligne

Checklist WCAG 2.2 AA par type de page pour Shopify et WooCommerce : texte alternatif, contraste, étiquettes, clavier, focus, taille des cibles, critères 2.2.

Rédaction FixReports12 min de lecture

Une liste de contrôle WCAG 2.2 AA pour une boutique en ligne commence par les non-conformités présentes sur la plupart des modèles de boutique : texte alternatif manquant, texte peu contrasté, liens et boutons sans nom accessible, champs de formulaire sans étiquette, pièges au clavier et focus invisible. Les WCAG 2.2 ajoutent ensuite des vérifications de niveau AA qui touchent durement les boutiques : éléments ayant le focus masqués sous des barres fixes (2.4.11), cibles tactiles de moins de 24 × 24 pixels CSS (2.5.8) et connexions qui obligent à mémoriser ou à ressaisir des informations (3.3.8). Testez chaque type de page (accueil, collection, produit, panier) au clavier et avec un outil de vérification automatique, puis corrigez les modèles du thème pour que toutes les pages héritent de la correction.

Points clés

  • Les WCAG 2.2 sont devenues une recommandation du W3C le 5 octobre 2023. L’édition en vigueur est datée du 12 décembre 2024 et a été approuvée en tant que norme ISO/IEC 40500:2025 (s’ouvre dans un nouvel onglet).
  • Dans le WebAIM Million 2026 (s’ouvre dans un nouvel onglet) (données de février 2026), 95,9 % des pages d’accueil du million de sites les plus visités présentaient des non-conformités WCAG 2 détectables.
  • Les six non-conformités les plus fréquentes étaient le texte peu contrasté (83,9 % des pages), le texte alternatif manquant (53,1 %), les étiquettes de formulaire manquantes (51 %), les liens vides (46,3 %), les boutons vides (30,6 %) et la langue de la page non déclarée (13,5 %).
  • Les 42 516 pages d’accueil Shopify de cet échantillon comptaient en moyenne 75,1 erreurs détectées, contre 56,1 pour l’ensemble des pages.
  • Les WCAG 2.2 ajoutent quatre critères de niveau AA (2.4.11, 2.5.7, 2.5.8, 3.3.8) et deux critères de niveau A (3.2.6, 3.3.7), et suppriment le critère 4.1.1 Analyse syntaxique.

Qu’est-ce qui change avec les WCAG 2.2 pour les boutiques en ligne ?

Les WCAG 2.2 ont ajouté neuf critères de succès, dont six de niveau A ou AA, et ont retiré le critère 4.1.1 Analyse syntaxique, jugé obsolète (W3C WAI (s’ouvre dans un nouvel onglet)).

Nouveau critèreNiveauCe que cela signifie pour une boutique
2.4.11 Focus non masqué (minimum)AAUn lien ou un bouton qui a le focus ne doit pas être entièrement masqué par un en-tête fixe, une barre « Ajouter au panier » fixe, un bandeau cookies ou un widget de chat
2.5.7 Mouvements de glissementAATout ce qui nécessite un glissement, comme un curseur de fourchette de prix, doit offrir une alternative en un seul appui
2.5.8 Taille de la cible (minimum)AALes cibles de clic et d’appui mesurent au moins 24 × 24 pixels CSS, ou sont espacées de sorte qu’un cercle de 24 px autour de chacune ne touche pas ses voisines
3.2.6 Aide cohérenteALes liens d’aide, les coordonnées de contact ou le chat apparaissent dans le même ordre relatif sur chaque page
3.3.7 Saisie redondanteANe demandez pas deux fois la même information au cours d’un même processus ; préremplissez-la ou permettez de la sélectionner
3.3.8 Authentification accessible (minimum)AALa connexion ne doit pas reposer sur la mémorisation ou la retranscription, sauf s’il existe une alternative ou une aide comme le collage et les gestionnaires de mots de passe

Les trois autres (2.4.12, 2.4.13 et 3.3.9) sont de niveau AAA. Comme la version 2.2 conserve tous les critères de la 2.1 sauf le 4.1.1, respecter le niveau AA des WCAG 2.2 couvre aussi le niveau AA des WCAG 2.1.

Quels critères WCAG échouent le plus souvent sur les modèles de boutique ?

On retrouve chaque année les mêmes : contraste, texte alternatif, étiquettes de formulaire et noms des liens et des boutons, ainsi que des problèmes de clavier et de focus que les outils automatisés ne détectent qu’en partie.

CritèreCe qui échoue sur les boutiquesComment corriger
1.1.1 Contenu non textuel (A)Images produit sans texte alternatif ou avec un nom de fichier comme texte alternatif ; images cliquables sans texteDécrivez le produit montré (couleur, style, angle de vue). N’utilisez alt="" que pour les images décoratives. Les thèmes Shopify devraient afficher image.alt
1.4.3 Contraste (minimum) (AA)Texte courant gris clair, texte indicatif (placeholder), badges de promotion, texte sur les images d’en-tête4,5:1 pour le texte normal, 3:1 pour le gros texte (environ 24 px, ou 18,5 px en gras) (W3C (s’ouvre dans un nouvel onglet))
2.4.4 Fonction du lien (A), 4.1.2 Nom, rôle et valeur (A)Liens panier, recherche et réseaux sociaux composés d’une seule icône ; flèches de diaporama ; boutons de fermeture « X » sans nomDonnez à chaque commande un texte visible ou un aria-label, par exemple « Panier, 2 articles »
1.3.1 Information et relations (A), 3.3.2 Étiquettes ou instructions (A)Champs newsletter et recherche avec un simple texte indicatif ; champs de quantité sans étiquetteUtilisez un <label for> qui correspond à l’id du champ ; regroupez les pastilles de type bouton radio dans un fieldset avec une legend
2.1.1 Clavier (A), 2.1.2 Pas de piège au clavier (A)Menus qui ne s’ouvrent qu’au survol, pastilles construites avec des div, pop-ups impossibles à fermer au clavierUtilisez de vrais éléments button et a ; la touche Échap ferme les fenêtres superposées et replace le focus
2.4.7 Visibilité du focus (AA)outline: none dans le CSS du thèmeAjoutez un style :focus-visible qui se distingue nettement de l’arrière-plan

WebAIM a également constaté qu’une image cliquable sur quatre n’avait pas de texte alternatif, et que 45 % des images sans texte alternatif étaient des liens (WebAIM (s’ouvre dans un nouvel onglet)). Sur une grille de collection, il s’agit généralement du lien de l’image produit.

Que vérifier sur la page d’accueil ?

Vérifiez l’en-tête, la bannière principale (hero) et tout ce qui s’affiche en surimpression, car chaque visiteur les rencontre en premier.

  • Lien d’évitement. Un lien « Aller au contenu » comme premier élément pouvant recevoir le focus (2.4.1 Contourner des blocs, A).
  • Icônes de l’en-tête. Les icônes de recherche, de compte et de panier ont un nom accessible, et le nom du panier inclut le nombre d’articles.
  • Menu. Il s’ouvre avec Entrée ou Espace, ses sous-éléments sont accessibles avec Tab, il se ferme avec Échap et ne dépend pas du survol (2.1.1). Les exigences du Theme Store (s’ouvre dans un nouvel onglet) de Shopify précisent que toutes les parties d’une page, y compris les menus déroulants, doivent être accessibles au clavier.
  • Carrousel de la bannière principale. Si les diapositives défilent automatiquement pendant plus de cinq secondes, proposez une commande de pause (2.2.2 Mettre en pause, arrêter, masquer, A).
  • Barre d’annonce et texte sur images. Mesurez le contraste : les couleurs de marque échouent souvent au seuil de 4,5:1.
  • Pop-ups et bandeaux cookies. Déplacez le focus dans la pop-up, ajoutez une étiquette au champ e-mail, permettez la fermeture avec Échap et assurez-vous qu’un bandeau fixe ne recouvre jamais entièrement l’élément ayant le focus (2.4.11). Le W3C cite la propriété CSS scroll-padding comme l’un des moyens d’éviter que les barres fixes ne masquent les éléments ayant le focus (W3C (s’ouvre dans un nouvel onglet)).
  • Langue de la page. L’élément html possède un attribut lang correct (3.1.1 Langue de la page, A).

Que vérifier sur les pages de collection ?

Sur les pages de collection, les non-conformités portent généralement sur les cartes produit, les filtres et les pastilles.

  • Cartes produit. Le lien de l’image a un texte alternatif, ou l’image est masquée aux technologies d’assistance et le lien du titre porte le nom du produit.
  • Filtres. Chaque case à cocher a une étiquette et chaque groupe a un titre ou une légende. Le panneau de filtres s’ouvre, fonctionne et se ferme au clavier. Annoncez le nombre de résultats mis à jour sous forme de message d’état (4.1.3 Messages d’état, AA).
  • Curseurs de prix. Ajoutez des champs numériques de minimum et de maximum pour que le filtre fonctionne sans glissement (2.5.7) et sans souris (2.1.1).
  • Pastilles de couleur. Chaque pastille a un nom textuel, et la mention « épuisé » n’est pas signalée uniquement par la couleur (1.4.1 Utilisation de la couleur, A). Les pastilles mesurent 24 × 24 pixels CSS ou respectent la règle d’espacement (2.5.8).
  • Tri et pagination. La liste déroulante de tri a une étiquette ; les liens de page et les boutons « Charger plus » respectent la taille de cible.

Que vérifier sur les fiches produit ?

C’est sur la fiche produit que se joue la décision d’achat : testez donc chaque commande entre les photos et le bouton Ajouter au panier.

  • Galerie. Chaque image a un texte alternatif, les vignettes sont des boutons avec un nom comme « Afficher l’image 2 », et les flèches fonctionnent sans glissement (2.5.7).
  • Sélecteurs de variantes. Les options de taille et de couleur sont réunies dans un groupe étiqueté (1.3.1), l’option sélectionnée est exposée aux lecteurs d’écran (4.1.2) et les tailles indisponibles sont signalées par du texte.
  • Quantité. Le champ a une étiquette, et les boutons moins et plus ont un nom et respectent le critère 2.5.8. Le Theme Store de Shopify exige désormais des cibles tactiles d’au moins 24 × 24 pixels CSS, et ses bonnes pratiques d’accessibilité (s’ouvre dans un nouvel onglet) recommandent 44 × 44 pour les commandes principales.
  • Ajouter au panier. Les messages de réussite et d’erreur sont annoncés (4.1.3). La plainte de la FTC contre un éditeur de surcouche d’accessibilité citait un site où un lecteur d’écran n’annonçait pas l’ajout d’un article au panier, et où un graphique de notation 5 étoiles était lu à voix haute comme un bouton « previous » (plainte de la FTC (s’ouvre dans un nouvel onglet)).
  • Notes, onglets et accordéons. Les notes ont un texte comme « 4,5 étoiles sur 5 ». Les accordéons indiquent s’ils sont déployés ou non.
  • Barre « Ajouter au panier » fixe. Elle ne doit pas recouvrir entièrement l’élément ayant le focus lorsqu’un utilisateur du clavier parcourt la page avec Tab (2.4.11).
  • Vidéo. Les vidéos produit comportant de la parole ont des sous-titres (1.2.2 Sous-titres (pré-enregistrés), A).

Que vérifier dans le panier et à la connexion ?

Le panier est la dernière page que la plupart des thèmes contrôlent entièrement : testez-le jusqu’au bouton de paiement, puis vérifiez que la connexion au compte ne dépend ni de la mémoire ni d’une ressaisie.

  • Tiroir de panier. Le focus entre dans le tiroir, y reste tant qu’il est ouvert et revient au bouton du panier lorsque la touche Échap le ferme, comme le décrivent les bonnes pratiques de Shopify.
  • Lignes du panier. Chaque champ de quantité est étiqueté avec le nom du produit, et chaque bouton de suppression indique ce qu’il supprime, par exemple « Supprimer Chemise en lin, taille M ».
  • Champs de code promo et de note. Ils ont une étiquette, et les erreurs sont décrites par du texte (3.3.1 Identification des erreurs, A).
  • Bouton de paiement. Accessible avec Tab, avec un focus visible, et non masqué par des éléments fixes.
  • Connexion (3.3.8). Les comptes clients Shopify utilisent par défaut la connexion sans mot de passe avec un code à usage unique (s’ouvre dans un nouvel onglet). Le W3C indique que les codes doivent pouvoir être collés ou remplis automatiquement, et que bloquer le collage ou les gestionnaires de mots de passe fait échouer le critère ; les CAPTCHA de reconnaissance d’objets sont admis au niveau AA, mais les CAPTCHA à base de puzzle ou de calcul nécessitent une autre méthode (W3C (s’ouvre dans un nouvel onglet)).

Les différences entre plateformes comptent ici. Sur Shopify, checkout.liquid n’est plus pris en charge (s’ouvre dans un nouvel onglet) pour les étapes d’information, de livraison et de paiement : l’essentiel du balisage du tunnel de paiement relève donc de Shopify et non de votre thème ; testez les applications et personnalisations de paiement que vous ajoutez. Sur WooCommerce, la page de paiement est une page de votre site WordPress. WooCommerce affirme que son front-end principal est substantiellement conforme aux WCAG 2.2 AA (déclaration mise à jour le 1er avril 2025), mais votre thème et vos extensions peuvent toujours le mettre en défaut (WooCommerce (s’ouvre dans un nouvel onglet)).

Comment tester une boutique avec cette liste de contrôle ?

Combinez une analyse automatisée, un achat au clavier seul et une courte vérification au lecteur d’écran, sur chaque type de page.

  1. Analyse automatisée. Des outils comme axe, WAVE ou Lighthouse détectent les problèmes de contraste, de texte alternatif, d’étiquettes et de liens vides. Le Theme Store de Shopify demande un score d’accessibilité Lighthouse moyen d’au moins 90 sur les pages d’accueil, de collection et de produit. C’est un seuil minimal, et non la conformité : selon le W3C, les outils ne peuvent pas déterminer à eux seuls l’accessibilité (s’ouvre dans un nouvel onglet).
  2. Achat au clavier seul. Depuis la page d’accueil, atteignez un produit par le menu ou la recherche, filtrez, choisissez une variante, ajoutez au panier, ouvrez le panier et atteignez le bouton de paiement, sans souris.
  3. Vérification ponctuelle au lecteur d’écran. Avec VoiceOver ou NVDA, écoutez le nom du produit, le prix, l’état de la variante et la confirmation d’ajout au panier.
  4. Nouveau test après chaque modification. Les mises à jour du thème et les nouvelles applications peuvent annuler des corrections.

Notre analyse gratuite couvre l’étape 1 sur une page d’accueil, une page de collection, une fiche produit, le panier et une page de contenu, dans un vrai navigateur Chromium avec axe-core. Le Rapport Accessibilité teste jusqu’à 25 pages, ajoute l’étape 2 avec un test d’achat au clavier seul jusqu’au bouton de paiement, fournit du code avant/après et inclut une liste de contrôle pour l’étape 3, qui demande une personne équipée d’un lecteur d’écran. Aucun des deux ne garantit la conformité à l’ADA ou aux WCAG.

Foire aux questions

Les WCAG 2.2 sont-elles légalement obligatoires pour les boutiques en ligne aux États-Unis ?

Le ministère de la Justice des États-Unis n’a adopté aucun règlement ADA fixant une norme web pour les entreprises privées, et ses recommandations de 2022 sur le web (s’ouvre dans un nouvel onglet) renvoient aux WCAG comme à une référence utile. Les mises en demeure citent souvent les WCAG 2.1 ou 2.2 AA : parlez de vos obligations précises avec un avocat.

Respecter les WCAG 2.2 AA permet-il aussi de respecter les WCAG 2.1 AA ?

Oui, en pratique. Les WCAG 2.2 conservent tous les critères de succès des WCAG 2.1, à l’exception du 4.1.1 Analyse syntaxique, que le W3C a retiré car obsolète.

Quelle est la taille minimale des cibles dans les WCAG 2.2 ?

Selon le critère 2.5.8, les cibles doivent mesurer au moins 24 × 24 pixels CSS, sauf si un cercle de 24 px centré sur chaque cible plus petite ne touche ni les autres cibles ni leurs cercles. Sont exemptés les liens intégrés dans des phrases, les commandes du navigateur non stylées, les présentations essentielles et les cibles qui disposent d’une commande équivalente conforme.

Un score d’accessibilité Lighthouse de 100 signifie-t-il que ma boutique est conforme ?

Non. Les outils automatisés ne détectent qu’une partie des non-conformités, et WebAIM rappelle que l’absence d’erreurs détectées ne signifie pas qu’une page est accessible ou conforme.

Une connexion par mot de passe échoue-t-elle au critère 3.3.8 ?

Pas en soi. Un champ de mot de passe est conforme lorsque l’on peut y coller du texte et utiliser un gestionnaire de mots de passe ; c’est le blocage du collage ou du remplissage automatique qui fait échouer le critère.

À quelle fréquence faut-il retester ma boutique ?

Retestez après chaque mise à jour du thème, nouvelle application ou modification importante d’un modèle, et contrôlez régulièrement le parcours d’achat, car les applications peuvent injecter du nouveau balisage sans prévenir.

Sources

Tous les guides