Audit d'accessibilité RGAA pour Shopify
Pourquoi Shopify pose des problèmes d'accessibilité
Shopify est devenu le CMS e-commerce de référence, mais ses thèmes Liquid et ses applications tierces posent des problèmes d'accessibilité systématiques. Les templates Liquid génèrent du HTML qui manque de balises sémantiques : les fiches produits n'utilisent pas la balise article, les listes de produits ne sont pas des listes HTML, les zones de navigation ne sont pas encadrées par des balises nav. Le panier latéral (cart drawer) s'ouvre sans déplacer le focus, créant un piège de navigation pour les utilisateurs de clavier. Les filtres de collection reposent sur des composants JavaScript personnalisés sans attributs ARIA. Les boutons d'action (ajouter au panier, supprimer, favoris) utilisent des icônes SVG sans aria-label. Les applications tierces (reviews, upsell, pop-ups) injectent du code sans aucune considération pour l'accessibilité. L'European Accessibility Act cible explicitement les services de commerce électronique : chaque boutique Shopify doit garantir un parcours d'achat accessible sous peine de sanctions.
Problèmes fréquents sur Shopify
Panier latéral sans gestion de focus
RGAA 7.3Le cart drawer de Shopify s'ouvre en superposition mais ne déplace pas le focus clavier vers le panneau. L'utilisateur peut tabuler derrière le panneau, sur des éléments invisibles. À la fermeture, le focus n'est pas restauré sur le bouton déclencheur. Les utilisateurs de clavier et de lecteurs d'écran perdent complètement leur repère dans la page.
Filtres de collection sans attributs ARIA
RGAA 7.1Les filtres par prix, taille, couleur ou marque utilisent des composants JavaScript personnalisés (accordéons, sliders, checkboxes custom) sans les attributs ARIA requis : aria-expanded pour les groupes de filtres, aria-selected pour les options actives, role approprié pour les widgets. Les lecteurs d'écran ne peuvent pas identifier l'état des filtres ni interagir avec eux.
Boutons d'action avec icônes sans label accessible
RGAA 6.2Les boutons 'Ajouter au panier', 'Retirer', 'Favoris' et 'Comparer' utilisent des icônes SVG sans texte alternatif ni aria-label. Les lecteurs d'écran annoncent 'bouton' sans préciser l'action. Sur les pages de listing, des dizaines de boutons identiques sont annoncés comme 'bouton, bouton, bouton', rendant la page totalement inutilisable.
Images produits sans alternative textuelle descriptive
RGAA 1.1Les photos de produits Shopify n'ont pas d'attribut alt descriptif. Shopify permet de renseigner un alt text dans l'interface d'administration, mais les marchands ne le font que rarement. Les lecteurs d'écran annoncent 'image' sans contexte, ou le nom de fichier technique (black-tshirt-front-view-2.png), privant les utilisateurs non-voyants de toute information sur le produit.
Testez votre site Shopify
Découvrez les non-conformités RGAA de votre site Shopify en 5 minutes. Gratuit, sans engagement.
Lancer l'audit gratuitCe que Scrutia détecte sur Shopify
Scrutia parcourt votre boutique Shopify et teste le rendu HTML généré par vos templates Liquid. Notre moteur simule un parcours d'achat complet au clavier : navigation dans les collections, ouverture des fiches produits, ajout au panier, interaction avec le cart drawer. Nous détectons les pièges de focus, les boutons sans label, les filtres inaccessibles et les images sans alt. Chaque problème est associé au critère RGAA concerné et accompagné du code correctif Liquid/HTML/JS à appliquer dans votre thème.
Questions fréquentes — Shopify
Scrutia teste-t-il les applications tierces installées sur ma boutique Shopify ?
Les corrections fournies sont-elles compatibles avec les thèmes Shopify 2.0 ?
Le checkout Shopify est-il testé ?
Auditer d'autres technologies
Auditez votre site Shopify maintenant
106 critères RGAA testés en 5 minutes. Score gratuit, rapport complet multi-pages avec corrections de code à partir de 149€.
Tester mon site Shopify