La Checklist WCAG 2.2 AA pour les Boutiques Shopify

WCAG 2.2 AA est la version et le niveau de référence pour la quasi-totalité des lois sur l’accessibilité aujourd’hui, et c’est l’objectif que nous recommandons pour toute boutique Shopify. Voici une checklist pratique : les critères de succès qui comptent vraiment, organisés selon les quatre principes POUR, avec pour chacun l’endroit où le problème se situe dans un thème Shopify.

Atteignez le niveau WCAG 2.2 AA une bonne fois pour toutes et vous répondrez du même coup aux anciennes réglementations. Les WCAG 2.2 étant une extension des 2.1, leur conformité satisfait également le standard de la loi ADA (États-Unis), la norme EN 301 549 de l’UE (WCAG 2.1 AA), ainsi que les règles britanniques, canadiennes et australiennes. Un seul travail englobe tout le lot.

Points clés

• Les WCAG 2.2 AA constituent la référence juridique actuelle. S’y conformer permet également de respecter les WCAG 2.1 AA et tous les cadres qui en découlent.
• La conformité de niveau AA implique de respecter tous les critères de succès de niveau A ainsi que tous ceux de niveau AA. Les critères AAA ne sont pas exigés.
• Les WCAG 2.2 ont ajouté 9 critères de succès par rapport aux 2.1 et en ont supprimé un (4.1.1 Analyse/Parsing). Six de ces neuf critères sont de niveau A ou AA.
• Les scanners automatiques ne détectent qu’environ 30 à 40 % des critères. Un test manuel au clavier et un test avec lecteur d’écran sont nécessaires pour couvrir le reste.
• Chaque vraie correction implique une modification du code de votre thème (Liquid, CSS, JavaScript), et non un widget superposé par-dessus.

Pourquoi vous pouvez nous faire confiance

Jacques a plus de 15 ans d’expérience en développement et a aidé de nombreuses marques Shopify à lancer des boutiques rapides et accessibles. Nous évoluons dans l’écosystème Shopify depuis plus de quatre ans et nous avons conçu Fudge, un constructeur et éditeur de boutique IA noté 5.0 sur le Shopify App Store. Fudge détecte les problèmes d’accessibilité dans votre thème et les corrige en code natif. Les numéros et niveaux de critères mentionnés ci-dessous sont tirés directement de la Recommandation officielle W3C WCAG 2.2, de façon rigoureuse.

Cette checklist est le compagnon pratique de notre guide de conformité ADA et WCAG pour Shopify plus vaste. Si vous cherchez la vue d’ensemble du cadre légal plutôt que les critères techniques, commencez par là.

Comment lire cette checklist

Les WCAG comportent trois niveaux de conformité : A (minimum), AA (la cible) et AAA (le plus élevé). Pour revendiquer le niveau WCAG 2.2 AA, vous devez satisfaire chaque critère de niveau A et chaque critère de niveau AA. Les critères AAA sont optionnels et ne font pas partie du standard légal ; nous les signalons donc sans pour autant les exiger.

Les directives sont regroupées sous quatre principes, connus par l’acronyme POUR :

• Perceptible (Perceivable). Les utilisateurs doivent pouvoir percevoir le contenu via l’un de leurs sens.
• Utilisable (Operable). Les utilisateurs peuvent manipuler tous les contrôles.
• Compréhensible (Understandable). Le contenu et le comportement sont prévisibles.
• Robuste (Robust). Les technologies d’assistance peuvent interpréter le markup (HTML).

Chaque section ci-dessous dresse la liste des critères les plus susceptibles de faire défaut sur une boutique Shopify, en y associant le numéro exact, son niveau et comment le corriger dans votre thème.

Quoi de neuf dans les WCAG 2.2

Passées au statut de Recommandation W3C en octobre 2023, les WCAG 2.2 forment la version en vigueur actuelle.¹ Elles conservent tous les éléments de la version 2.1, retirent un critère et ajoutent neuf nouveaux critères de succès. Il est important d’être précis sur leurs niveaux, car seuls les ajouts en A et AA impactent votre objectif de conformité.²

Deux points méritent clarification. Le critère 2.4.13 Apparence du focus est de niveau AAA et non AA, il n’est donc pas requis pour viser l’objectif AA même s’il concerne le focus. Par ailleurs, le critère 4.1.1 Analyse (Parsing) a été retiré dans les WCAG 2.2 : devenu obsolète grâce aux navigateurs modernes qui savent gérer le code HTML mal structuré, vous n’avez plus à le tester.²

Les six nouveaux critères A et AA sont ceux qu’il faut ajouter à votre audit 2.1 existant. Nous les signalons dans les sections POUR ci-dessous.

Perceptible

Tout ce dont un client a besoin pour comprendre la page doit être accessible à la vue, à l’ouïe ou aux technologies d’assistance.

