Accessibilité site e-commerce (EAA) : quoi corriger

Depuis le 28 juin 2025, une boutique en ligne qui vend à des consommateurs dans l'UE doit être accessible au titre de l'acte européen sur l'accessibilité (European Accessibility Act), sauf s'il s'agit d'une microentreprise (moins de 10 personnes et au plus 2 millions d'euros de chiffre d'affaires ou de total de bilan). En pratique, votre boutique doit respecter le niveau WCAG 2.1 AA : contraste lisible, boutons et liens avec un nom, images avec texte alternatif, zoom fonctionnel et un tunnel de commande que l'on peut terminer au clavier seul. La plupart des boutiques échouent sur les mêmes points, et ceux-ci se corrigent dans le code du thème, pas avec un widget overlay. Lorsque nous avons analysé 1 482 boutiques en ligne en octobre 2026, 64 % avaient du texte trop peu contrasté et la moitié avaient des liens sans nom lisible.

Voici le côté technique. Ce n'est pas un conseil juridique : chaque pays de l'UE a transposé l'acte dans sa propre loi (en Allemagne, le Barrierefreiheitsstärkungsgesetz, BFSG), et les obligations exactes et leur contrôle varient d'un pays à l'autre.

Ce que la loi demande à une boutique en ligne

• Qui : les entreprises qui vendent des produits ou des services à des consommateurs en ligne dans l'UE. Les services de commerce électronique sont cités dans la directive elle-même (directive (UE) 2019/882, article 2).
• Qui est exempté : les microentreprises qui fournissent des services : moins de 10 salariés, et un chiffre d'affaires annuel ou un total de bilan d'au plus 2 millions d'euros. Vérifiez-le pour votre propre entreprise : en dépasser le seuil vous fait entrer dans le champ.
• Depuis quand : les règles s'appliquent depuis le 28 juin 2025. Les contrats de service conclus avant cette date peuvent se poursuivre sans changement jusqu'au 28 juin 2030 au plus tard, mais une boutique en ligne active aujourd'hui est un service fourni maintenant.
• À quel niveau : la norme harmonisée EN 301 549, qui renvoie au niveau WCAG 2.1 AA pour le contenu web. C'est la référence qu'utilise un auditeur ou une autorité de contrôle.

Ce que nous avons trouvé dans 1 482 vraies boutiques

Entre le 20 et le 26 octobre 2026, nous avons analysé les pages d'accueil de 1 482 boutiques Shopify et WooCommerce au Royaume-Uni, aux Pays-Bas, en Belgique et en Thaïlande avec EngineeringScore, notre propre outil d'audit. Les résultats complets sont dans nous avons analysé 1 482 boutiques en ligne avant le Black Friday. La partie accessibilité :

Problème sur la page d'accueil	Boutiques
Texte avec un contraste trop faible	64 %
Liens sans nom lisible (panier, réseaux sociaux et menu en simple icône)	50 %
Images sans texte alternatif	21 % (Shopify 24 %, WooCommerce 17 %)
Zoom bloqué sur mobile	12 %

Il ne s'agissait que de la page d'accueil, contrôlée automatiquement. Les contrôles automatiques détectent à peu près les problèmes mesurables dans le code ; l'usage au clavier, l'ordre du focus et le tunnel de commande demandent une personne. Lisez donc ces chiffres comme un plancher, pas comme un plafond.

Les corrections, dans l'ordre où nous les ferions

1. Le contraste

Les WCAG demandent un rapport de contraste d'au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte (environ 24 px, ou 19 px en gras). Les coupables habituels sont les prix et libellés en gris clair, le texte blanc sur une photo et une couleur de marque pâle sur les boutons. La correction se trouve dans les réglages de couleurs du thème ou dans le CSS : foncez le gris, placez le texte sur un fond uni ou assombri plutôt que directement sur une photo, et vérifiez chaque paire de couleurs une fois dans un vérificateur de contraste. Faites-le dans les réglages du thème quand c'est possible, pour qu'une mise à jour ne l'annule pas.

2. Donner un nom à chaque lien et bouton

Une icône de panier, une loupe de recherche, un menu hamburger ou un logo Instagram ne veut rien dire pour un lecteur d'écran s'il n'a pas de nom textuel. Google lit aussi ces noms. Ajoutez du texte visuellement masqué ou un aria-label :

<a href="/cart" aria-label="Cart, 2 items"><svg aria-hidden="true">…</svg></a>

Sur Shopify, la plupart de ces éléments se trouvent dans les sections d'en-tête et de pied de page du thème ; sur WooCommerce, dans le modèle d'en-tête du thème ou dans un widget de constructeur de pages, qui a souvent un champ de libellé que personne n'a rempli.

3. Un texte alternatif qui décrit le produit

Les photos de produits ont besoin d'un texte alternatif qui dit ce que montre l'image : « Bottine en cuir noir, vue de côté », pas « IMG_4021 » ni le nom du produit répété cinq fois. Les images purement décoratives reçoivent un alt="" vide pour que les lecteurs d'écran les ignorent. Shopify comme WooCommerce ont un champ alt par image dans l'administration ; le travail consiste à le remplir et à s'assurer que le thème l'affiche réellement.

