Audit de conformité RGAA

Les images purement décoratives (frises, feuilles d'olivier, textures de fond) portent des descriptions comme « feuille décorative verte » : le lecteur d'écran les annonce toutes, et la lecture d'une fiche produit est encombrée d'une dizaine d'annonces inutiles avant d'arriver au prix.

Piste de correction : Marquer les images décoratives pour qu'elles soient ignorées à la lecture assistée (alt vide, sans title). Ne décrire que les images qui apportent une information. À faire valider par votre développeur ou votre agence web.

Les descriptions des photos de produits existent mais ne décrivent rien : « savon-72dpi-final-V2 » sur la photo du savon au lait d'ânesse, « bannière printemps » sur la promotion en cours. Un client aveugle sait qu'il y a une image, mais toujours pas quel produit il regarde ni ce que dit la promotion.

Capture 1 · Fiche produit : savon au lait d'ânesse : l'alternative de la photo principale est un nom de fichier

Piste de correction : Réécrire chaque alternative pour qu'elle décrive le contenu utile de l'image (« Savon au lait d'ânesse, pain de 100 g » plutôt qu'un nom de fichier). C'est un travail éditorial, pas technique. À faire valider par votre développeur ou votre agence web.

L'infographie « La saponification à froid en 6 étapes » de la page Notre atelier n'a qu'une alternative courte (« schéma de fabrication ») : les 6 étapes, leurs températures et leurs durées ne sont données nulle part en texte. Toute l'explication du savoir-faire, argument central de la marque, est invisible au lecteur d'écran.

Piste de correction : Ajouter sous l'infographie une description détaillée en texte (les 6 étapes rédigées), ou un lien « version texte » vers ce contenu. À faire valider par votre développeur ou votre agence web.

Les bandeaux promotionnels (« Livraison offerte dès 39 € », « 3 savons achetés, le 4e offert ») sont des images contenant du texte : impossible d'agrandir ce texte proprement, et il disparaît si l'image ne charge pas. Ces offres commerciales sont les informations les plus périssables du site, et les moins accessibles.

Capture 1 · Accueil : le texte de l'offre est dessiné dans l'image

Piste de correction : Recomposer ces bandeaux en vrai texte stylé en CSS sur fond graphique, plutôt qu'en texte dessiné dans l'image. À faire valider par votre développeur ou votre agence web.

Le cadre de la vidéo de présentation porte le titre technique « youtube-embed-player-1 » : au lecteur d'écran, rien n'indique qu'il s'agit de la visite de l'atelier.

Piste de correction : Remplacer le titre du cadre par un intitulé parlant, par exemple « Vidéo : visite de l'atelier de la savonnerie ». À faire valider par votre développeur ou votre agence web.

Deux informations ne sont données que par la couleur : la disponibilité des produits (pastille verte ou rouge, sans texte) et les champs en erreur du tunnel (bordure rouge seule). Un client daltonien ne sait ni quel savon est en stock, ni quel champ corriger pour finir sa commande.

Capture 1 · Nos savons (catégorie) : la disponibilité n'est signalée que par la couleur

Piste de correction : Doubler chaque code couleur d'un texte ou d'un pictogramme : « En stock » / « Épuisé » à côté de la pastille, et un message texte sous chaque champ en erreur. À faire valider par votre développeur ou votre agence web.

La vidéo de visite de l'atelier (4 minutes) n'a aucune transcription : une personne sourde, ou simplement sans casque au bureau, n'a accès à rien de ce qui y est raconté sur la fabrication et l'origine des ingrédients.

Piste de correction : Publier sous la vidéo une transcription texte de ce qui est dit et montré. Une page de texte suffit, et elle profite aussi au référencement. À faire valider par votre développeur ou votre agence web.

Les sous-titres de la vidéo sont ceux générés automatiquement par la plateforme, jamais relus : « saponification à froid » devient « ça pond ni fications à froid », les noms des huiles sont systématiquement faux. Pour une personne sourde, le message est incompréhensible, voire ridicule pour la marque.

Piste de correction : Corriger les sous-titres automatiques dans l'interface de la plateforme vidéo (une heure de travail pour 4 minutes de vidéo), ou téléverser un fichier de sous-titres relu. À faire valider par votre développeur ou votre agence web.

Des passages entiers de la vidéo montrent des gestes sans les commenter (le démoulage, la coupe, l'estampillage) : la voix off parle d'autre chose pendant ce temps. Une personne aveugle n'a aucun moyen de savoir ce qui est montré, alors que c'est l'argument « fait main » qui est en jeu.

Piste de correction : Ajouter une audiodescription, ou plus simple pour une prochaine vidéo : faire décrire par la voix off ce qui est montré à l'écran au moment où on le montre. À faire valider par votre développeur ou votre agence web.

Les liens « En savoir plus » se répètent onze fois sur la page d'accueil et les listes de produits, chacun menant vers un produit différent : un client au lecteur d'écran, qui navigue de lien en lien, entend onze fois la même chose sans savoir où chaque lien mène.

Capture 1 · Accueil : trois liens identiques vers trois produits différents

Piste de correction : Rendre chaque lien explicite : « En savoir plus sur le savon au lait d'ânesse », en texte ou en intitulé accessible. Le nom du produit doit faire partie du lien. À faire valider par votre développeur ou votre agence web.

Le sélecteur de quantité de la fiche produit (les boutons « + » et « − » maison) ne restitue rien au lecteur d'écran : la quantité change à l'écran, mais NVDA n'annonce ni le rôle du composant ni la nouvelle valeur. Un client aveugle ne sait pas combien de savons il s'apprête à commander.

Piste de correction : Utiliser un vrai champ numérique natif, ou compléter le composant maison avec les rôles et états requis pour que la valeur courante soit annoncée à chaque changement. À faire valider par votre développeur ou votre agence web.

Le carrousel « Nos best-sellers » de l'accueil n'est utilisable qu'à la souris : les flèches ne prennent jamais le focus au clavier, et les produits des panneaux 2 et 3 sont donc inatteignables sans souris. Ce sont pourtant les produits que la savonnerie a choisi de mettre en avant.

Capture 1 · Accueil : les flèches ne prennent jamais le focus clavier

Piste de correction : Rendre les flèches du carrousel focusables et activables au clavier (vrais boutons), ou remplacer le carrousel par une grille de produits, souvent plus efficace commercialement. À faire valider par votre développeur ou votre agence web.

Choisir un parfum dans la liste déroulante de la fiche produit recharge toute la page sans prévenir et renvoie le focus tout en haut : au clavier ou au lecteur d'écran, on perd sa position et il faut retraverser toute la page pour revenir au bouton d'achat. Le même comportement se produit au choix du mode de livraison.

Piste de correction : Mettre à jour le prix et la photo sans recharger la page, ou déclencher le changement par un bouton « Appliquer » explicite plutôt qu'à la sélection. À faire valider par votre développeur ou votre agence web.

L'ajout au panier n'est confirmé que par une pastille visuelle furtive en haut à droite : rien n'est annoncé au lecteur d'écran. Nos tests avec NVDA le confirment : le client aveugle clique, n'entend rien, clique à nouveau, et se retrouve avec 3 exemplaires du même savon dans le panier.

Piste de correction : Faire annoncer la confirmation par les lecteurs d'écran (zone de message de statut) : « Savon au lait d'ânesse ajouté au panier, 3 articles ». À faire valider par votre développeur ou votre agence web.

Les titres de pages existent mais ne distinguent rien : les trois étapes du tunnel s'appellent toutes « Commande · Savonnerie du Vieux Port », et toutes les fiches produits « Boutique ». Dans les onglets, l'historique ou au lecteur d'écran, impossible de savoir où l'on est, notamment au moment sensible du paiement.

Capture 1 · Panier : trois onglets indistinguables au moment de payer

Piste de correction : Donner à chaque page un titre propre qui commence par l'information spécifique : « Paiement, étape 3 sur 3 · Savonnerie du Vieux Port », « Savon au lait d'ânesse · Savonnerie du Vieux Port ». À faire valider par votre développeur ou votre agence web.

Les mentions en anglais qui parsèment les pages (« handmade », « best-sellers », « cold process ») ne sont pas signalées comme telles dans le code : les voix de synthèse françaises les prononcent à la française (« annd-mad »), au point qu'on ne reconnaît pas les mots.

Piste de correction : Indiquer le changement de langue sur ces mots dans le code (attribut de langue), ou, plus simple, les remplacer par leurs équivalents français : « fait main », « meilleures ventes », « saponification à froid ». À faire valider par votre développeur ou votre agence web.

Des balises de titre sont utilisées pour grossir du texte qui n'en est pas un : « Livraison en 48 h » et « Paiement sécurisé » dans le pied de page sont des titres de niveau 3. Le sommaire de la page entendu au lecteur d'écran annonce donc des sections qui n'existent pas, et la navigation par titres devient trompeuse.

Piste de correction : Remplacer ces balises de titre par du texte stylé en CSS ; réserver les balises de titre à la vraie structure du contenu. À faire valider par votre développeur ou votre agence web.

La hiérarchie des titres ne reflète pas la structure réelle des pages : sur la fiche produit, « Composition », « Conseils d'utilisation » et « Avis clients » sont de simples textes en gras, invisibles dans le plan de la page. Un client au lecteur d'écran qui navigue de titre en titre saute directement du nom du produit au pied de page.

Piste de correction : Baliser ces intertitres en vrais titres hiérarchisés (niveau 2 sous le nom du produit) ; le plan de la page doit correspondre à ce qu'un lecteur voyant perçoit en la survolant. À faire valider par votre développeur ou votre agence web.

À 200 % de zoom, réglage courant chez les personnes malvoyantes, le menu fixe occupe la moitié de l'écran et recouvre le début du contenu ; sur la fiche produit, le bouton « Ajouter au panier » passe sous le bandeau cookies et devient incliquable. Le zoom, censé aider, empêche d'acheter.

Capture 1 · Fiche produit : savon au lait d'ânesse : à 200 %, le bandeau cookies recouvre le bouton d'achat

Piste de correction : Tester le site à 200 % et corriger le thème : menu qui se replie, bandeaux qui ne recouvrent jamais les boutons d'action. À faire valider par votre développeur ou votre agence web.

Le thème supprime le contour de focus sur tous les liens et boutons : au clavier, rien n'indique où l'on se trouve dans la page. Il faut compter ses appuis de touche à l'aveugle, y compris au moment de valider un paiement. C'est le défaut qui rend tout le reste du site pénible au clavier.

Capture 1 · Toutes les pages : le focus est sur « Nos savons » : rien ne le montre

Piste de correction : Rétablir un indicateur de focus visible et contrasté sur tous les éléments interactifs (une règle CSS globale suffit à corriger la suppression, puis affiner l'esthétique). À faire valider par votre développeur ou votre agence web.

Des consignes ne fonctionnent que si l'on voit la mise en page : « cliquez sur le bouton vert ci-contre », « les produits marqués d'un ruban sont en promotion ». Au lecteur d'écran ou dans une mise en page recomposée par le zoom, « ci-contre » et « le ruban » ne désignent plus rien.

Piste de correction : Reformuler les consignes pour qu'elles désignent les éléments par leur nom (« cliquez sur Ajouter au panier ») et doubler le ruban visuel d'une mention texte « En promotion ». À faire valider par votre développeur ou votre agence web.

Sur un écran étroit ou en fenêtre réduite (320 px), le tableau récapitulatif du panier impose un défilement horizontal : la colonne des prix sort de l'écran, et on peut valider sa commande sans avoir vu le total. Les personnes qui agrandissent fortement le texte sont dans ce cas en permanence.

Piste de correction : Rendre le récapitulatif du panier recomposable : sur écran étroit, empiler les informations de chaque article plutôt que de les garder en colonnes. À faire valider par votre développeur ou votre agence web.

Quand un utilisateur augmente l'espacement du texte (réglage d'aide à la lecture, courant notamment chez les personnes dyslexiques), les intitulés des boutons du tunnel sont tronqués : « Valider ma comm… » et la mention du délai de rétractation devient illisible, coupée à mi-hauteur.

Piste de correction : Laisser les boutons et encadrés s'agrandir avec leur texte (hauteurs non figées dans le CSS du thème). À faire valider par votre développeur ou votre agence web.

La composition complète de chaque savon n'apparaît qu'au survol du pictogramme « i » : l'infobulle disparaît dès qu'on déplace la souris vers elle, impossible à copier ou à lire lentement, et elle n'apparaît jamais au clavier. Pour une clientèle attentive aux allergènes, c'est l'information la plus consultée du site.

Capture 1 · Fiche produit : savon au lait d'ânesse : la composition n'apparaît qu'au survol de la souris

Piste de correction : Afficher la composition dans un bloc dépliable au clic, qui reste ouvert tant qu'on ne le referme pas et fonctionne au clavier ; l'infobulle au survol peut rester en raccourci pour la souris. À faire valider par votre développeur ou votre agence web.

Des étiquettes de champs existent mais restent ambiguës au moment décisif : à l'étape livraison, deux blocs « Adresse » se suivent sans que rien ne dise, à la lecture assistée, lequel est l'adresse de livraison et lequel la facturation. Des colis partent au mauvais endroit pour moins que ça.

Capture 1 · Livraison : deux blocs « Adresse », rien ne les distingue

Piste de correction : Rendre chaque étiquette autoporteuse : « Adresse de livraison », « Adresse de facturation », y compris dans le nom accessible de chaque champ. À faire valider par votre développeur ou votre agence web.

Les champs de même nature ne sont pas regroupés : à l'étape livraison, les 12 champs se suivent d'un bloc, sans regroupement livraison / facturation / contact. Au lecteur d'écran, on remplit une liste de champs sans jamais savoir dans quelle partie du formulaire on se trouve.

Capture 1 · Livraison : douze champs d'un seul bloc, sans regroupement

Piste de correction : Regrouper les champs par ensembles avec une légende (« Adresse de livraison », « Adresse de facturation », « Vos coordonnées »). À faire valider par votre développeur ou votre agence web.

Les boutons du tunnel s'appellent tous « Valider » : valider le panier, valider l'adresse, valider le paiement. Hors contexte visuel, impossible de savoir ce que « Valider » engage, y compris au moment où il s'agit de payer.

Capture 1 · Paiement : « Valider » déclenche le paiement sans le dire

Piste de correction : Donner à chaque bouton un intitulé qui décrit son action : « Passer à la livraison », « Continuer vers le paiement », « Payer 42,50 € ». À faire valider par votre développeur ou votre agence web.

Quand le formulaire de commande est refusé, le seul retour est la mention « Le formulaire contient des erreurs » en haut de page : les champs fautifs ne sont signalés que par une bordure rouge (voir aussi le constat sur la couleur), sans message rattaché au champ. Nos tests au lecteur d'écran se sont soldés par deux abandons de commande : impossible de trouver quoi corriger.

Capture 1 · Livraison : un message générique, aucun champ désigné

Piste de correction : Rattacher à chaque champ en erreur un message texte explicite (« Le code postal doit comporter 5 chiffres »), annoncé à la lecture assistée, et lister les erreurs en haut du formulaire avec des liens vers les champs. À faire valider par votre développeur ou votre agence web.

Aucune aide à la saisie n'est donnée avant l'erreur : le champ téléphone refuse les espaces, le code promotionnel doit être en majuscules, mais rien ne l'indique. L'utilisateur ne le découvre qu'en échouant, ce qui pénalise d'abord les personnes pour qui chaque re-saisie coûte (handicap moteur, troubles cognitifs).

Piste de correction : Indiquer les formats attendus dans l'étiquette ou sous le champ (« 10 chiffres, sans espaces »), et tolérer les variantes de saisie courantes côté code. À faire valider par votre développeur ou votre agence web.

À l'étape paiement, la commande n'est plus modifiable : pas de récapitulatif modifiable ni de retour possible vers le panier sans perdre l'adresse saisie. Pour un achat qui engage un paiement, l'utilisateur doit pouvoir vérifier et corriger avant de confirmer ; ici, se tromper de quantité oblige à tout recommencer.

Piste de correction : Afficher à l'étape paiement un récapitulatif complet avec des liens « Modifier » (panier, adresse, livraison) qui conservent les données déjà saisies. À faire valider par votre développeur ou votre agence web.

Le site ne propose qu'un seul moyen de navigation, le menu : ni moteur de recherche interne, ni plan du site. Un client qui cherche « savon d'Alep » n'a d'autre choix que de parcourir les catégories une à une, ce qui pénalise autant les utilisateurs de lecteurs d'écran que les clients pressés.

Piste de correction : Ajouter un second système de navigation : un moteur de recherche interne (WooCommerce en propose un nativement) ou une page plan du site. À faire valider par votre développeur ou votre agence web.

L'ordre de tabulation du tunnel ne suit pas l'ordre visuel : à l'étape livraison, le focus saute des champs d'adresse au bandeau d'inscription à la lettre d'information, puis revient au choix du transporteur. Au clavier, on quitte le formulaire sans le vouloir, en pleine saisie de commande.

Piste de correction : Rétablir un ordre de tabulation qui suit l'ordre logique de la page (revoir l'ordre des blocs dans le code plutôt que de forcer des tabindex). À faire valider par votre développeur ou votre agence web.

La fenêtre de choix du point relais est un piège au clavier : une fois ouverte, la touche Tab tourne dans la carte des points relais et ni Échap ni aucun bouton atteignable ne permet de la fermer. Un client au clavier qui choisit « point relais » ne peut plus ni finir sa commande ni revenir en arrière : c'est le constat le plus bloquant de cet audit.

Capture 1 · Livraison : la fenêtre ne peut pas être fermée au clavier

Piste de correction : Permettre de fermer la fenêtre au clavier (touche Échap et bouton « Fermer » focusable) et ramener le focus sur l'élément qui l'a ouverte. À traiter en priorité absolue. À faire valider par votre développeur ou votre agence web.

Le sous-menu « Nos savons » ne s'ouvre qu'au survol de la souris : au clavier, la touche Tab passe sur « Nos savons » sans jamais dérouler les catégories. Toute une partie du catalogue n'est atteignable au clavier que par des chemins détournés.

Piste de correction : Rendre le sous-menu ouvrable au clavier (à l'appui sur Entrée ou à la prise de focus) et refermable à la touche Échap. À faire valider par votre développeur ou votre agence web.

La session de commande expire au bout de 15 minutes sans avertissement ni possibilité de prolonger : le panier est vidé et la saisie perdue. Un quart d'heure ne suffit pas à tout le monde pour saisir une adresse et un paiement, en particulier aux personnes qui saisissent lentement ou utilisent un lecteur d'écran : ce sont précisément elles que le compteur élimine.

Piste de correction : Avertir avant l'expiration et proposer de prolonger la session d'un clic, ou allonger nettement le délai et conserver le panier après expiration. À faire valider par votre développeur ou votre agence web.

Le catalogue 2026 proposé en téléchargement est un PDF fabriqué à partir de scans : aucun texte n'y est sélectionnable, tout est image. Au lecteur d'écran, le document est entièrement muet ; même la recherche de texte n'y fonctionne pas.

Piste de correction : Regénérer le catalogue depuis le document source (export PDF natif, avec titres balisés et texte réel), plutôt que depuis des scans. À faire valider par votre développeur ou votre agence web.

Le carrousel de l'accueil défile automatiquement toutes les 4 secondes, sans bouton pause : impossible de lire une offre en entier si l'on lit lentement, et le mouvement permanent gêne fortement certains utilisateurs (troubles de l'attention, photosensibilité). Le carrousel étant déjà inutilisable au clavier (voir thème 7), il cumule les problèmes.

Capture 1 · Accueil : défilement automatique, aucune pause possible

Piste de correction : Ajouter un bouton pause visible et focusable, ou désactiver le défilement automatique : un carrousel qui défile seul fait de toute façon vendre moins que des produits affichés côte à côte. À faire valider par votre développeur ou votre agence web.