L'accessibilité avec Shopify

Les thèmes et apps Shopify décident de l'accessibilité. Le checkout est en grande partie imposé par Shopify.

Points fréquents

Couleurs de thème à contraste trop faible, images produit sans texte alternatif, applications d'avis et de pop-up sans navigation clavier, méga-menus qui ne s'ouvrent qu'au survol, carrousels sans pause. Le cœur de Shopify n'est généralement pas le problème — le thème, les applications et les contenus créés dans l'éditeur de texte enrichi le sont.

Vérifier et choisir le thème

Le thème décide du contraste, du focus visible, de la structure des titres et de la navigation clavier du menu et des filtres. Critères avant de choisir : parcourez la page d'accueil, une collection et une page produit avec la touche Tab — le focus est-il toujours visible ? Le menu s'ouvre-t-il sans souris ? Le contraste du texte et des boutons est-il d'au moins 4,5:1 ? Les thèmes par défaut Online Store 2.0 (Dawn et ceux qui en dérivent) sont un bon point de départ ; pour les thèmes payants, faites le test au clavier sur la démo et demandez au fournisseur une déclaration d'accessibilité.

Images produit, variantes et texte enrichi

Donnez à chaque image produit dans l'administration un texte alternatif qui décrit le contenu — pas le nom de fichier. Il en va de même pour les images de variantes. Le texte incrusté comme image dans un badge ou une bannière (« Solde », « Aujourd'hui seulement ») est invisible pour les lecteurs d'écran ; utilisez du vrai texte. Dans l'éditeur de texte enrichi de la description produit, utilisez proprement les niveaux de titre (ne vous contentez pas d'agrandir le texte) et les listes comme de vraies listes.

Applications et widgets intégrés

Les applications d'avis, de pop-up, de vente incitative et de bannière de cookies injectent souvent leurs propres widgets qui piègent le focus clavier, n'ont pas d'étiquettes ou affichent des surcouches impossibles à fermer. Testez chaque application au clavier ; les applications de diaporama et de compte à rebours ont besoin d'une pause et ne doivent rien faire clignoter. Une surcouche d'accessibilité sous forme d'application ne corrige pas les problèmes structurels et est critiquée par les associations de personnes concernées. En cas de doute : supprimez l'application.

Paiement : ce que Shopify impose, ce qu'il n'impose pas

Le paiement standard de Shopify est géré par Shopify et est en grande partie construit de façon accessible — vous y avez peu de leviers. Ce que vous influencez : les extensions de paiement et les champs personnalisés (message cadeau, vérification d'âge) peuvent gêner l'utilisation au clavier ou au lecteur d'écran, et le chemin jusqu'au paiement — panier, champ de code promo, choix de livraison — se trouve dans le thème. Testez aussi ces étapes.

Tester et questions fréquentes

Test rapide : utilisez la page d'accueil, une collection et une page produit au clavier seul, zoomez à 200 % dans le navigateur, lancez une extension comme WAVE ou axe DevTools. Le scan gratuit d'a11yglass vérifie en plus le HTML livré pour le contraste, les textes alternatifs, les étiquettes, la langue et la structure. Ma boutique Shopify a-t-elle besoin d'une déclaration d'accessibilité ? En règle générale oui — une boutique par laquelle des consommateurs achètent relève du commerce électronique au sens du BFSG ; voir la page sur la déclaration d'accessibilité. Le paiement de Shopify est-il déjà accessible ? Largement de la responsabilité de Shopify, mais les extensions peuvent le casser. Quel thème est accessible ? Il n'y a pas de label — ce qui compte, c'est la mise en œuvre dans le cas concret.

Comment a11yglass aide

Le scan gratuit vérifie le HTML et le CSS livrés à la recherche d'infractions WCAG détectables automatiquement et indique pour chaque constat le critère de succès et une mesure concrète. Il détecte environ 20 à 35 % des problèmes et ne remplace pas un audit complet.