4. Laisser les gens zoomer

Si votre thème contient maximum-scale=1 ou user-scalable=no dans sa balise viewport, les visiteurs ne peuvent pas zoomer sur leur téléphone. Supprimez les deux. La balise doit être <meta name="viewport" content="width=device-width, initial-scale=1">. Zoomez ensuite à 200 % dans un navigateur de bureau et vérifiez que rien ne se chevauche ni ne disparaît.

5. Clavier et focus

Mettez la souris de côté et parcourez avec la touche Tab la page d'accueil, une fiche produit et tout le tunnel de commande. Vous devez toujours voir où vous êtes (un contour de focus visible), atteindre chaque bouton, ouvrir et fermer le menu et les pop-ups, et choisir une taille ou une variante. Les thèmes suppriment souvent le contour de focus parce que le designer le trouvait laid ; remettez-le avec un style :focus-visible bien net. Les pop-ups de newsletter et de cookies sont le piège le plus fréquent : aucun moyen de les fermer au clavier.

6. Formulaires et tunnel de commande

Chaque champ a besoin d'un vrai libellé (pas seulement un texte indicatif qui disparaît quand on tape), les messages d'erreur doivent dire en texte ce qui ne va pas, pas seulement en rouge, et les champs obligatoires doivent être signalés. L'étape de paiement s'exécute souvent dans le cadre propre au prestataire de paiement ; cette partie relève du prestataire, mais les étapes qui l'entourent sont les vôtres. Testez le parcours complet avec chaque moyen de paiement que vous proposez.

7. Langue et structure

Définissez la langue de la page (<html lang="fr"> sur la boutique française, et ainsi de suite) pour que les lecteurs d'écran prononcent correctement le texte, donnez à chaque page un seul titre principal et gardez les titres dans l'ordre. Ce sont de petits changements dans le thème qui aident aussi les moteurs de recherche.

Pourquoi un widget overlay ne règle rien

Les overlays d'accessibilité sont des scripts qui ajoutent une barre d'outils ou une couche « IA » par-dessus votre boutique et promettent la conformité en une ligne de code. Les problèmes ci-dessus se trouvent dans le HTML et le CSS de votre thème ; un script qui s'exécute après coup ne peut pas les réparer de façon fiable, et il peut gêner les lecteurs d'écran et les réglages que les gens utilisent déjà. En avril 2025, la Federal Trade Commission américaine a ordonné à l'éditeur d'overlay accessiBe de payer 1 million de dollars et lui a interdit d'affirmer sans preuve que son produit peut rendre n'importe quel site web conforme aux WCAG. Un overlay est aussi un script tiers de plus sur des pages qui, dans notre analyse, chargeaient déjà du code provenant de 15 entreprises différentes en médiane.

Consacrez plutôt le budget de l'overlay à corriger le thème. C'est généralement un travail ponctuel, et cela reste corrigé tant que personne ne change le thème.

Shopify ou WooCommerce : où se situe le travail

• Shopify : le tunnel de commande de la plateforme est maintenu par Shopify ; la vitrine, c'est votre thème. Commencez par les réglages de couleurs et de typographie du thème, puis modifiez l'en-tête, le pied de page et les modèles de produits pour les libellés, l'affichage du texte alternatif et les styles de focus. Les apps qui injectent des pop-ups et des widgets sont souvent les pires fautives : testez donc avec elles activées.
• WooCommerce : tout est à vous : thème, constructeur de pages, plugins de commande. Les corrections vont dans un thème enfant pour que les mises à jour ne les écrasent pas. Vérifiez chaque plugin qui produit du HTML côté front-end, surtout les sliders, les méga-menus et les filtres de produits.

Dans les deux cas, écrivez les corrections dans le thème ou le thème enfant, et testez à nouveau après chaque mise à jour du thème ou d'une app. Vous hésitez sur la plateforme ? Notre comparatif des plateformes e-commerce détaille les compromis.

Contrôlez votre boutique en 30 minutes

1. Passez votre page d'accueil, une fiche produit et le panier dans EngineeringScore ou dans le contrôle d'accessibilité de Lighthouse dans Chrome (F12, Lighthouse).
2. Parcourez la boutique avec Tab jusqu'à une commande test terminée, sans souris.
3. Zoomez à 200 % sur un ordinateur portable et pincez-zoomez sur votre téléphone.
4. Activez VoiceOver (iPhone, Mac) ou TalkBack (Android) et écoutez votre en-tête et un produit.
5. Notez ce qui a échoué, dans l'ordre où les clients perdent la vente : d'abord le tunnel de commande, puis les fiches produits, puis le reste.

Si le problème vient de votre tunnel de commande, notre guide sur un checkout de boutique en ligne qui ne fonctionne pas vous aide à tester le parcours complet. Et si vous préparez les semaines les plus chargées de l'année, combinez cela avec la checklist Black Friday.

Vous voulez que ce soit corrigé plutôt que listé ?

Commencez par notre bilan de site web, ou envoyez-nous l'adresse de votre boutique via la page contact. La durée des corrections dépend du thème et des apps, nous l'estimons donc après un premier examen. Vous pouvez les payer à l'heure ou à partir d'une carte d'heures de 14 heures (910 €).