Accessibilité WordPress et WooCommerce, mettre sa boutique en conformité

Une boutique WooCommerce entre pleinement dans le champ de l'European Accessibility Act depuis juin 2025. Or, entre un thème mal codé, des plugins bavards et un tunnel d'achat négligé, l'accessibilité WordPress se joue dans les détails. Voici les points qui bloquent vraiment, et comment les corriger.

WordPress n'est pas accessible par défaut

Le cœur de WordPress fait des efforts sérieux sur l'accessibilité, mais votre site, lui, dépend surtout de votre thème et de vos extensions. Un thème premium clinquant peut être une catastrophe au clavier, et chaque plugin ajoute son propre HTML, souvent sans la moindre considération pour les lecteurs d'écran. La conformité ne se décrète pas, elle se vérifie composant par composant.

Pour une boutique, l'enjeu est double : c'est une obligation légale, et chaque barrière d'accessibilité est une vente perdue. Un utilisateur qui ne peut pas valider son panier ne revient pas.

À retenir : une boutique WooCommerce est un service de commerce électronique, donc directement concernée par l'European Accessibility Act. Le risque n'est pas théorique : mise en demeure d'un côté, panier abandonné de l'autre.

Choisir un socle sain : le thème

Le premier levier est le thème. WordPress.org marque les thèmes audités d'un tag accessibility-ready : navigation au clavier, contrastes, focus visible, formulaires étiquetés y sont vérifiés. Ce n'est pas une garantie absolue, mais c'est un excellent point de départ, bien plus solide qu'un thème de marketplace vendu sur ses animations.

Quel que soit le thème, trois vérifications de base s'imposent dans les templates :

• une hiérarchie de titres correcte (un seul h1 par page, pas de niveau sauté) ;
• un lien d'évitement vers le contenu principal ;
• un focus visible jamais supprimé.

<?php // header.php : lien d'évitement, premier élément focusable ?>
<a class="skip-link screen-reader-text" href="#main">Aller au contenu</a>

La classe screen-reader-text est fournie par WordPress : elle masque visuellement l'élément tout en le gardant accessible, et le révèle au focus clavier.

Les 5 points qui bloquent dans WooCommerce

1. L'ajout au panier en AJAX, totalement silencieux

C'est le piège classique. Le client clique sur « Ajouter au panier », un message apparaît, le compteur se met à jour, mais rien n'est annoncé au lecteur d'écran. Il faut pousser l'information dans une région aria-live.

<!-- À placer dans le template, une fois -->
<div id="a11y-cart-status" aria-live="polite" class="screen-reader-text"></div>

// WooCommerce déclenche cet événement jQuery après l'ajout AJAX
jQuery(document.body).on('added_to_cart', function () {
  document.getElementById('a11y-cart-status').textContent =
    'Produit ajouté au panier';
});

2. Le statut de stock signalé par la seule couleur

« En stock » en vert, « Rupture » en rouge : pour une personne daltonienne, c'est la même chose. L'information de couleur doit toujours être doublée par du texte ou une icône explicite. WooCommerce affiche déjà un libellé texte, le piège vient des thèmes qui le masquent au profit d'une pastille colorée.

3. Les variations produit sans étiquettes

Les sélecteurs de variation (taille, couleur) doivent être reliés à un <label>. Quand un thème remplace le <select> natif par un widget personnalisé de pastilles, il casse souvent cette association.

<label for="taille">Taille</label>
<select id="taille" name="attribute_taille">
  <option value="">Choisir une taille</option>
  <option value="m">M</option>
  <option value="l">L</option>
</select>

4. Le tunnel de commande mal étiqueté

Le checkout est l'endroit le plus critique. Chaque champ a besoin d'un label lié, du bon autocomplete, et d'erreurs reliées au champ concerné.

<label for="billing_email">E-mail</label>
<input id="billing_email" type="email" name="billing_email"
       autocomplete="email" required
       aria-describedby="billing_email_error">
<span id="billing_email_error" role="alert"></span>

L'attribut autocomplete n'est pas qu'un confort : il aide aussi les personnes avec des troubles cognitifs ou moteurs à remplir le formulaire sans tout ressaisir.

5. La galerie produit au clavier

La galerie d'images et sa lightbox doivent être utilisables sans souris : navigation au clavier, fermeture à la touche Échap, focus piégé dans la lightbox ouverte. Beaucoup de galeries WooCommerce échouent sur ce point. Si la vôtre n'est pas accessible, désactivez l'effet zoom/lightbox plutôt que de laisser un piège.

Attention aux plugins « widget d'accessibilité »

Les extensions qui promettent la conformité en un clic, via une barre d'outils flottante (changer le contraste, agrandir le texte), ne rendent pas votre site conforme. Elles se superposent au vrai problème sans le corriger, et peuvent même gêner les lecteurs d'écran que vos visiteurs utilisent déjà. La seule voie fiable reste de corriger le HTML à la source.

Approche	Conformité réelle	Risque
Widget overlay « tout-en-un »	Non	Gêne les aides techniques
Correction du thème et des templates	Oui	aucun
Audit manuel + tests	Oui	aucun

Comment tester sa boutique

• Parcours d'achat complet au clavier : de la fiche produit au paiement, sans souris.
• Lecteur d'écran sur le tunnel de commande (VoiceOver, NVDA).
• axe DevTools ou Lighthouse sur les pages clés (accueil, catégorie, produit, panier, checkout).
• Contraste des boutons, badges promo et libellés de stock.

La checklist accessibilité WooCommerce

• Thème accessibility-ready, focus visible conservé
• Lien d'évitement et hiérarchie de titres correcte
• Ajout au panier AJAX annoncé via aria-live
• Statut de stock jamais signalé par la seule couleur
• Variations produit reliées à un <label>
• Champs de checkout étiquetés, autocomplete et erreurs liées
• Galerie et lightbox utilisables au clavier
• Aucun plugin overlay en guise de mise en conformité
• Parcours d'achat testé au clavier et au lecteur d'écran

Pour aller plus loin

Pour les principes généraux (WCAG, RGAA, méthode de test), voir : Accessibilité web, le guide pratique du développeur. Et côté performance de boutique : Optimisation des performances WooCommerce.

Votre boutique WooCommerce doit se mettre en conformité d'accessibilité ? Parlons-en.