Magento et accessibilité : par où commencer sur une boutique

Une boutique Magento part avec un avantage : le thème Luma de Magento 2 pose une structure de page correcte, des régions identifiées et une navigation clavier qui fonctionne sur l'essentiel. C'est un meilleur point de départ que beaucoup de plateformes.

Cet avantage disparaît vite. Ce que voit votre client n'est pas Luma, c'est votre thème enfant, vos surcharges de templates et la douzaine d'extensions installées au fil des ans. L'accessibilité d'une boutique Magento se juge donc là, pas sur la démonstration du thème par défaut.

Les quatre zones qui cassent en priorité

Sur une boutique de commerce en ligne, les non-conformités ne sont pas réparties uniformément. Quatre zones concentrent l'essentiel, et elles sont toutes sur le chemin de l'achat.

La galerie produit. Les vignettes sont souvent des liens sans intitulé exploitable, ou un alt recopié depuis le nom de fichier. Le zoom au survol, lui, n'existe pas pour qui navigue au clavier. Le critère 7.3 est explicite : chaque script doit être contrôlable par le clavier et par tout dispositif de pointage.

Les déclinaisons de couleur. C'est le défaut le plus répandu et le plus simple à corriger. Une gamme présentée par pastilles colorées, sans libellé, fait reposer l'information sur la seule couleur, ce qu'interdit le critère 3.1. Le correctif tient en une ligne : ajouter le nom de la teinte, en texte visible ou en libellé accessible sur le contrôle.

Le mini-panier. L'ajout au panier ouvre un panneau latéral sans que rien ne soit annoncé, et le focus reste sur le bouton d'origine. L'utilisateur au lecteur d'écran entend le silence et croit que rien ne s'est passé. Il faut soit déplacer le focus dans le panneau, soit annoncer le changement dans une région dédiée, jamais les deux à la fois sous peine de double annonce.

Le tunnel de commande. Une erreur signalée par une bordure rouge et rien d'autre est invisible à qui ne la voit pas. Chaque champ doit porter son étiquette au sens du critère 11.1, et chaque erreur doit être exprimée en texte, associée au champ concerné. C'est aussi l'endroit où une non-conformité coûte le plus cher : elle ne dégrade pas l'expérience, elle interrompt la vente.

Les extensions sont le principal facteur de régression

Un thème propre survit rarement à trois ans d'ajouts. Sliders promotionnels, filtres à facettes, avis clients, widgets de chat, popups de collecte d'adresse : chacun injecte son propre balisage, et aucun n'a été choisi sur ce critère.

Deux réflexes limitent les dégâts.

Évaluez avant d'installer. Déployez le module sur un environnement de recette et parcourez la page concernée au clavier seul. Si vous ne pouvez pas atteindre une fonction ou en sortir, vous connaissez déjà la réponse. C'est cinq minutes contre une dette qui restera des années.

Recensez ce qui est déjà installé. Sur une boutique existante, la liste des extensions actives est le meilleur plan d'audit disponible : elle vous dit où regarder en premier.

Deux corrections de templates qui rapportent

Sur les surcharges de templates, deux pratiques héritées reviennent régulièrement et méritent d'être défaites.

Les rôles ARIA redondants. Beaucoup de thèmes écrivent encore <header role="banner">, <nav role="navigation">, <main role="main">, <footer role="contentinfo">. Ces rôles sont déjà portés par les balises elles-mêmes : les répéter n'apporte rien et brouille la lecture du code. La première règle d'ARIA s'applique ici sans nuance. En revanche, un aria-label reste utile pour distinguer deux <nav> d'une même page, par exemple la navigation principale et le fil d'Ariane.

<nav aria-label="Navigation principale">…</nav>
<nav aria-label="Fil d'Ariane">…</nav>

Le lien d'évitement. Il est fréquemment masqué par un left: -9999px puis remis en position: static au focus, ce qui déplace la mise en page au moment où il apparaît. Les techniques de masquage visuel accessible donnent des alternatives qui ne bougent rien.

Le cadre légal, en deux lignes

Le commerce en ligne figure explicitement dans le champ de l'European Accessibility Act, applicable depuis le 28 juin 2025. La seule sortie possible pour un service est l'exemption de microentreprise, qui suppose deux conditions cumulatives : moins de 10 salariés et moins de 2 millions d'euros de chiffre d'affaires annuel. Le détail du régime et des exemptions est traité dans notre article sur l'accessibilité du e-commerce.

Conclusion

Sur une boutique Magento, l'ordre de traitement compte plus que l'exhaustivité. Le tunnel de commande et les déclinaisons produit avant tout le reste : ce sont les deux endroits où une non-conformité se traduit directement en panier abandonné.

Pour situer votre point de départ, analysez une fiche produit et une étape de tunnel. Le résultat vous dira ce que la machine sait trancher, comme l'absence d'étiquette ou le contraste insuffisant ; la navigation au clavier dans le mini-panier, elle, se vérifie à la main, et c'est souvent là que se trouve le vrai blocage.