Accessibilité e-commerce : la checklist pour rendre vos contenus visuels vraiment compréhensibles

Pourquoi les audits d'accessibilité classiques ne suffisent pas en e-commerce

Les guides d'accessibilité retail se concentrent généralement sur la navigation, la comparaison d'attributs produits (taille, couleur, matières) et le tunnel de commande. Or une page produit peut cocher toutes ces cases — textes alternatifs présents, navigation clavier, checkout accessible — et laisser malgré tout un client en situation de handicap sans les informations dont il a besoin pour acheter.

Le secteur de la beauté illustre parfaitement ce point aveugle : la famille de teinte, le sous-ton, le fini, la texture ou le rendu selon les carnations sont des informations communiquées presque exclusivement par le visuel. Pour un acheteur aveugle, ces détails doivent être traduits en texte. Des créatrices de contenu aveugles comme Molly Burke ou Emily Davison (blog Fashioneyesta) l'ont rappelé publiquement aux marques : un nom de teinte comme « 210N » ne suffit pas, il faut décrire le sous-ton, la profondeur, le fini et ce qui distingue une teinte d'une autre dans la gamme.

Ce constat dépasse la beauté : dès qu'une information décisive pour l'achat n'existe que sous forme visuelle, l'accessibilité de la fiche produit est compromise, même si le site est techniquement conforme point par point.

Le coût mesurable des attributs alt manquants

L'attribut alt (le texte alternatif décrivant une image pour les technologies d'assistance) est l'exigence de base : son absence viole le critère de succès 1.1.1 « Contenu non textuel » des WCAG (Web Content Accessibility Guidelines, le référentiel international d'accessibilité web). Concrètement, un lecteur d'écran ignore totalement une image sans alt : l'utilisateur aveugle ne sait même pas qu'elle existe.

Le coût est aussi mesurable côté référencement : Google Lighthouse (l'outil d'audit de Google) sanctionne les alt manquants jusqu'à 6 points sur le score Accessibilité et 8 points sur le score SEO. Accessibilité et visibilité organique convergent donc sur ce point précis.

Le problème surgit massivement dans deux situations : les migrations de contenu et les opérations éditoriales quotidiennes. Un cas documenté par l'agence Metadrop est parlant : une migration Drupal 9 vers Drupal 11 d'un site d'actualités sportives multilingue a fait remonter environ 12 000 images avec des alt manquants ou incorrects (dont des alt en anglais sur la version espagnole du site), détectés via Screaming Frog. La cause racine était en amont : les images n'avaient jamais eu d'alt sur le site d'origine, et la migration a propagé le manque.

Remédier sans développement : l'exemple du module Image Alt Fallback

Sur Drupal, le module contribué Image Alt Fallback comble automatiquement les alt manquants selon des règles configurables, sans développement : utiliser le libellé de l'entité parente (par exemple le titre de l'article) ou marquer l'image comme décorative, avec un paramétrage global et des règles par type de contenu et par champ. Le module n'écrase jamais un alt existant, agit au rendu sans modifier la base de données, et fournit une vue d'aide listant les médias filtrables par statut d'alt pour identifier les images problématiques sans compétence technique.

Point important souligné par ses auteurs : ce type d'outil est un filet de sécurité, pas une solution permanente. L'objectif de long terme reste de stocker un alt pertinent à la source, sur l'entité média elle-même — ce que les versions récentes de Drupal imposent d'ailleurs par défaut en rendant le champ obligatoire.

Ce que révèlent les tests réels avec des lecteurs d'écran

UsableNet a fait tester par un utilisateur aveugle de lecteur d'écran plusieurs sites beauté majeurs. Les résultats montrent qu'un outil peut sembler accessible élément par élément et échouer quand on tente de compléter la tâche de bout en bout.

Shade finders : le résultat existe, mais reste inexploitable

Un shade finder (outil de recommandation de teinte pour fond de teint ou soin teinté) testé sur un grand site retail présentait deux problèmes : le résultat était annoncé par le lecteur d'écran mais le focus clavier ne se déplaçait pas dans la fenêtre de résultat, et en cas d'absence de correspondance, des images non étiquetées apparaissaient dans la navigation sans aucune information sur leur rôle. Sur un autre site, l'instruction demandait de centrer son visage dans un cercle visible à l'écran — une consigne purement visuelle, sans guidage non visuel, que le testeur n'a franchie que par tâtonnement. Enfin, deux sites sur quatre demandaient de sélectionner sa carnation parmi des images qui n'étaient pas activables comme éléments web indépendants, sans indication de l'option sélectionnée.

