Le thème Dawn de Shopify est-il accessible ?

Le thème Dawn offre une bonne base d'accessibilité (HTML sémantique, navigation clavier, contrastes). Mais les personnalisations (sections personnalisées, apps tierces, modifications Liquid) peuvent dégrader l'accessibilité. Un audit reste nécessaire après personnalisation.

Shopify est-il conforme au RGAA ?

Shopify en tant que plateforme n'est pas certifié RGAA. La conformité dépend du thème, des personnalisations et des applications tierces. Le thème Dawn et les composants Polaris (checkout) ont un bon niveau d'accessibilité, mais la responsabilité finale reste au marchand.

Comment rendre les swatches de couleur Shopify accessibles ?

Les pastilles de couleur doivent avoir un texte associé visible ou via aria-label (« Bleu marine »). Ne transmettez pas l'information uniquement par la couleur. La swatch sélectionnée doit être indiquée par aria-checked="true" et un indicateur visuel autre que la couleur (bordure, coche).

Accessibilité Shopify : thèmes Liquid, checkout et conformité RGAA pour l'e-commerce

Shopify et l'accessibilité : l'e-commerce accessible est un avantage compétitif

Shopify propulse plus de 4 millions de boutiques en ligne dans le monde. En France, de nombreux e-commerçants utilisent Shopify pour vendre en ligne. Avec l'entrée en vigueur de l'European Accessibility Act (EAA), les sites e-commerce doivent être accessibles. C'est aussi un avantage compétitif : un site accessible touche un public plus large et améliore l'expérience pour tous.

Le thème par défaut Dawn et l'accessibilité

Le thème Dawn, thème par défaut de Shopify depuis 2021, a été conçu avec l'accessibilité en tête :

HTML sémantique : utilisation de <main>, <nav>, <header>, <footer>
Navigation clavier : les menus, onglets et carrousels sont navigables au clavier
Contrastes : les couleurs par défaut respectent les ratios WCAG AA
Skip links : lien « Aller au contenu » intégré
Formulaires : labels associés aux champs

Cependant, les personnalisations apportées via le theme editor ou le code Liquid peuvent introduire des régressions.

Fiches produits accessibles

Images produit

Texte alternatif : chaque image produit doit avoir un alt descriptif dans l'admin Shopify (Media > Alt text). « T-shirt bleu marine en coton bio, col rond, vue de face » plutôt que « IMG_2847 »
Galerie d'images : la navigation entre les vignettes doit fonctionner au clavier (flèches + Enter)
Zoom : la fonctionnalité de zoom doit avoir un bouton accessible et se fermer avec Escape

Variantes et sélecteurs

Les sélecteurs de taille et de couleur doivent être des <select> ou des groupes de <input type="radio"> avec labels
Les swatches de couleur (pastilles colorées) doivent avoir un texte associé (« Bleu marine ») et pas uniquement la couleur
Le changement de variante doit annoncer le nouveau prix et la disponibilité via aria-live

Bouton d'ajout au panier

Le bouton doit clairement indiquer le produit (pas juste « Ajouter »)
Après l'ajout, annoncer la confirmation (« Produit ajouté au panier ») via une live region
Si le produit est épuisé, le bouton doit être disabled avec un message explicatif

Panier et checkout

Page panier

Le tableau des produits doit avoir des en-têtes (<th>) : Produit, Prix, Quantité, Total
Les champs de quantité doivent avoir un label associé (« Quantité pour T-shirt bleu »)
La suppression d'un produit doit être confirmable et annoncée

Checkout Shopify

Le checkout Shopify (page de paiement) est partiellement contrôlé par Shopify. Points d'attention :

Shopify a amélioré l'accessibilité native du checkout, mais certains éléments restent problématiques
Les champs d'adresse avec autocomplétion doivent être accessibles
Le résumé de commande doit être lisible par les lecteurs d'écran
Les erreurs de formulaire (carte invalide, champ manquant) doivent être annoncées

Shopify Checkout Extensibility (API de personnalisation du checkout) permet d'améliorer l'accessibilité avec des composants UI Polaris accessibles.

Recherche et filtres accessibles

Le champ de recherche doit avoir un label (pas de placeholder seul) et un bouton de soumission
Les résultats de recherche prédictive doivent suivre le pattern ARIA combobox
Les filtres de collection (taille, couleur, prix) doivent être accessibles au clavier
L'application d'un filtre doit annoncer le nombre de résultats mis à jour

Apps Shopify et accessibilité

Les applications tierces Shopify sont souvent les éléments les moins accessibles :

Widgets d'avis (Judge.me, Loox) : vérifiez la navigation clavier et les contrastes
Pop-ups et modales (Privy, OptiMonk) : doivent gérer le focus correctement
Chatbots (Tidio, Zendesk) : doivent être accessibles au clavier et aux lecteurs d'écran
Sliders et carrousels : doivent avoir des contrôles accessibles et un bouton pause

L'e-commerce accessible n'est pas une contrainte : c'est un investissement. Les boutiques accessibles convertissent mieux car l'expérience est meilleure pour TOUS les utilisateurs, pas seulement les personnes handicapées.