Checklist WCAG AA pour boutique en ligne : 15 points à vérifier
La liste ci-dessous rassemble les problèmes d'accessibilité les plus fréquents que nous observons dans les boutiques en ligne. Vous pouvez en vérifier la plupart vous-même, sans connaissances spécialisées — et notre scanner gratuit en détectera une partie pour vous. Les points sont classés du plus simple au plus difficile.
Texte et images
1. Contraste du texte (WCAG 1.4.3)
Du texte gris clair sur fond blanc : un grand classique des boutiques en ligne — et l'une des erreurs les plus fréquentes. Le texte courant doit avoir un contraste d'au moins 4,5:1, le texte de grande taille (titres au-delà d'environ 24 px) de 3:1. Vérifiez en particulier : les prix, les descriptions de produits, les textes de pied de page, les messages promotionnels.
2. Textes alternatifs des photos de produits (WCAG 1.1.1)
Chaque photo de produit a besoin d'un attribut alt avec une description, par ex. alt="Sac à dos urbain noir 20 l avec poche pour ordinateur portable".
Une personne aveugle « parcourt » la boutique avec un lecteur d'écran — sans descriptions,
elle achète à l'aveugle.
Marquez les images purement décoratives avec un alt="" vide.
3. Agrandissement du texte jusqu'à 200 % (WCAG 1.4.4)
Une personne malvoyante agrandit la page dans le navigateur (Ctrl et +). Vérifiez qu'à 200 %
rien ne « se déforme » : les prix ne sortent pas de l'écran, les boutons « Acheter » restent
visibles.
Ne bloquez pas le zoom par pincement sur mobile (user-scalable=no est une violation).
Navigation et clavier
4. Tout l'achat sans souris (WCAG 2.1.1)
Posez la souris et parcourez tout le processus avec la touche Tab : recherche d'un produit → fiche produit → panier → formulaire de livraison → paiement. Si vous « restez bloqué » quelque part — un client en situation de handicap s'y bloquera aussi.
5. Focus visible (WCAG 2.4.7)
En naviguant avec la touche Tab, vous devez voir clairement quel élément est actif
(contour, surlignage). Beaucoup de thèmes suppriment l'outline « parce que c'est
moche » — c'est une erreur. Vous pouvez le styliser élégamment, mais ne le supprimez pas.
6. Lien « Aller au contenu » (WCAG 2.4.1)
Un utilisateur au clavier ne devrait pas avoir à traverser 30 entrées de menu sur chaque page. Le premier élément de la page doit permettre de sauter directement au contenu principal.
7. Des titres de pages pertinents (WCAG 2.4.2)
Chaque page doit avoir un <title> unique : « Sacs à dos urbains – Boutique X »,
et non « Boutique X » partout. Le titre est la première chose qu'entend l'utilisateur
d'un lecteur d'écran.
Formulaires et parcours d'achat
8. Étiquettes des champs de formulaire (WCAG 3.3.2)
Chaque champ (nom, adresse, code postal, e-mail) doit avoir une étiquette associée
(<label>), et pas seulement un placeholder — le placeholder disparaît dès
qu'on saisit du texte et n'est pas lu correctement par tous les lecteurs d'écran.
9. Messages d'erreur lisibles (WCAG 3.3.1, 3.3.3)
« Erreur de formulaire » ne suffit pas. Indiquez ce qui ne va pas et comment corriger : « Le code postal doit comporter 5 chiffres ». L'erreur ne doit pas être signalée par la couleur seule (un cadre rouge ne dit rien à une personne aveugle).
10. Des boutons avec un nom clair (WCAG 4.1.2)
Une icône de panier sans aucun texte n'est pour un lecteur d'écran qu'un « bouton » — sans
indication de ce qu'il fait.
Ajoutez aria-label="Ajouter au panier" ou un texte visible.
Structure et multimédia
11. Hiérarchie des titres (WCAG 1.3.1)
Les titres sont la table des matières de la page : un <h1>, puis des
<h2>, des <h3> — sans sauter de niveau « parce que c'est
plus joli ». Modifiez l'apparence en CSS, pas avec les niveaux de titres.
12. Langue de la page (WCAG 3.1.1)
Assurez-vous d'avoir <html lang="fr">. Sans cela, le lecteur d'écran
lira votre offre française avec un accent anglais — cela peut sembler comique, mais c'est
un vrai problème.
13. Sous-titres et transcriptions pour les vidéos (WCAG 1.2.2)
Une vidéo de présentation d'un produit ? Ajoutez des sous-titres. Cela n'aide pas seulement les personnes malentendantes — la plupart des utilisateurs regardent les vidéos sans le son.
14. Taille des zones tactiles (WCAG 2.5.8)
Les boutons et liens sur mobile doivent faire au moins 24×24 px (44×44 px recommandé). Un petit « × » fermant une fenêtre pop-up ou des liens minuscules en pied de page frustrent tout le monde — pas seulement les personnes en situation de handicap.
15. Déclaration d'accessibilité
Informez les utilisateurs de l'état d'accessibilité de votre site et offrez-leur un canal pour signaler les problèmes. Cela instaure la confiance et témoigne de votre bonne volonté — vous pouvez générer une déclaration gratuitement avec notre outil (disponible en polonais).
Par où commencer ?
Vous n'avez pas à tout corriger d'un coup. Commencez par un scan gratuit, qui identifiera les points de cette liste présents sur votre site, puis corrigez les contrastes et les attributs alt (les corrections les plus fréquentes et les moins coûteuses), et attaquez ensuite le clavier et les formulaires. Le rapport PDF complet pour tout le domaine (jusqu'à 20 pages) coûte 35 €.
Vérifiez les points 1 à 12 automatiquement
Notre scanner vérifie la plupart des points techniques de cette liste en 60 secondes.