Alternatives textuelles et médias

• 1.1.1 Contenu non textuel (A). Toute image porteuse de sens nécessite une alternative textuelle. Dans Shopify, c’est le champ alt des images de produit, de collection et de toute image ajoutée depuis une section de l’éditeur de thème. Les images décoratives doivent avoir un alt="" vide pour que les lecteurs d’écran les ignorent. Les boutons contenant uniquement une icône (panier, recherche, menu hamburger) doivent eux aussi posséder un nom accessible, ce qui rejoint les critères de la rubrique Utilisable ci-après.
• 1.2.2 Sous-titres (Préenregistrés) (A) et 1.2.5 Audiodescription (Préenregistrée) (AA). Si vous intégrez des vidéos de présentation ou des réels lifestyle, fournissez des sous-titres, et ajoutez des audiodescriptions ou une alternative texte où les visuels apportent des infos non présentes dans l’audio.

Couleur et contraste

• 1.4.1 Utilisation de la couleur (A). Ne vous fiez jamais uniquement à la couleur pour faire passer un message. Un prix promo affiché uniquement en rouge, ou une erreur de formulaire matérialisée juste par une bordure rouge, échouera au test. Ajoutez du texte, une icône ou un soulignement.
• 1.4.3 Contraste (Minimum) (AA). Le texte normal requiert un ratio de contraste d’au moins 4.5:1 avec son arrière-plan ; le grand texte (environ 24px, ou 18.66px en gras) doit être de 3:1. C’est le faux pas le plus courant sur Shopify, généralement lié aux couleurs de la marque exploitées au niveau du texte principal, des boutons ou des placeholders (textes indicatifs). Corrigez ceci depuis les réglages couleurs de votre thème ou en CSS.
• 1.4.11 Contraste des éléments non textuels (AA). Les composants d’interface et graphiques majeurs nécessitent un contraste de 3:1. Pensons aux bordures gris clair des inputs, aux boutons d’ajout au panier juste cerclés (outline) ou à ce ring de focus trop discret pour être vu.

Adaptation de la mise en page

• 1.4.4 Redimensionnement du texte (AA). Le texte doit rester lisible via un zoom à 200 % sans aucune perte de contenu. Évitez de fixer des hauteurs fixes en pixels sur les conteneurs empêchant l’extension du texte.
• 1.4.10 Redistribution (Reflow) (AA). Le contenu doit être redistribué en formant une seule colonne sur un viewport de 320 pixels CSS de large (équivalent au zoom à 400 %) sans scroll horizontal. Dans Shopify, on sanctionne souvent les sticky headers, les larges tableaux et les sections multi-colonnes.
• 1.4.12 Espacement du texte (AA) et 1.4.13 Contenu au survol ou à la prise de focus (AA). Le contenu doit résister sans casse lors de l’accroissement des espaces entre les lettres ou les lignes. Aussi, toute popover qui se déclenche au hover/au focus (méga-menu, infobulle de guide des tailles) doit pouvoir être ignorée, survolée et rester persistante.
• 1.3.5 Identification de l’objectif de la saisie (AA). Les champs de profil collectant les infos classiques (nom, e-mail, adresse au checkout ou en création de compte) doivent renseigner l’attribut autocomplete afin de faciliter le travail des navigateurs et outils d’assistance.

Utilisable

Chaque menu, slider, ou bouton doit répondre au clavier et au toucher, et pas uniquement à la souris.

Accès au clavier

• 2.1.1 Clavier (A) et 2.1.2 Pas de piège au clavier (A). Tout ce que l’on contrôle en souris doit être maniable via clavier, et le focus ne doit jamais se bloquer. Sur une boutique classique, ceci est bafoué par les méga-menus, paniers sous forme de tiroir (cart drawer), modales de vue rapide et galeries d’images customisés à grand renfort de JavaScript mais délaissant le clavier. À l’aide de Tab et d’Entrée, le client doit pouvoir ouvrir son panier coulissant, le consulter en profondeur et le refermer sans pépins.
• 2.4.1 Éviter les blocs (A). Proposez un ‘skip link’ (lien d’évitement) pour que l’utilisateur au clavier ignore le header complexe pour filer vers le cœur de page. Le thème Dawn ou la majorité des thèmes du store en ont un natif ; les boutiques surchargées le perdent régulièrement.

Visibilité du focus

• 2.4.7 Focus visible (AA). L’élément actif recevant le focus clavier doit s’orner d’un indicateur de focus décelable. Les thèmes pêchent très souvent sur ce point via une directive globale outline: none en CSS retirant ces indicateurs. Ôtez-la ou remplacez-la par une mise en forme personnalisée qui soit flagrante.
• 2.4.11 Focus non masqué (Minimum) (AA). Nouveau avec les 2.2. Lorsqu’un élément accueille le focus, il ne doit en aucun cas être occulté par un élément superposé. Les coupables sont souvent les sticky headers (en-têtes collants), les bannières de cookies et les widgets de chat qui flottent et couvrent des champs clés lors d’une navigation à la touche Tab.

