Audit accessibilité Shopify : RGAA 4.1.2 et EAA en 30 secondes
Depuis le 28 juin 2025, l'European Accessibility Act s'applique au e-commerce B2C en UE. Une boutique Shopify doit donc atteindre WCAG 2.1 AA, et pour les marchands français, viser également le RGAA 4.1.2. Ce guide couvre les thèmes, les apps réellement utiles et le tunnel d'achat.
Shopify, RGAA et European Accessibility Act
Depuis le 28 juin 2025, l'European Accessibility Act (directive UE 2019/882) s'applique au e-commerce B2C en UE. Les marchands qui dépassent les seuils (CA supérieur à 2 millions d'euros ou plus de 10 salariés) doivent rendre leur boutique conforme WCAG 2.1 AA. Pour les marchands français, viser le RGAA 4.1.2 couvre l'essentiel des exigences EAA, avec en plus la déclaration d'accessibilité au modèle DINUM. Shopify publie un VPAT pour son thème Dawn, mais la conformité reste à valider après personnalisation et installation d'apps.
28 juin 2025
Entrée en vigueur EAA
2.1 AA (VPAT publié)
Cible WCAG du thème Dawn
106
Critères RGAA 4.1.2
En Bref : L'essentiel à retenir
- Framework : Shopify nécessite une attention particulière à la sémantique HTML.
- Point Critique : Gestion du focus lors de la navigation dynamique.
- Outil Recommandé : Thème Dawn (gratuit).
- Critères RGAA clés : 1.1, 7.1, 10.7.
Thèmes et écosystèmes Shopify
| Version | Support | Fonctionnalités A11y |
|---|---|---|
| Online Store 2.0 (Dawn, Craft, Sense, Studio) | Recommandé |
|
| Polaris (back-office et apps) | Stable |
|
| Checkout Extensibility (Shopify Plus) | Stable |
|
Comment auditer un site Shopify en 6 étapes
Suivez ce guide étape par étape pour réaliser un audit RGAA complet de votre application Shopify.
Scanner les sept gabarits clés
Lancez RGAA Checker sur la page d'accueil, une collection, une fiche produit, le panier, la recherche, une page CMS et le compte client.
Vérifier le thème actif
Si vous utilisez Dawn, consultez le VPAT officiel pour identifier les limitations connues. Sur un thème commercial, demandez le VPAT à l'éditeur ou lancez un test exhaustif.
Tester le tunnel d'achat au clavier
Du clic sur un produit jusqu'au paiement, naviguez sans souris. Vérifiez le focus visible, le piégeage correct dans les modales (panier coulissant, recherche), la sélection des variantes.
Lancer un lecteur d'écran sur le produit
NVDA + Firefox ou VoiceOver + Safari. Sélectionnez une variante, ajoutez au panier, ouvrez le panier coulissant. Notez chaque annonce manquante ou erronée.
Auditer les apps installées
Chaque app peut injecter du HTML supplémentaire. Identifiez les apps actives, vérifiez leur impact a11y page par page (avis clients, pop-up, upsell).
Publier la déclaration d'accessibilité
Conformément au RGAA, publiez la déclaration avec taux de conformité, non-conformités, coordonnées. Ajoutez un lien permanent dans le footer.
Erreurs Fréquentes avec Shopify
Apps overlay « conformité en un clic »
Plusieurs apps Shopify promettent une mise en conformité automatique via un widget (taille de texte, contraste, mode dyslexie). Elles masquent les défauts du HTML sous-jacent et exposent à des recours. La position de la communauté a11y reste claire (overlayfactsheet.com).
Variantes produit en boutons mal groupés
Les variantes (couleur, taille) doivent être groupées dans <fieldset> + <legend>. Une mauvaise implémentation expose des boutons radio sans contexte ou des <select> sans label.
<select><option>S</option><option>M</option></select><fieldset><legend>Taille</legend><label><input type="radio" name="size" value="S">S</label>...</fieldset>Panier coulissant qui piège mal le focus
Le drawer panier doit piéger le focus à l'ouverture et le restaurer à l'élément déclencheur à la fermeture. Beaucoup de thèmes commerciaux laissent le focus s'échapper vers la page sous-jacente.
Filtres de catégorie sans étiquette
Les cases à cocher des filtres « Couleur », « Taille », « Marque » manquent souvent d'un <label for> ou d'un groupement <fieldset>. Le lecteur d'écran annonce « case à cocher » sans contexte.
Messages d'erreur checkout non liés au champ
Les erreurs d'adresse ou de paiement s'affichent en rouge sous le champ mais sans aria-describedby. Le lecteur d'écran ne fait pas le lien.
Badges de promotion à contraste insuffisant
Les pastilles « Soldes », « Nouveau », « Sold out » utilisent souvent un texte blanc sur jaune ou pastel. Le contraste tombe sous 4,5:1.
Plugins à éviter
Ces plugins/modules sont connus pour causer des problèmes d'accessibilité. Évitez-les ou configurez-les correctement.
Apps « accessibility overlay » génériques
Promettent une conformité automatique mais masquent les défauts. Position publique de la communauté a11y et risques juridiques.
Alternative : Audit manuel + remédiation dans le thème Liquid
Sliders auto-play sans contrôle pause
Apps slider qui n'exposent pas de bouton pause cassent les critères WCAG 2.2.2 et RGAA 13.8.
Alternative : Sections natives Online Store 2.0 avec contrôle utilisateur
Pop-up newsletter agressifs
Beaucoup de pop-up apps ouvrent une modale sans focus trap correct ni bouton de fermeture accessible au clavier.
Alternative : Section newsletter inline ou pop-up Polaris-compliant
Bonnes Pratiques Shopify
Démarrer sur Dawn ou un thème Online Store 2.0
Dawn est le thème gratuit officiel publié par Shopify avec un VPAT public. Skip link, landmarks et navigation clavier sont en place dès l'installation. Les autres thèmes Online Store 2.0 (Craft, Sense, Studio) suivent une logique similaire.
Construire les apps sur Polaris
Si vous développez une app Shopify, Polaris fournit composants WAI-ARIA validés, navigation clavier, gestion du focus dans les modales et tokens de couleur AA. Cela enlève une grande partie du travail bas niveau.
Profiter de Checkout Extensibility (Shopify Plus)
Sur Shopify Plus, Checkout Extensibility permet d'ajouter des extensions Polaris-compliant au tunnel d'achat. Le checkout standard Shopify est globalement bien construit, profitez-en.
Auditer chaque app installée
Chaque app injecte du HTML dans votre boutique. Faites une revue trimestrielle : avis clients, pop-up, upsell, livraison. Désactivez les apps non indispensables.
Configurer la palette pour les contrastes
Dans le theme editor, validez les contrastes après chaque changement de couleur (>= 4,5:1 pour le texte, >= 3:1 pour les composants). Les badges de promotion sont les premiers à tomber.
Traiter le tunnel d'achat comme un parcours critique
Page produit, panier, identification client : un défaut bloque 100% des utilisateurs avec lecteur d'écran. Tests clavier et NVDA obligatoires avant chaque mise en production.
Critères RGAA clés pour Shopify
Ces critères du référentiel RGAA sont particulièrement importants pour les sites Shopify.
Images
Galerie produit : alt sur chaque visuel, ou marqué décoratif si redondant avec un alt principal.
Compatibilité technologies d'assistance
Variantes produit, panier coulissant, sélecteur de devise : <button> et <a> natifs, jamais <div onClick>.
Focus visible
Boutons « Ajouter au panier » et CTA promo doivent garder un indicateur de focus visible (Dawn limite documentée).
Étiquettes de formulaire
Filtres, recherche, formulaires d'adresse : chaque champ avec <label for>.
Navigation clavier
Drawer panier, modales, dropdowns : focus trap correct, restauration à la fermeture.
Mouvement
Carrousels et animations auto-play doivent exposer un contrôle pause/stop.
Checklist accessibilité Shopify
Vérifiez ces points essentiels avant de mettre votre site Shopify en production.
- Thème Online Store 2.0 (Dawn, Craft, Sense, Studio) ou thème commercial avec VPAT
- Apps overlay « accessibility » désinstallées
- Variantes produit dans <fieldset> + <legend>
- Panier coulissant : focus trap à l'ouverture, restauration à la fermeture
- Filtres de collection avec label associé à chaque case
- Messages d'erreur checkout liés via aria-describedby
- Contraste >= 4,5:1 sur tous les badges (Soldes, Nouveau, Sold out)
- Carrousels avec contrôle pause / stop
- Tunnel d'achat testé au clavier sur trois variantes produit
- NVDA + Firefox testé sur sélection variante + ajout panier
- Déclaration d'accessibilité publiée (RGAA si périmètre français)
- Audit trimestriel des apps installées
Questions Fréquentes sur Shopify et l'accessibilité
Shopify est-il accessible par défaut ?
Le checkout standard Shopify est globalement bien construit. Le thème Dawn est un bon point de départ avec VPAT public. Mais aucune boutique ne sort conforme à 100% : la personnalisation, les apps et le contenu créent presque toujours des écarts.
L'European Accessibility Act s'applique-t-il à toutes les boutiques Shopify ?
Non. L'EAA cible le e-commerce B2C qui dépasse les seuils (plus de 2 millions de CA ou plus de 10 salariés). Les microentreprises sont exemptées sous conditions. Vérifiez la transposition française pour votre situation précise.
Polaris suffit-il pour qu'une app soit conforme ?
Polaris fournit des composants accessibles, mais l'assemblage et le contenu sont sous votre responsabilité. Une app Polaris peut quand même échouer sur les images sans alt, sur la hiérarchie de titres, sur les annonces dynamiques.
Faut-il payer une app a11y Shopify ?
Pour un audit récurrent, certaines apps facilitent la veille (suivi WCAG, rapports). Pour la remédiation, le travail reste à faire dans le code Liquid et dans le thème. Méfiez-vous des promesses de conformité automatique.
Les apps overlay rendent-elles ma boutique conforme ?
Non. Elles masquent les défauts plutôt que de les corriger. Vous restez juridiquement responsable. La communauté a11y déconseille fortement leur usage.
Comment gérer l'accessibilité sur Shopify Plus ?
Shopify Plus permet Checkout Extensibility avec des extensions Polaris. Profitez-en pour standardiser le checkout. Les Shopify Functions et apps custom doivent être audités séparément.
Combien coûte un audit RGAA d'une boutique Shopify ?
Entre 4 000 et 12 000 euros selon la taille du catalogue, le nombre d'apps installées et la complexité du thème. Une première évaluation gratuite via RGAA Checker permet de cadrer le devis.
Outils Recommandés pour Shopify
Thème Dawn (gratuit)
Thème officiel publié par Shopify, point de référence en accessibilité. Hiérarchie sémantique, skip link, navigation clavier, contrastes validés. Limites documentées dans le VPAT public.
Polaris (design system Shopify)
Open-source. 35+ composants WAI-ARIA validés, gestion du focus, tokens contraste AA. Indispensable pour développer une app Shopify accessible.
Documentation a11y Shopify
Bonnes pratiques officielles pour développeurs de thèmes : sémantique, ARIA, gestion du focus, tests recommandés.
IDX Audit Suite
Suite d'apps Shopify pour audit WCAG continu. Tableau de bord, rapports et suivi des corrections. Plus utile que les overlays.
axe DevTools (extension navigateur)
Extension Chrome/Firefox de Deque pour tester chaque page Shopify rendue. Couvre une grande partie des critères WCAG 2.1.
OverlayFactSheet
Référence pour comprendre pourquoi les apps overlay ne suffisent pas et exposent à des recours juridiques.
Auditez votre site Shopify gratuitement
Vérifiez si votre application respecte les 106 critères RGAA en moins de 30 secondes.
Lancer un audit RGAA gratuit