Shopify · EAA

Accessibilité Shopify : la checklist pratique

Shopify gère l'accessibilité du checkout, mais votre thème, vos applications et vos contenus restent sous votre responsabilité. Voici où la plupart des boutiques Shopify échouent, et comment corriger chaque point.

1. Le texte alternatif des images produit

Produits → ouvrez un produit → cliquez sur chaque média → « Ajouter un texte alternatif ». Décrivez ce qui compte pour l'acheteur : « Pull col rond en mérinos bleu marine, vue de face ». Les images de collection et les bannières se règlent dans l'éditeur de thème, bloc par bloc.

2. Les contrastes de couleurs

Boutique en ligne → Thèmes → Personnaliser → Paramètres du thème → Couleurs. Visez un contraste de 4,5:1 pour le texte, les boutons, les badges « Promo » et les prix barrés. Les gris clairs et les boutons pastel avec texte blanc sont les coupables habituels.

3. Les boutons-icônes sans nom

Panier, recherche, compte, menu, flèches de carrousel et liens vers les réseaux sociaux n'ont souvent aucun texte. Dans Modifier le code, ouvrez les sections d'en-tête et de pied de page et ajoutez aria-label="Panier" (etc.) sur ces <a> et <button>.

4. Les champs sans étiquette

Les formulaires newsletter et de recherche se contentent souvent d'un placeholder. Ajoutez une <label class="visually-hidden"> à chaque champ.

5. Les applications et pop-ups

Les applis d'avis, d'upsell et de pop-up injectent leur propre code. Vérifiez qu'une pop-up se ferme avec Échap et que le focus ne se perd pas. Si une appli échoue, demandez une version accessible à l'éditeur ou remplacez-la.

6. Le choix du thème

Les thèmes Online Store 2.0 récents du Theme Store (comme Dawn et ses dérivés) partent d'une bien meilleure base que les thèmes anciens ou très personnalisés.

7. La déclaration d'accessibilité

Créez une page (Boutique en ligne → Pages) avec votre déclaration et liez-la dans le menu du pied de page. Notre générateur gratuit la prépare en deux minutes.