Guide · Shopify
Accessibilité Shopify : la checklist pratique en 25 points
Dernière mise à jour
Information générale, pas un conseil juridique. Pour votre situation, consultez un avocat.
Cette checklist rassemble les points à vérifier sur une boutique Shopify, du thème au paiement. Pour chaque point, elle indique où agir dans Shopify, comment vérifier et le critère WCAG 2.1 concerné. Elle ne remplace pas un audit complet, mais elle couvre les obstacles les plus fréquents. Pour le cadre légal en France (article L. 412-13 du Code de la consommation, dispense des microentreprises, rôle de la DGCCRF), voyez notre guide Ce que l’EAA signifie pour les boutiques Shopify en France.
L’essentiel
- La référence pour le web est la norme EN 301 549 V3.2.1, soit les WCAG 2.1 niveau AA.
- Sur les pages d’accueil Shopify en .fr que nous avons analysées, les problèmes les plus fréquents sont le contraste, les liens sans nom et les images sans texte alternatif.
- Beaucoup de corrections se font sans code : couleurs du thème, textes alternatifs, libellés.
- Les applications tierces font partie de votre boutique : testez-les aussi.
- Notez la date de chaque test et de chaque correction.
Ce que montrent les données sur les boutiques en .fr
Dans notre étude sur 5 463 pages d’accueil Shopify de l’UE (en anglais), 608 pages d’accueil en .fr ont été analysées. 94,4 % échouent à au moins un test automatique WCAG 2.1 A/AA. Les problèmes les plus fréquents : contraste des couleurs insuffisant (71,9 %), liens sans nom accessible (56,6 %), images sans texte alternatif (39,3 %), titres dans le désordre (31,1 %), boutons sans nom (19,9 %) et zoom bloqué (17,1 %). Limites : données du crawl HTTP Archive du 1er septembre 2026, version mobile, pages d’accueil seulement, tests automatiques seulement. Les pages produit, le panier et le paiement n’y figurent pas, et les tests automatiques ne trouvent qu’une partie des obstacles.
1. Thème et couleurs
Les couleurs se règlent dans l’éditeur de thème, sous Paramètres du thème > Couleurs. Selon le thème, il s’agit de combinaisons de couleurs ou, dans Horizon 4.0.0 et versions ultérieures, de palettes de couleurs (aide Shopify). Les seuils ci-dessous sont ceux que Shopify rappelle dans sa page Accessibilité des thèmes.
| Point | Où dans Shopify | Comment vérifier | Critère WCAG |
|---|---|---|---|
| 1. Contraste du texte : 4,5:1, ou 3:1 pour les grands textes | Paramètres du thème > Couleurs ; couleurs propres aux sections | Mesurez texte, boutons, prix barrés et textes sur images avec un outil de contraste | 1.4.3 Contraste (minimum) |
| 2. Contraste des bordures de champs et des icônes : 3:1 | Paramètres du thème > Couleurs | Regardez les champs de recherche, de newsletter et les icônes du panier | 1.4.11 Contraste du contenu non textuel |
| 3. Information jamais transmise par la couleur seule | Badges « promo », « épuisé », pastilles de variantes | Affichez la page en niveaux de gris : l’information reste-t-elle claire ? | 1.4.1 Utilisation de la couleur |
| 4. Zoom autorisé, contenu lisible à 200 % | Fichier layout/theme.liquid (balise viewport) | Zoomez sur mobile ; vérifiez que la balise ne contient pas user-scalable=no ni maximum-scale=1 | 1.4.4 Redimensionnement du texte ; 1.4.10 Redistribution |
| 5. Titres dans l’ordre, sans saut de niveau | Éditeur de texte enrichi des pages et des produits ; sections du thème | Listez les titres avec une extension de navigateur ou un lecteur d’écran | 1.3.1 Information et relations |
| 6. Diaporamas et vidéos qui ne défilent pas sans contrôle | Paramètres de la section diaporama ou vidéo | Si la rotation est automatique, un bouton pause doit exister et fonctionner au clavier | 2.2.2 Mettre en pause, arrêter, masquer |
Dans le thème Dawn, la balise viewport du fichier theme.liquid n’empêche pas le zoom, et le diaporama affiche un bouton pause quand la rotation automatique est activée. Si votre thème est dérivé d’un autre ou modifié par une agence, vérifiez ces deux points directement.
2. Images et médias
| Point | Où dans Shopify | Comment vérifier | Critère WCAG |
|---|---|---|---|
| 7. Texte alternatif sur chaque image produit | Produits > produit > cliquer sur le média > Ajouter un texte alternatif | Le texte décrit ce qui distingue l’image (couleur, angle, détail), pas seulement le nom du produit | 1.1.1 Contenu non textuel |
| 8. Textes alternatifs en masse | Export CSV des produits, colonne Image alt text | Filtrez les cellules vides avant de réimporter | 1.1.1 |
| 9. Images des sections (bannières, collections) | Éditeur de thème, réglages du bloc image | Le texte écrit dans l’image est repris en texte réel ou dans le texte alternatif | 1.1.1 ; 1.4.3 |
| 10. Logo et liens image nommés | Paramètres du thème > Logo ; menus avec icônes | Le lien du logo annonce le nom de la boutique au lecteur d’écran | 1.1.1 ; 2.4.4 |
| 11. Vidéos sous-titrées, sans son au démarrage | Sections vidéo ; plateforme d’hébergement | Sous-titres présents ; transcription pour les vidéos parlées | 1.2.2 Sous-titres (pré-enregistrés) |
Selon l’aide Shopify, le texte alternatif peut compter jusqu’à 512 caractères, mais 125 au plus sont recommandés. L’éditeur de supports multimédias peut suggérer un texte : relisez-le avant de l’accepter. La colonne Image alt text est décrite dans la page fichiers CSV de produits.
3. Navigation et clavier
Débranchez la souris et parcourez la boutique avec Tab, Maj+Tab, Entrée, Espace et Échap.
| Point | Où dans Shopify | Comment vérifier | Critère WCAG |
|---|---|---|---|
| 12. Lien d’évitement vers le contenu | Fichier layout/theme.liquid | Premier Tab sur la page : un lien « passer au contenu » apparaît | 2.4.1 Contourner des blocs |
| 13. Menus, méga-menus et filtres utilisables au clavier | Section en-tête ; filtres de collection | Ouvrez chaque sous-menu et appliquez un filtre sans souris | 2.1.1 Clavier |
| 14. Pas de piège dans les fenêtres et tiroirs | Panier en tiroir, recherche, pop-ups | Échap ferme la fenêtre et le focus revient au bouton d’origine | 2.1.2 Pas de piège au clavier ; 2.4.3 Parcours du focus |
| 15. Focus toujours visible | CSS du thème ou CSS personnalisé | Chaque lien, bouton et champ montre un contour net quand il a le focus | 2.4.7 Visibilité du focus |
| 16. Liens et boutons à icône nommés | Icônes panier, compte, recherche, réseaux sociaux, flèches de carrousel | Un lecteur d’écran annonce un nom compréhensible, pas « lien » ou « bouton » seul | 2.4.4 Fonction du lien ; 4.1.2 Nom, rôle et valeur |
| 17. Langue de la page déclarée | Fichier layout/theme.liquid (attribut lang de la balise html) | Le code source contient lang="fr" sur la version française de la boutique | 3.1.1 Langue de la page |
Dawn contient un lien d’évitement (« Ignorer et passer au contenu » dans sa traduction française). Shopify rappelle aussi de ne jamais supprimer le style de focus en modifiant la feuille de style du thème.
4. Formulaires, panier et paiement
| Point | Où dans Shopify | Comment vérifier | Critère WCAG |
|---|---|---|---|
| 18. Chaque champ a une étiquette | Newsletter, recherche, contact, sélecteurs de variante et de quantité | Le lecteur d’écran annonce l’étiquette ; un texte indicatif seul ne suffit pas | 3.3.2 Étiquettes ou instructions |
| 19. Erreurs signalées en texte | Formulaires du thème et des applications | Envoyez un formulaire vide : l’erreur est décrite en mots, pas seulement en rouge | 3.3.1 Identification des erreurs |
| 20. Ajout au panier annoncé | Bouton d’ajout, panier en tiroir | Le lecteur d’écran annonce l’ajout sans déplacer le focus de façon inattendue | 4.1.3 Messages d’état |
| 21. Achat complet de bout en bout | Produit, panier, paiement | Passez une commande test au clavier puis avec un lecteur d’écran (VoiceOver, NVDA) | 2.1.1 ; 4.1.2 |
Le paiement est fourni par Shopify, mais l’arrêté du 9 octobre 2023 demande des fonctions de paiement accessibles : testez-le comme vos clients l’utilisent et notez ce que vous pouvez modifier et ce que vous ne pouvez pas.
5. Applications tierces
| Point | Où dans Shopify | Comment vérifier | Critère WCAG |
|---|---|---|---|
| 22. Bandeau de cookies utilisable | Application de consentement ; éditeur de thème (blocs d’application) | Le bandeau reçoit le focus, ses boutons sont nommés et contrastés, Échap ou un bouton le ferme | 2.1.1 ; 1.4.3 ; 4.1.2 |
| 23. Avis, chat, pop-ups promotionnels | Applications installées | Testez chaque widget au clavier ; signalez les obstacles à l’éditeur, avec la date | 2.1.1 ; 2.1.2 ; 4.1.2 |
Pour savoir ce que les applications chargent sur votre page d’accueil, vous pouvez lancer la vérification gratuite : elle indique les obstacles détectés automatiquement et leur critère WCAG.
6. Informations d’accessibilité et suivi daté
| Point | Où dans Shopify | Comment vérifier | Référence |
|---|---|---|---|
| 24. Informations sur l’accessibilité publiées | Boutique en ligne > Pages ; Contenu > Menus (pied de page) ; CGV | La page décrit le service, la norme, les tests, les obstacles connus et un contact | Code de la consommation, art. D. 412-57 |
| 25. Tests et corrections datés | Hors Shopify : dossier ou outil de suivi | Pour chaque test : date, pages, méthode, résultats, corrections | Bonne pratique |
Pour le contenu de la page d’informations et un modèle, voyez notre guide Déclaration d’accessibilité d’une boutique en ligne. Refaites la checklist après chaque changement de thème, l’installation d’une application ou une refonte de page.
Les limites d’une checklist
Une checklist aide à ne rien oublier, mais elle ne remplace pas un test avec des personnes qui utilisent un lecteur d’écran, une loupe ou la commande vocale. Les outils automatiques ne voient qu’une partie des obstacles : lors d’un test du gouvernement britannique, dix outils réunis ont trouvé 71 % de 143 obstacles, le meilleur outil seul 41 %. Les widgets ajoutés par-dessus le site ne corrigent pas le code du thème.
Comment Testamur aide
Testamur est une application Shopify en développement. La vérification gratuite est déjà disponible et couvre la partie automatique de cette checklist. L’application conservera un historique daté des tests, des corrections et des versions de vos informations sur l’accessibilité, et proposera des corrections dans le code du thème. Elle n’ajoute aucun widget à votre boutique et ne remplace pas les tests manuels.
Sources
- Aide Shopify : accessibilité des thèmes
- Aide Shopify : paramètres du thème
- Aide Shopify : ajout de texte alternatif aux supports multimédias
- Aide Shopify : fichiers CSV de produits
- Shopify : code source du thème Dawn (GitHub)
- W3C : WCAG 2.1, traduction française
- Arrêté du 9 octobre 2023 fixant les exigences en matière d’accessibilité (Légifrance)
- Décret n° 2023-931 du 9 octobre 2023 : article D. 412-57 (Légifrance)
Vérifiez votre boutique gratuitement
Découvrez les obstacles qu’une vérification automatique trouve sur votre propre boutique Shopify : la page d’accueil et, si votre robots.txt le permet, des pages de collection, de produit et légales, rattachés aux WCAG et à la norme EN 301 549. Gratuit, résultat par e-mail. Les tests automatiques ne détectent qu’une partie des obstacles.
Vérifier ma boutique gratuitementQuestions fréquentes
Un thème Shopify gratuit suffit-il pour une boutique accessible ?
Un thème bien construit est un bon point de départ, mais l’accessibilité dépend aussi de vos couleurs, de vos images, de vos textes et des applications installées. Shopify précise lui-même que suivre ses conseils pour les thèmes ne suffit pas à rendre une boutique accessible. Il faut donc vérifier la boutique telle qu’elle est configurée.
Quel niveau WCAG viser pour une boutique en ligne ?
La référence technique est la norme européenne EN 301 549. Sa version V3.2.1 intègre les WCAG 2.1 niveau AA pour les contenus web. La version V4.1.1, qui intègre les WCAG 2.2, a été publiée en septembre 2026 mais n’est pas encore la référence juridique.
Un audit automatique suffit-il ?
Non. Les outils automatiques détectent une partie des obstacles seulement : contrastes, textes alternatifs manquants, liens sans nom. L’ordre du focus, la qualité d’un texte alternatif ou un parcours de paiement au lecteur d’écran demandent des tests manuels.
Comment ajouter des textes alternatifs à beaucoup d’images à la fois ?
Exportez vos produits en CSV, remplissez la colonne Image alt text puis réimportez le fichier. Shopify recommande des textes brefs et descriptifs, de 125 caractères au plus de préférence.
Que faire si un obstacle vient d’une application ?
Signalez-le à l’éditeur de l’application avec une description précise et une capture, notez la date, et cherchez une alternative si rien ne bouge. Mentionnez l’obstacle dans vos informations sur l’accessibilité tant qu’il n’est pas corrigé.