Rendre votre boutique WooCommerce accessible : un guide pratique

Réponse courte. WooCommerce lui-même suit assez bien les directives d'accessibilité de WordPress, mais votre boutique hérite surtout de l'accessibilité de votre thème, de vos extensions et de votre contenu — et c'est là que les choses se gâtent le plus souvent. Passez en revue les six points ci-dessous (contraste, textes alternatifs, titres, extensions & constructeurs de pages, clavier, langue) et faites particulièrement attention à votre tunnel de paiement en blocs et à vos filtres de produits ; vous aurez alors réglé l'essentiel.

Pourquoi WooCommerce seul ne suffit-il pas ?

WooCommerce est une extension par-dessus WordPress. Que votre boutique respecte ou non les WCAG dépend de la façon dont votre thème est construit, des couleurs que vous avez choisies, des extensions et du constructeur de pages que vous utilisez et de la manière dont vous avez renseigné vos produits. Deux boutiques sur la même version de WooCommerce peuvent donc obtenir des résultats totalement différents. La bonne nouvelle : comme beaucoup d'éléments reviennent via votre thème et vos templates, une seule correction couvre souvent des centaines de pages.

1. Vérifiez votre contraste de couleurs

L'erreur la plus fréquente. Avec un thème en blocs (Full Site Editing), allez dans Apparence → Éditeur → Styles → Couleurs ; avec un thème classique, allez dans Apparence → Personnaliser → Couleurs. Assurez-vous que le texte et l'arrière-plan ont au moins 4,5:1 de contraste (3:1 pour les grands textes). Faites particulièrement attention au texte sur votre bouton Ajouter au panier, aux étiquettes de prix et de promotion, et aux liens. Un réglage correct une seule fois s'applique à toute la boutique. Voir contraste de couleurs : l'exigence WCAG et comment la mesurer.

2. Donnez des textes alternatifs à vos photos de produits

Ouvrez un produit dans Produits, cliquez dans Image du produit (et Galerie du produit) sur l'image → renseignez le champ Texte alternatif dans la médiathèque. Décrivez brièvement et factuellement ce qui est représenté (par ex. « Chaussure homme en daim noir avec lacets »), sans langage marketing. Commencez par vos produits les plus vendus et les bannières de votre page d'accueil. Les images décoratives reçoivent un alt vide (alt=""). Plus à ce sujet dans rédiger des textes alternatifs qui fonctionnent.

3. Vérifiez la structure de vos titres

Utilisez les titres dans un ordre logique (H1 → H2 → H3) et pas uniquement pour la mise en forme. Dans l'éditeur de blocs (Gutenberg), vous voyez le niveau de chaque bloc de titre ; ne sautez aucun niveau. Attention aux constructeurs de pages comme Elementor ou Divi : ils vous permettent de mettre n'importe quel texte en grand sans que cela devienne un véritable titre — choisissez-y délibérément le bon niveau de titre.

4. Faites attention à vos extensions et à votre constructeur de pages

C'est souvent la plus grande source de problèmes. Les extensions d'avis, de chat, de pop-ups, de sliders et de filtres — ainsi que les constructeurs de pages lourds — injectent leur propre code dans votre thème, et ce code contient fréquemment des boutons sans nom, des ARIA incorrects ou des éléments impossibles à utiliser au clavier. N'installez donc pas aveuglément chaque extension, et testez toujours votre site avec tout activé. Si une extension s'avère inaccessible, optez pour une alternative qui respecte, elle, les normes WCAG. Choisissez là où c'est possible les nouveaux blocs WooCommerce pour le panier et le paiement (voir point 6).

5. Testez au clavier

Essayez de parcourir votre site entièrement sans souris : uniquement avec la touche Tab et Entrée. Pouvez-vous atteindre tout — menu, filtres de produits, choix de variations, panier, paiement — et voyez-vous toujours où se situe le focus ? Avec WooCommerce, faites particulièrement attention aux listes déroulantes de variations, au sélecteur de quantité (+/−) et aux widgets de filtre dans votre barre latérale ; ce sont les endroits où le clavier se bloque souvent.

6. Vérifiez votre paramètre de langue et votre tunnel de paiement

Assurez-vous que votre thème définit le bon attribut de langue, afin qu'un lecteur d'écran choisisse la bonne prononciation. Dans un thème classique, header.php contient la ligne <html <?php language_attributes(); ?>> — qui doit contenir l'attribut de langue. Si vous utilisez WPML ou Polylang pour plusieurs langues, vérifiez alors que chaque version linguistique reçoit le bon attribut lang. Passez de préférence aux blocs Cart et Checkout de WooCommerce, basés sur des blocs : ils sont plus accessibles que l'ancien tunnel de paiement à shortcode et sont activement maintenus sur le plan de l'accessibilité.

Erreurs WooCommerce fréquentes et leur correction

Une extension d'accessibilité du répertoire d'extensions WordPress aide-t-elle ?

Non. Si vous cherchez « accessibility », vous trouvez des dizaines d'extensions qui promettent de rendre votre boutique conforme en un clic via un widget. Ne tombez pas dans le piège : elles ne réparent pas votre thème et vos templates, et les autorités de contrôle examinent le code source brut de votre boutique. Résoudre le problème structurellement dans votre thème et votre contenu est la seule voie qui tient — et elle vous apporte en prime un meilleur SEO et un temps de chargement plus rapide. Plus à ce sujet dans pourquoi un widget overlay ne vous protège pas.

Ma boutique WooCommerce est-elle ainsi conforme à la loi ?

Ces six points couvrent la plus grande partie de ce qu'un test automatisé détecte, mais « être conforme » va plus loin : cela dépend de l'ensemble de votre thème, de vos extensions et de votre contenu réunis. Pour savoir si la European Accessibility Act s'applique à vous, consultez notre checklist. Vous travaillez aussi avec Shopify ? Alors notre guide Shopify vous aidera à aller plus loin.

Comment savoir où en est ma boutique WooCommerce aujourd'hui ?

Le moyen le plus rapide : scannez gratuitement une page. Vous verrez, pour chaque constat, ce qui ne va pas et comment le résoudre — et comme beaucoup passe par votre thème et vos templates, vous le corrigez souvent d'un coup pour toute votre boutique. En moins de 60 secondes, sans compte.