Virtual try-on : opérable au clavier ne veut pas dire compréhensible

Les WCAG exigent que toute fonctionnalité soit utilisable au clavier seul, y compris dans les outils interactifs. Sur un premier outil d'essayage virtuel testé, l'utilisateur pouvait naviguer au clavier et sélectionner produits et teintes, mais aucun retour auditif ne confirmait ses sélections ; des boutons « Slide précédent / suivant » étaient annoncés comme désactivés (« Dimmed ») alors qu'ils restaient activables, et les images produits n'avaient pas de description. Sur un second outil, le parcours bloquait à l'étape caméra : réponse du lecteur d'écran ralentie, focus erratique, consigne incompréhensible. À noter : même si ces widgets sont fournis par des prestataires tiers, le marchand qui les publie reste responsable de leur compatibilité avec les technologies d'assistance.

Ingrédients et allergènes : des données vitales piégées dans des images

Les clients allergiques ont besoin de la liste complète des ingrédients. Certains sites testés la présentaient correctement en texte brut, parfaitement lisible au lecteur d'écran. D'autres non : un bouton « Voir plus » censé dérouler la liste ne fonctionnait pas au lecteur d'écran, un panneau d'ingrédients était une simple photographie de l'étiquette, et un tableau d'ingrédients sans en-têtes rendait impossible de comprendre quelles informations allaient ensemble.

La checklist : rendre les contenus visuels e-commerce compréhensibles

1. Attributs alt et images

• Auditer l'ensemble du catalogue avec un crawler (type Screaming Frog) pour détecter les alt manquants, vides ou dans la mauvaise langue, notamment après une migration.
• Rendre le champ alt obligatoire dans le back-office, ou documenter explicitement les cas où une image est décorative (alt vide volontaire).
• Mettre en place un mécanisme de repli automatique (comme Image Alt Fallback sur Drupal) en filet de sécurité, tout en corrigeant les contenus à la source.
• Vérifier la traduction des alt sur les sites multilingues : un alt dans la mauvaise langue est aussi un défaut.

2. Descriptions produit : traduire le visuel en texte

• Décrire en texte toute caractéristique communiquée visuellement : teinte, sous-ton, profondeur, fini, texture, et ce qui distingue une variante d'une autre dans la gamme.
• Ne jamais s'appuyer sur un seul nom ou code de nuance (« 210N ») comme unique information de choix.
• Mentionner les caractéristiques physiques du packaging utiles à l'identification non visuelle du produit (relief, forme distinctive, braille) quand elles existent.

3. Outils interactifs (shade finder, essayage virtuel)

• Tester le parcours complet, pas seulement les composants isolés : c'est à l'enchaînement des étapes que les outils échouent.
• Vérifier que le focus clavier suit l'action (déplacement vers la fenêtre de résultat, par exemple) et que chaque sélection produit un retour non visuel.
• Bannir les consignes purement visuelles (« centrez votre visage dans le cercle ») sans alternative non visuelle.
• S'assurer que les états des contrôles (actif, désactivé, sélectionné) sont annoncés correctement par le lecteur d'écran.
• Exiger de ses prestataires de widgets tiers des preuves de compatibilité avec les technologies d'assistance : la responsabilité reste celle du site qui les publie.

4. Données réglementaires et sensibles

• Publier les ingrédients, allergènes et informations de sécurité en texte réel, jamais en photo d'étiquette.
• Structurer les tableaux avec de vrais en-têtes pour que les associations d'informations restent compréhensibles au lecteur d'écran.
• Tester les boutons de type « Voir plus » avec un lecteur d'écran : un contenu masqué inaccessible équivaut à un contenu absent.

5. Gouvernance et priorisation

• Utiliser Lighthouse et le critère WCAG 1.1.1 comme points d'entrée de priorisation : les alt manquants pénalisent à la fois accessibilité et SEO, leur correction offre un double retour.
• Compléter les audits automatiques par des tests réels avec des utilisateurs de technologies d'assistance : les cas rapportés montrent que les blocages majeurs échappent aux outils.
• Intégrer l'accessibilité dans les workflows éditoriaux (champs obligatoires, vues de contrôle, revues de contenu) plutôt que de la traiter en projet ponctuel.