La Checklist WCAG 2.2 AA pour les Boutiques Shopify

L’essentiel

• Le WCAG 2.2 AA est la norme actuelle du W3C. S’y conformer satisfait également le WCAG 2.1 AA, le niveau que la plupart des lois citent.
• La conformité au niveau AA signifie respecter chaque critère de succès de niveau A et de niveau AA. Les critères AAA ne sont pas requis.
• Le WCAG 2.2 a ajouté 9 critères de succès par rapport au 2.1 et en a supprimé un (4.1.1 Analyse). Six des neuf 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 passage au lecteur d’écran sont nécessaires pour combler le reste.
• Chaque véritable correctif implique une modification du code de votre thème ou de votre contenu, pas un widget ajouté par-dessus.

Le WCAG 2.2 AA est la norme actuelle du W3C et la cible que nous recommandons pour toute boutique Shopify. La plupart des lois sur l’accessibilité font encore référence au WCAG 2.1 AA, que le 2.2 AA satisfait également. Voici une checklist pratique : les critères de succès importants, organisés selon les quatre principes POUR, chacun associé à l’endroit où le problème se trouve réellement dans un thème Shopify.

Conformez-vous au WCAG 2.2 AA une seule fois et vous respecterez les anciennes réglementations par la même occasion. Le WCAG 2.2 est une extension du 2.1, donc l’atteindre permet aussi de respecter la norme de l’ADA aux États-Unis, la norme EN 301 549 de l’UE (WCAG 2.1 AA), et les règles britanniques, canadiennes et australiennes. Un seul travail couvre tout ça.

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 en ligne accessibles et rapides. Nous sommes présents dans l’écosystème Shopify depuis plus de quatre ans et nous développons Fudge, l’opérateur IA pour les boutiques Shopify, qui a une note de 4.9 sur le Shopify App Store. À la demande, Fudge audite un thème pour détecter les problèmes d’accessibilité et les corrige en code natif. Les numéros et niveaux de critères ci-dessous sont tirés directement de la recommandation officielle WCAG 2.2 du W3C, et non de mémoire.

Cette checklist est le compagnon pratique de notre guide de conformité ADA et WCAG pour Shopify plus vaste. Si vous voulez l’aspect juridique plutôt que les critères, commencez par là, ou consultez notre guide sur la conformité ADA des sites web pour le contexte juridique américain en particulier.

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

Les WCAG 2.2 sont devenues une recommandation du W3C en octobre 2023 et constituent la version actuelle.¹ Elles ont conservé tout ce qui se trouvait dans la 2.1 et ont ajouté neuf nouveaux critères de succès, tout en en supprimant un. Être précis sur leurs niveaux est important, car seuls les ajouts de niveau A et AA affectent votre objectif de conformité.²

Deux points importants à retenir. Le critère 2.4.13 Apparence du focus est de niveau AAA, et non AA, il n’est donc pas requis pour la conformité AA même s’il concerne le focus. Et le critère 4.1.1 Analyse a été supprimé dans les WCAG 2.2 : il est obsolète, car les navigateurs modernes gèrent très bien le code mal formé qu’il ciblait, vous n’avez donc plus besoin de le tester.²

Les six nouveaux critères A et AA sont ceux qu’il faut ajouter à votre audit 2.1 existant. Nous les détaillons dans leurs 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, il s’agit du champ alt sur les images de produits, de collections et toute image ajoutée via une section ou l’éditeur de thème. Les images décoratives doivent avoir un alt="" vide pour que les lecteurs d’écran les ignorent. Les commandes uniquement constituées d’icônes (panier, recherche, menu hamburger) ont également besoin d’un nom accessible, ce qui recoupe les critères du principe Utilisable ci-dessous.
• 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 produits ou un « lifestyle reel » (vidéo d’ambiance), fournissez des sous-titres, ainsi qu’une audiodescription ou une alternative textuelle lorsque les visuels véhiculent des informations absentes de la piste audio.

Pour les images de produits en particulier, notre audit gratuit des données de catalogue Shopify analyse la couverture du texte alternatif sur l’ensemble de votre catalogue, ce qui vous permet de voir l’ampleur de l’écart vis-à-vis du critère 1.1.1 avant de commencer à rédiger.

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 qui est utilisable à la souris doit fonctionner au clavier, et le focus ne doit jamais rester coincé. Sur Shopify, les erreurs habituelles concernent les méga-menus, les tiroirs de panier, les modales d’aperçu rapide et les galeries d’images personnalisés, construits avec du JavaScript qui ignore le clavier. Un client utilisant les touches Tab et Entrée doit pouvoir ouvrir le tiroir du panier, y naviguer et le fermer.
• 2.4.1 Contourner les blocs (A). Fournissez un lien d’évitement (skip link) pour que les utilisateurs au clavier puissent passer l’en-tête et accéder directement au contenu principal. Horizon, Dawn et la plupart des thèmes du Theme Store en intègrent un ; les thèmes fortement personnalisés le perdent parfois.

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