Pointeur, tactile et taille de la cible

• 2.5.7 Mouvements de glissement (AA). Nouveau en 2.2. Toute manœuvre articulée autour d’un glissement/swipe requiert une alternative fonctionnant au pointeur unique (sans drag/drag-and-drop). Si le thème intègre un slider d’image manœuvré au doigt, assurez-vous qu’un clic/tap ou que des boutons sont là en substitution.
• 2.5.8 Taille de la cible (Minimum) (AA). Nouveau en 2.2. Les cibles du doigt tactile (boutons) nécessitent au moins 24 par 24 pixels CSS, ou devront s’entourer d’assez d’espace afin de ne pas risquer l’erreur de clic. Les petits menus embouteillés sur mobile, les steppers pour ajouter une quantité, les swatches serrés et les icônes de footer riquiqui enfreignent bien trop souvent la règle sur Shopify.
• 2.5.3 Étiquette dans le nom (A). Le nom accessible d’un raccourci d’action doit contenir le texte du libellé visible pour faire réagir le micro des utilisateurs vocalisant “Ajouter au panier”.

Compréhensible

L’internaute doit déduire aisément l’utilité des éléments d’action et, le cas échéant, retomber sur ses pattes après une bévue de manipulation.

Langue et prévisibilité

• 3.1.1 Langue de la page (A). Renseignez l’attribut lang de page (ex : <html lang="fr">) pour prémunir les lecteurs d’écran de bafouillages absurdes. Le critère 3.1.2 Langue des parties (AA) identifie la portion ponctuelle parlant une langue différente (essentiel sur les stores multilingues).
• 3.2.3 Navigation cohérente (AA) et 3.2.4 Identification cohérente (AA). Maintenez à plat l’interface de navigation, le header et les pictogrammes sans modifier leurs libellés au fil des pages de section. Rebaptiser l’icône de panier « Caddie » sur l’accueil puis « Sac » ailleurs crée une confusion.
• 3.2.6 Aide cohérente (A). Nouveau aux 2.2. Si un lien vers une page ou popover de support est offert, installez-le à une adresse cohérente quelle que soit la maquette déroulée, de manière prévisible.

Formulaires, labels et erreurs

• 3.3.2 Étiquettes ou instructions (A). Tout champ d’input demande un <label> clair. Un placeholder n’agit aucunement comme un véritable label. L’oubli cible la newsletter, la page de contact, l’input de recherche et les sélecteurs de quantité/de variantes (swatches) bien souvent. Un label resté masqué pour qui voit l’écran, mais présent aux yeux du lecteur, suffit amplement.
• 3.3.1 Identification des erreurs (A) et 3.3.3 Suggestion de correction des erreurs (AA). Quand le formulaire grince car ignoré ou corrompu, indiquez en texte brut l’erratum et soufflez comment y remédier. L’indication en couleurs seules (la case devient rouge) ne suffit plus.
• 3.3.7 Saisie redondante (A). Nouveau aux 2.2. Évitez aux visiteurs de ressaisir ce qu’ils ont déjà formulé ou configuré il y a peu. Dans le tunnel de checkout, cocher l’idée d’une « adresse de facturation similaire à celle pour la livraison » reste idoine.
• 3.3.8 Authentification accessible (Minimum) (AA). Nouveau aux 2.2. Ne figez pas la tentative de login par une exigence cognitive trop ardue (copier le texte d’un visuel). Si l’on barricade avec un CAPTCHA, offrez impérativement une pirouette de ralliement comme les mots de passe standards ou les magic links envoyés sur boîte mail.

Robuste

La charpente de balises doit offrir une lecture limpide et robuste par le biais d’un logiciel d’assistance.

• 4.1.2 Nom, rôle et valeur (A). Les éléments d’UI façonnés “custom” imposent un rôle à justifier. Pour qu’une <div> fasse le travail de bouton, un attribut role="button" s’impose, adossé aux déclics de clavier. S’il s’agit d’un accordéon : un aria-expanded. Quitte au possible à enrôler les éléments basiques natifs (<button>, <a>, <select>) plutôt que de réinventer la roue.
• 4.1.3 Messages de statut (AA). Lorsqu’un événement s’affiche furtivement en coin d’écran, du type : « Ajouté avec succès ! » mais dont l’œil perd la mire, un lecteur d’écran doit au moins murmurer la réussite, par l’entremise de balises cachées exploitant les ARIA live regions.
• Note : L’analyse 4.1.1 (Parsing) est évacuée du cadre 2.2. Ainsi un attribut id en redite accidentelle ou une imbrication un peu lâche n’échoue plus ici (mais peut encore perturber d’autres tests).

