E-commerce et accessibilité : 7 erreurs qui vous coûtent des clients
15% de la population mondiale vit avec un handicap. En France, cela représente plus de 12 millions de personnes. Si votre site e-commerce n'est pas accessible, vous excluez potentiellement des millions de clients — et vous risquez des sanctions depuis l'entrée en vigueur de l'EAA.
Voici les 7 erreurs les plus courantes que nous détectons lors de nos audits, classées par impact business.
#1 Images produits sans texte alternatif
❌ Problème : Les lecteurs d'écran ne peuvent pas décrire vos produits aux utilisateurs malvoyants.
✅ Solution : Ajoutez un attribut alt descriptif à chaque image : alt="Robe rouge en coton, taille M, vue de face".
Critère WCAG : 1.1.1
#2 Formulaire de checkout inaccessible au clavier
❌ Problème : Les utilisateurs qui ne peuvent pas utiliser une souris ne peuvent pas finaliser leur achat.
✅ Solution : Assurez-vous que chaque champ est focusable avec Tab, que l'ordre est logique, et que le bouton "Payer" est atteignable au clavier.
Critère WCAG : 2.1.1
#3 Contraste insuffisant sur les prix et les CTA
❌ Problème : Le texte gris clair sur fond blanc est illisible pour les personnes avec une déficience visuelle — y compris vos clients de plus de 50 ans.
✅ Solution : Ratio minimum de 4.5:1 pour le texte normal, 3:1 pour le texte large. Utilisez un vérificateur de contraste.
Critère WCAG : 1.4.3
#4 Filtres et tris non accessibles
❌ Problème : Les menus déroulants de filtres (taille, couleur, prix) sont souvent des composants custom qui ignorent les standards ARIA.
✅ Solution : Utilisez les attributs role="listbox", aria-selected, et assurez la navigation clavier avec les flèches.
Critère WCAG : 4.1.2
#5 Messages d'erreur non annoncés
❌ Problème : Quand un champ est invalide, l'erreur s'affiche visuellement mais le lecteur d'écran ne la détecte pas.
✅ Solution : Ajoutez aria-live="polite" sur le conteneur d'erreurs et aria-describedby pour lier le message au champ.
Critère WCAG : 3.3.1
#6 Carrousel produits automatique
❌ Problème : Les carrousels qui défilent automatiquement sont inaccessibles : impossible de lire le contenu, pas de bouton pause.
✅ Solution : Ajoutez des contrôles précédent/suivant accessibles et un bouton pause. Ne démarrez jamais automatiquement.
Critère WCAG : 2.2.2
#7 Pop-up de cookies qui piège le focus
❌ Problème : Le bandeau cookies bloque le contenu mais le focus n'est pas piégé dedans — l'utilisateur clavier se retrouve perdu.
✅ Solution : Implémentez un focus trap : quand le bandeau est ouvert, Tab ne doit circuler qu'entre ses boutons.
Critère WCAG : 2.4.3
Combien de ces erreurs votre site contient-il ?
Audit gratuit en 2 minutes