Utilisez ceci pour une vérification rapide. Chaque ligne correspond à un critère, son niveau et la zone Shopify où il échoue généralement. Les lignes marquées Nouveau en 2.2 sont celles à ajouter à une évaluation WCAG 2.1 existante. Cela couvre les critères les plus susceptibles de faire défaut sur une boutique Shopify ; le WCAG 2.2 AA compte 55 critères A et AA au total (voir le guide de référence rapide du W3C).

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

Un scanner est une bonne première étape, et c’est le moyen le plus rapide de repérer les problèmes de contraste, les textes alt manquants et les labels manquants. Mais les outils automatisés ne détectent qu’environ 30 à 40 % des critères de succès des WCAG. Une machine ne peut pas juger si un texte alt est pertinent, si l’ordre de navigation au clavier est logique, ou si un lecteur d’écran peut réellement finaliser un checkout.

Un vrai audit comporte donc deux étapes :

1. Scan automatisé. Lancez un outil gratuit comme axe DevTools, WAVE ou Lighthouse sur vos templates clés (accueil, collection, produit, panier et une page de contenu).
2. Vérifications manuelles. Naviguez sur tout le parcours, de la page produit à la fin du checkout, en utilisant uniquement le clavier (Tab, Maj+Tab, Entrée). Puis répétez l’opération avec un lecteur d’écran (VoiceOver sur Mac, l’outil gratuit NVDA sur Windows). Enfin, zoomez à 200 % et passez en reflow à 320px pour confirmer que rien ne se coupe ou ne se chevauche.

Pour un aperçu des erreurs les plus fréquentes et comment les corriger, consultez notre guide sur la résolution des problèmes d’accessibilité courants sur Shopify.

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

Chaque correctif durable de cette checklist implique une modification du code de votre thème ou de votre contenu. C’est aussi ce que les surcouches (overlays) d’accessibilité ignorent. Un widget superposé sur la page ne peut pas réécrire votre texte alt, ajouter un <label> au champ de recherche, agrandir une cible tactile ou rendre le tiroir du panier utilisable au clavier. Il repose sur le même HTML défaillant, ce qui explique pourquoi les sites qui en utilisent un continuent d’être poursuivis en justice et, en avril 2025, la FTC a finalisé une ordonnance obligeant le fournisseur de surcouches accessiBe à payer 1 million de dollars pour avoir affirmé le contraire. Nous couvrons toute l’affaire dans notre guide sur pourquoi les surcouches d’accessibilité échouent, et la question au niveau de la plateforme dans Shopify est-il conforme à l’ADA ?

La plupart des correctifs sont des modifications concrètes en Liquid, CSS et JavaScript :

• Ajoutez un texte alt descriptif et alt="" vide pour les images décoratives.
• Donnez un nom accessible à chaque bouton et lien qui ne contient qu’une icône.
• Associez chaque champ de saisie (input) à un <label>.
• Augmentez le contraste des textes et des composants à 4.5:1 et 3:1.
• Restaurez les états de focus visibles et un ordre de tabulation logique.
• Agrandissez les cibles tactiles à au moins 24px et ajoutez des alternatives au glisser-déposer (drag).
• Définissez le bon attribut lang pour chaque région.

C’est là que Fudge, l’opérateur IA pour les boutiques Shopify, intervient. Demandez-lui un audit d’accessibilité et il lira votre thème en direct, signalera les critères défaillants dans votre code et préparera les correctifs directement en Liquid, CSS et JavaScript natifs. Rien n’est mis en ligne tant que votre équipe n’a pas prévisualisé et approuvé chaque modification. Puisque le résultat est du vrai code plutôt qu’une couche injectée, cela tient la route comme le ferait un correctif de développeur, sans script supplémentaire ralentissant la page. Cela se marie naturellement avec des tâches connexes comme l’ajout de données structurées et les modifications de boutique en général.

Le modèle que nous recommandons, et celui suivi par Fudge, se fait en trois étapes : identifier ce qui doit être corrigé, le corriger à la source, et relancer l’audit après des modifications de thème et de contenu (Fudge le lance quand vous le demandez ou selon un calendrier défini) afin qu’une future modification ne réintroduise pas silencieusement une erreur. Si vous vendez également dans l’UE, ce même travail sur le 2.2 AA couvre la Loi européenne sur l’accessibilité, qui fait référence à l’ancienne norme WCAG 2.1 AA.

FAQ