SevirantaRendre votre boutique Shopify accessible : un guide pratique
5 juin 2026
Réponse courte. Shopify pose de bonnes fondations, mais ne livre pas une boutique accessible « prête à l'emploi ». La plupart des erreurs se trouvent dans votre thème, votre contenu et vos applications — et ce sont justement celles que vous pouvez souvent corriger d'un coup à l'échelle du thème. Passez en revue les six points ci-dessous (contraste, textes alternatifs, titres, applications, clavier, langue) et vous aurez réglé l'essentiel.
Pourquoi Shopify seul ne suffit-il pas ?
Un thème Shopify est un modèle. Que votre site respecte ou non les WCAG dépend de la façon dont ce thème est construit, des couleurs que vous avez choisies, des applications que vous avez installées et de la manière dont vous avez renseigné vos produits. Deux boutiques sur le même thème peuvent donc obtenir des résultats très différents. La bonne nouvelle : comme beaucoup d'éléments reviennent via le thème, une seule correction couvre souvent des centaines de pages.
1. Vérifiez votre contraste de couleurs
L'erreur la plus fréquente. Dans votre tableau de bord, allez dans Online Store → Themes → Customize → Theme settings (roue dentée) → Colors et assurez-vous que le texte et l'arrière-plan ont au moins 4,5:1 de contraste (3:1 pour les grands textes). Faites particulièrement attention aux textes des boutons, aux étiquettes de prix, aux liens — et au texte sur votre bouton Add to cart. Un réglage correct une seule fois s'applique à toute la boutique. Voir contraste de couleurs : l'exigence WCAG et comment la mesurer.
2. Donnez des textes alternatifs à vos photos de produits
Allez dans Products, cliquez sur un produit et faites défiler jusqu'à Media → cliquez sur
l'image → Add alt text. Décrivez brièvement et factuellement ce qui est représenté
(par ex. « Chaussure homme en daim noir avec lacets »), sans langage marketing. Commencez par vos
produits les plus vendus et les bannières de votre page d'accueil. Les images décoratives reçoivent un
alt vide (alt="").
3. Vérifiez la structure de vos titres
Utilisez les titres dans un ordre logique (H1 → H2 → H3) et pas uniquement pour la mise en forme. Dans l'éditeur Shopify, vous retrouvez les titres dans vos sections et vos blocs de texte enrichi ; ne sautez aucun niveau.
4. Faites attention à vos applications
C'est souvent la plus grande source de problèmes. Les applications d'avis, de chat, de pop-ups et de filtres injectent leur propre code — régulièrement via des iFrames ou le Shadow DOM — dans votre thème, et ce code contient fréquemment des boutons sans nom, des ARIA incorrects ou des éléments impossibles à utiliser au clavier. N'installez donc pas aveuglément chaque application, et testez toujours votre site avec les applications actives. Si une application s'avère inaccessible, optez pour une alternative qui respecte, elle, les normes WCAG.
5. Testez au clavier
Essayez de parcourir votre site entièrement sans souris : uniquement avec la touche Tab et Entrée. Pouvez-vous atteindre tout — menu, filtres, panier, paiement — et voyez-vous toujours où se situe le focus ? Beaucoup de personnes naviguent ainsi, et cela révèle rapidement les obstacles.
6. Vérifiez votre paramètre de langue
Assurez-vous que votre thème définit le bon attribut de langue, afin qu'un lecteur d'écran choisisse la
bonne prononciation. Allez dans Themes → Actions (⋯) → Edit code, ouvrez layout/theme.liquid et
vérifiez que la balise <html> contient la variable de langue :
<html lang="{{ request.locale.iso_code }}">. Shopify gère généralement bien cela, mais vérifiez-le
après coup en cas d'utilisation d'applications de traduction.
Erreurs Shopify fréquentes et leur correction
| Élément Shopify | Erreur fréquente | La correction |
|---|---|---|
| Boutons | police trop claire sur le bouton « Paiement » | contraste dans les réglages du thème à au moins 4,5:1 |
| Photos de produits | nom de fichier en guise de description (product_v2.png) | ajouter un texte alternatif fonctionnel via Media |
| Pop-up du panier | croix de fermeture (X) sans libellé | aria-label="Fermer le panier" dans le template |
| Application d'accessibilité | installer un widget overlay | à éviter — ne répare pas votre code et ne protège pas contre les réclamations |
Une application d'accessibilité de la Shopify App Store aide-t-elle ?
Non. Si vous cherchez « accessibility » dans l'App Store, vous trouvez des dizaines d'applications qui promettent de rendre votre boutique conforme en un clic via un widget. Ne tombez pas dans le piège : elles ne réparent pas votre thème de base, et les autorités de contrôle examinent le code source brut de votre boutique. Résoudre le problème structurellement dans votre thème et votre contenu est la seule voie qui tient — et elle vous apporte en prime un meilleur SEO et un temps de chargement plus rapide. Plus à ce sujet dans pourquoi un widget overlay ne vous protège pas.
Ma boutique Shopify est-elle ainsi conforme à la loi ?
Ces six points couvrent la plus grande partie de ce qu'un test automatisé détecte, mais « être conforme » va plus loin : cela dépend de l'ensemble de votre thème, de vos applications et de votre contenu réunis. Pour savoir si la European Accessibility Act s'applique à vous, consultez notre checklist. Et attention : une application overlay ne résout pas cela — elle ne répare pas le code de votre thème.
Comment savoir où en est ma boutique Shopify aujourd'hui ?
Le moyen le plus rapide : scannez gratuitement une page. Vous verrez, pour chaque constat, ce qui ne va pas et comment le résoudre — et comme beaucoup passe par votre thème, vous le corrigez souvent d'un coup pour toute votre boutique. En moins de 60 secondes, sans compte.