Shopify
Accessibilité sur Shopify : ce qui coince d’origine et comment le corriger
Shopify est une bonne plateforme, et pourtant presque aucune boutique Shopify n’est conforme. Ce n’est pas contradictoire : ce que Shopify maîtrise — le tunnel de paiement hébergé, l’infrastructure — est plutôt bien tenu, mais ce qui décide si un client peut acheter se trouve dans votre thème, et le thème est à vous. Cette page va composant par composant : ce qui coince, quel critère est enfreint et ce qui change exactement.
Shopify ne vous rend pas conforme et ne vous en empêche pas. Le tunnel hébergé aide ; le thème (Dawn compris) arrive avec des barrières connues dans le menu, la galerie produit, le sélecteur de variantes, le tiroir du panier et la recherche prédictive. Toutes se corrigent dans les fichiers .liquid, le JavaScript et le CSS du thème — aucune depuis l’interface d’administration.
Ce que fournit Shopify et ce que vous fournissez
Cela vaut la peine de bien séparer les deux, parce que le discours commercial les confond presque toujours.
Ce que fournit Shopify : le tunnel de paiement hébergé, que la plateforme entretient et améliore sans que vous touchiez à quoi que ce soit, et les composants de base de ses thèmes officiels, améliorés de version en version.
Ce que vous fournissez : le thème et ses personnalisations, les applications installées (les pop-ups et moteurs de recherche tiers sont les pires), vos images et leur texte alternatif, et les textes de vos fiches produit. C’est là que se trouve 90 % de ce que relève un audit.
Une nuance qui compte si vous vendez en Europe : un tunnel bien tenu ne vous exonère pas, car l’obligation vise le service entier, pas un seul tronçon.
Les sept barrières que l’on retrouve presque à chaque fois
| Composant | Ce qui coince | WCAG | La correction |
|---|---|---|---|
Menu et menus déroulantsheader.liquid | Le bouton de menu ne met jamais aria-expanded à jour, et les méga-menus piègent le focus clavier. | 4.1.2 · 2.1.1 | Mettre aria-expanded à jour à l’ouverture et à la fermeture, et relier le sous-menu par aria-controls. |
Galerie produitproduct-media-gallery.liquid | Les vignettes sont des boutons sans nom accessible et les flèches n’ont qu’une icône. | 1.1.1 · 2.4.4 | Donner un aria-label du type « Voir l’image 2 sur 7 » et marquer l’active avec aria-current. |
Sélecteur de variantesproduct-variant-picker.liquid | La couleur choisie ne se distingue que par la couleur, et les variantes épuisées ne sont pas annoncées. | 1.4.1 · 1.3.1 | Grouper dans un fieldset avec legend, utiliser de vrais boutons radio et ajouter « Épuisé » en texte masqué. |
Tiroir du paniercart-drawer (JS) | À l’ouverture le focus reste derrière, Échap ne ferme pas, et à la fermeture le focus ne revient pas. | 2.4.3 · 2.1.2 | Déplacer le focus à l’ouverture, le retenir dedans, fermer avec Échap et le rendre au bouton d’origine. |
Recherche prédictivepredictive-search.liquid | Les résultats apparaissent sans être annoncés : qui ne voit pas l’écran ignore qu’il y en a. | 4.1.3 · 1.3.1 | Annoncer le nombre de résultats avec role="status" et aria-live="polite". |
Pied de pagefooter.liquid | Le champ newsletter utilise le texte gris comme étiquette et les icônes sociales n’ont pas de nom. | 3.3.2 · 1.1.1 | Une vraie étiquette masquée reliée par for, et un aria-label sur chaque icône. |
Contraste et focusbase.css | Le badge promo et les boutons désactivés restent sous 4,5:1 ; l’anneau de focus est à peine visible. | 1.4.3 · 2.4.7 | Assombrir ces couleurs et donner au focus un contour de 3 px avec un décalage. |
Les noms de fichiers correspondent à Dawn et aux thèmes officiels qui en dérivent. Sur un thème payant le chemin change, le problème non.
Pourquoi le widget de l’App Store ne règle rien
L’App Store de Shopify propose des dizaines de widgets d’accessibilité à 20–50 € par mois. Aucun ne corrige ce qui figure dans le tableau ci-dessus, parce qu’aucun ne réécrit votre thème : ils ajoutent une couche par-dessus, avec des boutons de contraste et de taille de police. Le focus perdu à l’ouverture du tiroir du panier reste perdu, et le sélecteur de tailles continue de ne pas dire quelle taille est choisie.
Pire : certains injectent des attributs ARIA erronés sur des éléments qui allaient bien et dégradent l’expérience au lecteur d’écran. Si vous en avez déjà un, ne le retirez pas aujourd’hui — mais ne le comptez pas comme conformité.
Testez votre boutique en dix minutes, sans aucun outil
- Rangez la souris. Depuis l’accueil, atteignez un produit, choisissez une variante, ajoutez-le au panier et entrez dans le paiement uniquement avec Tab, Maj+Tab, Entrée et les flèches.
- Regardez où est le focus à chaque étape. Dès que vous ne savez plus quel élément est sélectionné, c’est un échec du 2.4.7.
- Ouvrez le tiroir du panier et appuyez sur Échap. Il doit se fermer et rendre le focus au bouton qui l’a ouvert.
- Zoomez la page à 200 %. Rien ne doit se chevaucher ni imposer un défilement horizontal.
- Désactivez les images du navigateur. Si vos fiches deviennent muettes, il manque du texte alternatif.
Si l’un de ces points échoue, vous avez déjà la liste de ce qu’il faut corriger avant de penser déclaration ou certificat.
Vous voulez la liste complète pour votre boutique ?
Le scan gratuit vous donne en quelques minutes une première carte des barrières de votre site : sans compte, sans carte, sans engagement.