La checklist rapide

Servez-vous de ceci pour une vérification rapide. Chaque ligne donne le critère de succès, le niveau et le type de page Shopify coutumier du fait. Les lignes annotées Nouveau de 2.2 rejoignent votre review sur fond WCAG 2.1.

Les outils automatisés ne font qu’une partie du travail

Un scanner s’avère redoutable pour balayer l’ouvrage en première intention. C’est la méthode expéditive pour faire mordre la poussière aux oublis (contraste, alternance alt, labels manquants). Toutefois, l’automatisation capte à la louche 30 à 40 % des critères. Aucune machine ne décrétera ce que rend un alt comme information judicieuse, si les ordres logiques de sauts de claviers tiennent la route, ou si un lecteur d’écran peut dérouler ses actions jusqu’à la fin de la page panier en un seul souffle.

Le réel audit implique une approche scindée :

1. Un scan automatisé. Convoquez les outils gratuits du type axe DevTools, WAVE ou Lighthouse contre vos interfaces reines (accueil, catégorie détaillée, fiche produit et panier).
2. Des tests manuels. Naviguez de l’étalage jusqu’au tunnel de commande les mains menottées au clavier de frappe (Tab, Maj+Tab, Entrée). Répétez le processus muni d’un logiciel de lecture d’écran (VoiceOver sur Mac ou gratuit sur Windows depuis NVDA). Achevez le test par un grossissement 200 %, une redistribution vers une zone 320 pixels de marge pour garantir qu’aucune structure ne casse l’affichage.

Pour un survol détaillé des couacs fréquents et comment nettoyer le bois mort, visitez notre guide sur la correction des défauts récurrents d’accessibilité Shopify.

Corriger ce que vous trouvez, de la bonne manière

Chaque réparation viable débouche inévitablement sur une retouche directe de votre propre architecture de thème. Ce détail exclut les extensions de pansement rapide. Une surcouche externe (overlay) ne peut pas corriger durablement les ratés d’un lecteur au cœur des balises alt, étalonner correctement l’ordre des focus au clavier ou rendre un menu opérable sans mal à la volée. C’est un rafistolage calqué au-dessus de portions HTML qui continuent d’échouer. Ce n’est pas pour rien que les entreprises se font poursuivre en justice et que les autorités pénalisent les promesses sans lendemain des overlays. Nous couvrons ce sujet précis sur l’échec des overlays d’accessibilité, et l’angle de base pour la plateforme dans Shopify est-il conforme à l’ADA ?

Les correctifs concrets se logent au niveau des dossiers Liquid, CSS et JavaScript :

• Fournir de vrais alt significatifs ou des vides alt="" quand c’est trivial.
• Donner un nom à l’intégralité des boutons illustrés sans légende.
• Associer rigoureusement les labels <label> en dur aux entrées requises.
• Sublimer les taux de contraste vers de vrais ratios 4.5:1 et 3:1.
• Restaurer le repérage de prise de visée focus clavier.
• Élargir les pastilles interactives vers 24px de seuil minimum et ajouter des interfaces fonctionnant sans glissement.
• Placer la bonne langue depuis le paramètre lang.

C’est très exactement ici qu’un éditeur dopé à l’IA gagne de la hauteur. Fudge décode la trame en temps réel, remonte et diagnostique les nœuds fatals, pour finalement en souder la parade depuis la moelle (Liquid, CSS, JavaScript) et pérenniser la correctrice mise à jour dans ce même thème. Le travail de rustine cède la place à un vrai remaniement structurel comparable à un chirurgien, n’encombrant pas la vitrine par de vastes appels externes lourdement figeant la vitesse page. Il marche en synergie vers une optimisation comme ajouter des données structurées avec de larges efforts sur l’édition de boutique.

Le modèle prôné, et autour duquel nous avons dessiné la mécanique de Fudge, se fait ainsi en trois étagements : détecter ce qui doit être corrigé, le corriger à la source native et surveiller par la suite afin qu’un éditeur futur égaré n’importune un paramètre. Si l’UE entre en lice, relevez que l’étape des cotes 2.2 AA embrasse également les obligations de l’Acte Européen sur l’Accessibilité (European Accessibility Act), rattaché de longue main à la référence des versions antérieures WCAG 2.1 AA.

FAQ

Articles similaires

L'état des performances Shopify en 2026

20 Jul 2026

Corrigez les 6 erreurs d'accessibilité les plus fréquentes sur votre thème Shopify

18 Jul 2026

Le Guide Complet de l'Extensibilité du Checkout Shopify

16 Jul 2026