Chaque fois qu'un client en situation de handicap ne peut pas parcourir votre processus de paiement, utiliser un filtre de produits ou lire vos descriptions, vous venez de perdre une vente. Plus d'un adulte sur quatre aux États-Unis a une forme de handicap. Ce n'est pas un petit segment de marché. C'est votre marché.
L'accessibilité d'un site n'est pas qu'une question d'éthique. C'est une obligation légale. L'Americans with Disabilities Act (ADA) exige que les entreprises rendent leurs services accessibles aux personnes en situation de handicap. Cela inclut les boutiques en ligne. Chaque année, des milliers de sites reçoivent des mises en demeure pour manquements à l'accessibilité, et les sites e-commerce sont les plus visés. Cet article explique ce que l'accessibilité signifie, pourquoi elle compte pour votre boutique, ce que la loi exige et comment la mettre en œuvre sans outils spécialisés coûteux.
Qu'est-ce que l'accessibilité d'un site web ?
L'accessibilité d'un site signifie que tout le monde peut l'utiliser, y compris les personnes en situation de handicap. Cela comprend les personnes aveugles ou malvoyantes, sourdes ou malentendantes, celles qui ont un handicap moteur rendant l'usage de la souris difficile, celles qui ont des troubles cognitifs ou des troubles de l'apprentissage, ou d'autres conditions qui influencent leur façon d'utiliser le web.
Les sites accessibles fonctionnent avec des technologies d'assistance comme les lecteurs d'écran (des logiciels qui lisent le texte à voix haute), la navigation au clavier seul (pour les personnes qui ne peuvent pas utiliser de souris) et les outils d'agrandissement. Un site accessible utilise aussi un langage clair, un contraste de couleurs suffisant, une structure de titres correcte et des étiquettes de formulaire que les lecteurs d'écran comprennent.
Le principe clé : vos clients doivent pouvoir faire ce pour quoi ils sont venus. Ils doivent pouvoir parcourir, filtrer, lire les descriptions, ajouter au panier et finaliser le paiement, quelle que soit la technologie d'assistance ou l'adaptation qu'ils utilisent.
Qu'est-ce que l'ADA et pourquoi s'applique-t-elle à votre boutique ?
L'Americans with Disabilities Act (ADA), adopté en 1990, est une loi fédérale américaine qui interdit la discrimination envers les personnes en situation de handicap. Le titre III de l'ADA exige que toutes les entreprises ouvertes au public offrent un accès égal aux personnes en situation de handicap. Cela inclut les sites web et les services en ligne. La loi ne prévoit pas d'exemption pour les petites entreprises ni pour les commerces en ligne.
Votre boutique en ligne compte comme un lieu ouvert au public au sens de l'ADA. Votre site doit donc être accessible. Vous ne pouvez pas faire valoir que votre boutique est trop petite, trop récente ou que l'accessibilité coûte trop cher. La loi s'applique. Les tribunaux ont jugé de façon constante que l'ADA s'applique aux sites web, et le ministère américain de la Justice a déclaré que l'accessibilité des sites est une question de droits civiques, pas une option.
WCAG 2.1 niveau AA : la norme d'accessibilité
La norme d'accessibilité web utilisée dans les affaires juridiques et les exigences de conformité s'appelle WCAG (Web Content Accessibility Guidelines) 2.1 niveau AA. Les WCAG sont maintenues par le World Wide Web Consortium (W3C), une organisation à but non lucratif qui fixe les normes du web.
Les WCAG 2.1 niveau AA comprennent des consignes dans quatre grands domaines :
Perceptible : les utilisateurs peuvent voir ou entendre votre contenu
Votre contenu doit être présenté de façon que les clients puissent le percevoir. Cela veut dire fournir des descriptions textuelles (texte alternatif) pour toutes les images de produits, ajouter des sous-titres aux vidéos, veiller à ce que les textes et les boutons aient un contraste de couleurs suffisant (ratio minimum de 4,5:1 pour le texte standard) et éviter les contenus qui clignotent plus de 3 fois par seconde, ce qui peut provoquer des crises d'épilepsie.
Utilisable : les utilisateurs peuvent naviguer et interagir avec votre boutique
Les utilisateurs doivent pouvoir parcourir votre boutique avec un clavier seul (sans souris). Les liens et les boutons doivent être accessibles au clavier. Les formulaires doivent avoir des étiquettes claires que les lecteurs d'écran comprennent. Votre boutique ne doit pas piéger les utilisateurs du clavier dans des boucles sans fin ni imposer des interactions chronométrées qu'ils ne peuvent pas ajuster. Les éléments de menu et les champs de formulaire doivent être faciles à trouver et à utiliser.
Compréhensible : les utilisateurs comprennent ce que dit et fait votre boutique
Votre boutique doit être facile à comprendre. Utilisez un langage clair et des phrases courtes. Définissez le jargon à sa première utilisation. Organisez vos pages de façon logique, avec une structure de titres correcte (un seul H1 par page, suivi de H2, puis de H3 dans l'ordre). Expliquez clairement les erreurs de validation des formulaires. Gardez un site cohérent pour que les utilisateurs puissent prévoir le fonctionnement de la navigation et des interactions.
Robuste : votre boutique fonctionne avec les technologies d'assistance
Votre code doit être écrit correctement pour que les lecteurs d'écran et d'autres outils d'assistance puissent le comprendre. Cela veut dire utiliser un balisage HTML sémantique correct (les boutons sont de vrais éléments button, pas des div habillés pour ressembler à des boutons), une hiérarchie de titres correcte et des étiquettes ARIA quand il le faut pour décrire des éléments interactifs complexes. Votre boutique doit fonctionner sur tous les navigateurs et appareils.
Obstacles d'accessibilité courants dans les boutiques en ligne
Voici les problèmes d'accessibilité les plus fréquents dans les boutiques e-commerce :
Texte alternatif absent ou insuffisant pour les images de produits
Beaucoup de boutiques n'ont aucun texte alternatif pour les images de produits, ou un texte vague comme « image » ou « photo produit ». Les utilisateurs de lecteurs d'écran ne voient pas les images. Le texte alternatif doit décrire ce qui est important dans l'image. Pour un t-shirt rouge, un bon texte alternatif est « t-shirt rouge en coton à col rond avec poche poitrine », pas « chemise » ni « photo chemise rouge ». Pour un sélecteur de variante de produit, le texte alternatif peut décrire clairement l'échantillon de couleur ou l'option de style. Chaque image de produit a besoin d'un texte alternatif précis et descriptif.
Formulaires sans étiquettes correctes
Quand un champ de formulaire (e-mail, téléphone, adresse) n'a pas d'étiquette associée, ou que l'étiquette n'est qu'un texte indicatif visuel, les utilisateurs de lecteurs d'écran ne savent pas quoi saisir. Les formulaires bien étiquetés ont des éléments d'étiquette invisibles mais accessibles qui disent aux lecteurs d'écran à quoi sert chaque champ.
Pas de navigation au clavier
Certains sites exigent une souris pour naviguer ou finaliser un achat. Les utilisateurs du clavier seul ne peuvent pas utiliser les menus déroulants, ne voient pas quel élément est sélectionné ou ne peuvent pas passer d'un champ à l'autre dans un ordre logique avec la touche Tab. Chaque fonction doit être accessible au clavier. Le focus du clavier doit être visible sur la page pour que les utilisateurs sachent où ils se trouvent.
Mauvais contraste des couleurs
Un texte gris clair sur fond blanc peut vous sembler lisible. Il ne l'est pas pour les personnes malvoyantes. Le niveau AA des WCAG exige un ratio de contraste d'au moins 4,5:1 pour le texte normal. Les boutons, les liens et tout texte que les utilisateurs doivent lire doivent respecter cette norme. Vérifiez votre contraste avec un outil gratuit de vérification du contraste.
Structure de titres confuse
Les utilisateurs de lecteurs d'écran naviguent souvent en sautant d'un titre à l'autre. Si votre page passe de H1 à H3 puis à H2, ou utilise les titres uniquement pour le style, les lecteurs d'écran donnent une expérience confuse. Utilisez les titres dans un ordre logique pour structurer votre page. Un seul H1 par page, puis des H2 pour les sections principales, des H3 pour les sous-sections. Ne sautez jamais de niveau de titre.
Boutons et liens sans but clair
Un bouton qui dit « cliquez ici » n'apprend rien aux utilisateurs de lecteurs d'écran sur ce que fait le clic. Utilisez un texte de bouton descriptif : « Ajouter au panier », « Voir les avis », « Passer au paiement ». Si vous avez besoin d'un bouton avec une icône, ajoutez un texte ou une étiquette ARIA qui décrit l'action. Chaque élément interactif doit avoir une étiquette claire et descriptive.
Menus déroulants et filtres inaccessibles
Les menus de filtres de produits, les listes de catégories et les options de tri qui ne fonctionnent qu'à la souris sont des obstacles fréquents. Les utilisateurs du clavier doivent pouvoir y accéder de la même façon. Les composants interactifs complexes ont besoin de rôles ARIA et d'une prise en charge du clavier pour fonctionner avec les technologies d'assistance.
Comment rendre votre boutique accessible
L'accessibilité n'exige pas d'engager un consultant coûteux ni d'acheter un logiciel spécialisé. Commencez par les bases :
1. Rédigez un texte alternatif pour toutes les images de produits
C'est le changement qui a le plus d'impact. Passez en revue vos produits et rédigez un texte alternatif descriptif pour chaque image. Décrivez le produit, sa couleur, sa matière, son état et ses particularités. Testez votre texte alternatif en le lisant à voix haute. Une personne qui ne voit pas l'image comprend-elle le produit ? Sinon, améliorez-le.
2. Vérifiez que tous les formulaires ont des étiquettes correctes
Chaque champ de formulaire doit avoir un élément d'étiquette associé dans votre code. Ne vous appuyez pas sur le texte indicatif. Retirez le texte indicatif quand le champ est sélectionné, ou gardez-le mais ajoutez une vraie étiquette. Pour les groupes de cases à cocher et de boutons radio, regroupez-les et étiquetez-les clairement. Les erreurs de validation doivent être précises et dire exactement aux utilisateurs quoi corriger.
3. Vérifiez que la navigation au clavier fonctionne
Testez toute votre boutique avec le clavier seul. Appuyez sur Tab pour naviguer. Pouvez-vous atteindre chaque bouton, chaque lien et chaque formulaire ? Voyez-vous où se trouve le focus ? L'ordre de tabulation est-il logique (de gauche à droite, de haut en bas) ? Si les utilisateurs du clavier restent bloqués ou ne peuvent pas atteindre un élément, corrigez-le. La plupart des obstacles d'accessibilité sont des obstacles au clavier.
4. Vérifiez et améliorez le contraste des couleurs
Utilisez un outil gratuit de vérification du contraste sur votre fiche produit, vos boutons, vos liens et vos étiquettes de formulaire. Vérifiez que le texte respecte un contraste de 4,5:1 pour le texte normal et de 3:1 pour le grand texte (18 pt ou plus). Ne vous appuyez pas sur la couleur seule pour transmettre une information (par exemple « les articles en rouge sont en promotion »). Ajoutez des étiquettes de texte ou des icônes pour soutenir le sens.
5. Corrigez votre structure de titres
Auditez la structure de vos pages. Vous devez avoir un seul H1 (le titre principal de la page), puis des H2 pour les sections principales, des H3 pour les sous-sections. Ne sautez jamais de niveau de titre. Utilisez les titres pour structurer le contenu de façon logique, pas pour le style. Si vous avez besoin d'un texte stylisé qui n'est pas un vrai titre, utilisez une div et du CSS, pas une balise de titre.
6. Rédigez des textes de liens et de boutons clairs
Les utilisateurs de lecteurs d'écran affichent souvent la liste de tous les liens d'une page. Les liens doivent avoir du sens hors contexte. « En savoir plus sur les options de livraison » vaut mieux que « en savoir plus ». « Voir les avis sur le produit » vaut mieux que « lire les avis ». Les boutons doivent décrire clairement leur action : « Ajouter au panier », « Passer au paiement », « Enregistrer pour plus tard ».
7. Testez avec une technologie d'assistance
Téléchargez un lecteur d'écran gratuit pour Windows ou utilisez les outils d'accessibilité intégrés à Mac et à iPhone. Écoutez le rendu de votre site. Pouvez-vous finaliser un achat avec le seul clavier et un lecteur d'écran ? C'est le vrai test d'accessibilité. Beaucoup d'obstacles deviennent évidents quand vous essayez d'utiliser votre boutique comme un utilisateur aveugle ou du clavier seul.
Tests et audits d'accessibilité
Après vos modifications, testez l'accessibilité de votre boutique. Commencez par ces outils :
Outils de test automatique
Des outils gratuits d'analyse d'accessibilité, dont Lighthouse (intégré à Chrome), analysent vos pages et signalent les problèmes courants comme l'absence de texte alternatif, un faible contraste et une mauvaise structure de titres. Ces outils détectent peut-être 30 % des problèmes d'accessibilité : c'est un point de départ, pas la réponse complète. Utilisez-les pour un contrôle rapide, mais ne supposez pas qu'un résultat sans alerte veut dire que votre site est entièrement accessible.
Test au clavier
Parcourez votre site avec seulement Tab, Maj+Tab, Entrée et les flèches. Pas de souris. C'est le test le plus important. Pouvez-vous accomplir chaque tâche ? Restez-vous bloqué ? Le focus est-il visible ? L'ordre de tabulation a-t-il du sens ? Si la navigation au clavier est cassée, votre boutique ne respecte pas la norme d'accessibilité, quoi que disent les outils automatiques.
Test avec lecteur d'écran
Écoutez votre site avec un lecteur d'écran (sous Windows ou sur Mac). Le lecteur décrit-il clairement les images de produits ? Comprenez-vous les étiquettes de formulaire ? La navigation a-t-elle du sens ? Y a-t-il des boutons ou des liens inexpliqués ? Les audits d'accessibilité professionnels font souvent appel à des testeurs aveugles, mais vous pouvez repérer les problèmes majeurs en faisant vous-même un test de base avec un lecteur d'écran.
Revue manuelle du code
Vérifiez que votre code HTML utilise un balisage sémantique correct. Les boutons doivent être des éléments button, pas des div stylisées. Les liens doivent être des balises d'ancre. Les champs de formulaire ont besoin d'éléments label. Les titres doivent être des balises h1, h2, h3 dans l'ordre, pas h1, h3, h2. Un bon HTML sémantique est la base de l'accessibilité.
Comment WEMASY vous aide pour l'accessibilité
Le créateur de site web de WEMASY est conçu en pensant à l'accessibilité. La plateforme comprend une structure HTML sémantique, une gestion correcte des formulaires avec des étiquettes accessibles, des menus et des fonctions de panier utilisables au clavier, et des outils pour ajouter facilement du texte alternatif aux images. Quand vous construisez votre boutique avec WEMASY, le HTML sous-jacent est déjà structuré pour l'accessibilité. Vous n'héritez pas d'un code inaccessible venant de la plateforme.
Cela ne veut pas dire que votre site est automatiquement entièrement accessible : vous devez toujours fournir un bon texte alternatif, utiliser un langage clair et tester avec de vrais utilisateurs. Mais la base de WEMASY supprime beaucoup d'obstacles courants qui affectent d'autres plateformes e-commerce. Découvrez ce qui est inclus dans chaque offre sur notre page des tarifs.
L'intérêt commercial de l'accessibilité
Au-delà de la conformité légale, l'accessibilité est bonne pour les affaires. Les sites accessibles sont plus faciles à utiliser pour tout le monde, pas seulement pour les personnes en situation de handicap. Un langage clair, un bon contraste, une structure logique et la navigation au clavier profitent aux utilisateurs plus âgés, à ceux qui sont sur mobile, dans un environnement bruyant ou avec une connexion lente. Un site accessible aux personnes en situation de handicap est un meilleur site pour tous les utilisateurs.
Plus directement : 1 adulte américain sur 4 a un handicap. Cela représente environ 65 millions de personnes. Si votre boutique n'est pas accessible, vous excluez un énorme marché. Vous laissez aussi de l'argent sur la table. Les acheteurs aveugles et malvoyants dépensent des milliards en ligne. Ils veulent acheter dans votre boutique. Rendez-le possible.
Côté juridique, le risque est réel. Plus de 5 000 procès sur l'accessibilité de sites web ont été déposés en 2025. Les sites e-commerce représentent 70 % de ces affaires. Une mise en demeure pour manquements à l'accessibilité coûte du temps et des frais juridiques pour se défendre. Régler à l'amiable sans corriger les problèmes de fond invite seulement à d'autres plaintes. L'approche la plus judicieuse est de corriger votre site dès maintenant, de documenter vos efforts et d'éviter complètement le problème.
Pour commencer
Si votre boutique n'est pas accessible, pas de panique. Commencez par les corrections les plus efficaces : texte alternatif, navigation au clavier et contraste. Ces trois changements couvrent la plupart des obstacles. Testez avec la navigation au clavier et un lecteur d'écran. Corrigez les problèmes que vous trouvez. Documentez votre travail. Retestez régulièrement, surtout après avoir modifié votre site. L'accessibilité n'est pas un projet ponctuel : c'est une pratique continue pour construire de façon inclusive.
FAQ
Ma petite boutique est-elle vraiment soumise à l'ADA ?
Oui. L'ADA s'applique à toutes les entreprises ouvertes au public, quelle que soit leur taille. Il n'y a pas d'exemption pour les petites entreprises. Si vous vendez en ligne, votre site est concerné.
Quelle est la différence entre accessible et conforme ?
Accessible signifie que votre site est réellement utilisable par les personnes en situation de handicap. Conforme signifie qu'il respecte une norme technique comme les WCAG 2.1 niveau AA. Un site peut respecter techniquement la norme et rester difficile à utiliser, ou être très utilisable sans être techniquement parfait. L'objectif est d'avoir les deux : accessible en pratique et conforme à la norme.
Dois-je engager quelqu'un pour rendre ma boutique accessible ?
Pas forcément. Si votre boutique a des problèmes de base (texte alternatif manquant, mauvais contraste, navigation au clavier cassée), vous pouvez en corriger beaucoup vous-même. Rédigez le texte alternatif, vérifiez le contraste avec un outil gratuit, testez avec votre clavier et un lecteur d'écran. Si votre site est construit sur une plateforme moderne avec une structure HTML correcte, corriger l'accessibilité est souvent simple. Les grands sites aux fonctions complexes peuvent profiter d'un audit professionnel, mais les petites boutiques peuvent souvent corriger leurs principaux obstacles en interne.
Que faire si je reçois une mise en demeure sur l'accessibilité ?
Prenez-la au sérieux. Ne l'ignorez pas. Les mises en demeure donnent en général un délai pour corriger les problèmes. Travaillez avec votre développeur ou le support de votre plateforme pour traiter les manquements précis cités. Documentez tout ce que vous faites. Vous pouvez aussi consulter un avocat qui connaît le droit de l'accessibilité. Régler à l'amiable sans corriger les problèmes de fond n'est pas une solution durable : corrigez le site.
Rendre mon site accessible ralentira-t-il le chargement ?
Non. L'accessibilité et la performance sont deux choses distinctes. Un site peut être rapide et inaccessible, ou lent et accessible. Le HTML sémantique (la structure de code nécessaire à l'accessibilité) est souvent plus léger et plus rapide qu'un code mal écrit. Beaucoup d'améliorations d'accessibilité, comme une bonne structure de titres et un langage clair, n'ont aucun effet sur la vitesse.
Les WCAG 2.1 niveau AA couvrent-elles tout ce dont j'ai besoin pour être conforme à la loi ?
Les WCAG 2.1 niveau AA sont la norme citée dans la plupart des affaires juridiques d'accessibilité. C'est la référence que les tribunaux ont utilisée pour juger si un site est accessible. Respecter les WCAG 2.1 niveau AA est le meilleur moyen de montrer que vous avez pris l'accessibilité au sérieux et respecté la norme légale.
À lire aussi : Politique de confidentialité, consentement aux cookies et RGPD pour votre boutique et Comment protéger votre marque et vos produits contre la copie.