En tant que consultant en accessibilité, j'ai vu trop de boutiques en ligne françaises et suisses fermer leur porte aux utilisateurs handicapés. Le paysage légal change rapidement. En 2026, les exigences seront plus strictes qu'aujourd'hui. Si vous ignorez ces règles, votre site risque non seulement d'être exclu par vos clients, mais aussi de faire face à des poursuites judiciaires.
La plupart des propriétaires de sites pensent que l'installation d'un plugin suffit. C'est une erreur coûteuse. L'accessibilité WooCommerce ne se résume pas à un bouton magique. Elle demande une compréhension profonde du code source, des standards WCAG 2.2 et des besoins spécifiques des utilisateurs de lecteurs d'écran.
Dans cet article, je vais vous montrer comment transformer votre boutique en un environnement inclusif. Nous allons passer de la théorie à la pratique, avec des exemples concrets pour sécuriser votre activité avant l'année prochaine.
Comprendre les exigences techniques actuelles
Avant de toucher au code, il faut comprendre ce qui est attendu légalement. En France et en Suisse, la loi impose le respect des normes d'accessibilité numérique. Aux États-Unis, le ADA (Americans with Disabilities Act) s'applique également aux sites e-commerce.
La norme de référence est la WCAG 2.2. Elle définit comment rendre un site utilisable par tous. Voici les trois principes fondamentaux que vous devez respecter :
- Percevable : L'information doit être présentée de manière lisible (contraste, texte alternatif).
- Utilisable : Les contrôles doivent être navigables au clavier et compatibles avec les technologies d'assistance.
- Compréhensible : Le contenu doit être clair, avec des erreurs de formulaire expliquées simplement.
Beaucoup de thèmes WooCommerce par défaut échouent sur ces critères. Ils utilisent des classes CSS obsolètes ou des scripts qui bloquent la navigation au clavier. C'est là que l'audit technique devient crucial.
Audit du code source et des thèmes
Le premier pas vers une conformité durable est d'examiner votre thème et vos plugins. Les thèmes "gratuits" populaires sont souvent remplis de bugs d'accessibilité. Ils utilisent parfois des balises <div> à la place de <h1> à <h6>, ce qui casse la structure sémantique pour les lecteurs d'écran.
Pour auditer votre site, utilisez un outil comme WAVE ou axe-core. Ces outils détectent les erreurs courantes :
- Contraste insuffisant sur les boutons "Ajouter au panier".
- Images sans texte alternatif (
alt). - Liens vagues ("Cliquez ici" sans contexte).
Si vous utilisez un thème premium, vérifiez sa documentation. Certains thèmes comme Astra ou OceanWP ont des options d'accessibilité intégrées, mais elles ne suffisent pas toujours. Il faut souvent ajuster le CSS personnalisé pour corriger les problèmes de contraste et de navigation au clavier.
Comment vérifier la compatibilité au clavier ?
Fermez votre souris. Essayez de naviguer sur votre site uniquement avec la touche Tab et Entrée. Si vous êtes bloqué, si un menu ne s'ouvre pas ou si un formulaire ne se remplit pas sans souris, votre site est non accessible. C'est le test ultime.
7 Fixes Techniques pour une Conformité Durable
Voici sept solutions concrètes que vous pouvez mettre en œuvre immédiatement. Chaque point inclut des exemples de code et des explications techniques.
1. Gestion du contraste des couleurs (CSS personnalisé)
Le contraste est souvent insuffisant sur les boutons d'appel à l'action (CTA). En WooCommerce, les thèmes utilisent parfois des couleurs claires sur fond clair. Voici comment corriger cela avec du CSS :
/* Exemple de correction de contraste pour les boutons */
button.button, a.button {
color: #000000; /* Texte noir */
background-color: #ffffff; /* Fond blanc */
border: 1px solid #000000; /* Bordure noire */
}
Pour les textes sur fond gris clair, utilisez des couleurs plus foncées. Vérifiez toujours avec un outil de calcul de contraste comme WebAIM.
2. Ajout de texte alternatif aux images produits
WooCommerce génère automatiquement des balises <img>, mais souvent sans attribut alt. Si une image est décorative, utilisez alt="". Sinon, décrivez le produit : "T-shirt bleu taille L".
Pour automatiser cela, vous pouvez utiliser un plugin comme WP Accessibility ou ajouter du code dans votre fichier functions.php :
// Exemple de fonction pour forcer l'attribut alt si manquant
add_filter('wp_get_attachment_image_attributes', function($atts) {
if (empty($atts['alt'])) {
$atts['alt'] = 'Image produit'; // Valeur par défaut
}
return $atts;
});
3. Navigation au clavier fluide (Focus visible)
Les lecteurs d'écran ont besoin de savoir où se trouve l'utilisateur. Le curseur de focus doit être toujours visible. Par défaut, certains thèmes cachent le focus. Voici comment le rétablir :
/* Rétablir le style de focus */
:focus {
outline: 2px solid #005fcc; /* Couleur contrastée */
outline-offset: 2px;
}
Assurez-vous que tous les éléments interactifs (boutons, liens, champs de formulaire) ont un style de focus clair.
4. Gestion des messages d'erreur dans les formulaires
Les formulaires de commande WooCommerce doivent indiquer clairement les erreurs. Si un champ est obligatoire mais vide, le message doit être visible et lisible par les lecteurs d'écran.
Utilisez la fonction woocommerce_error_message pour personnaliser les messages :
add_filter('woocommerce_error_message', function($message) {
return '<span class="error-message">' . $message . '</span>';
});
Cela permet d'ajouter une classe CSS spécifique pour un style plus clair et accessible.
5. Textes alternatifs pour les icônes SVG
Les icônes (panier, cœur, loupe) sont souvent des SVG sans texte alternatif. Ajoutez des balises <title> ou aria-label :
<!-- Exemple d'icône panier avec aria-label -->
<svg class="icon-cart" aria-label="Ajouter au panier">
<path ... />
</svg>
Si vous utilisez un plugin comme SVG Support, configurez-le pour ajouter automatiquement ces attributs.
6. Gestion des pop-ups et modales accessibles
Les pop-ups de newsletter ou de cookies doivent être clôturables avec la touche Échap ou via le clavier. Ils ne doivent pas bloquer l'arrière-plan.
Utilisez un plugin comme Cookie Notice