RGAA_4_1Démonstration E-CommerceAudit Scénarisé

Rapport d'audit d'accessibilité numérique

Site audité :https://demo-boutique-bio.fr (s'ouvre dans un nouvel onglet)•5 page(s) analysée(s)•Le 09/10/2026

Note d'audit : Cet audit automatisé couvre les blocages techniques fréquents. Pour une certification légale officielle (RGAA/WCAG), l'intervention d'un auditeur humain reste indispensable. Comprendre les limites et le cadre légal dans notre FAQ

Taux critères automatisables (RGAA 4.1)

72%Partiel

55 critères sans barrière sur 76 testés.

Taux critères automatisables (WCAG 2.2)

79%Niveau AA

Calculé sur l'ensemble des critères de succès testés (A & AA).

Filtrage & recherche d'anomalies

11 anomalies filtrées (sur 11 uniques, dont 3 de gabarit)

Origine de détection :

Page :

Thématique :

RGAA 12.8WCAG 2.1.1 Keyboard AÉléments interactifs & Cibles5 occurrences

Faux bouton créé avec une div sans accessibilité clavier

div.header-actions > div.quick-cart-btn

Capture de l'élément

Code source défaillant

<div class="quick-cart-btn" onclick="openMiniCart()">Panier (2)</div>

L'élément ouvre le panier au clic souris mais ne peut ni recevoir le focus clavier (tabindex manquant), ni être déclenché avec la touche Entrée ou Espace.

Restitution vocale (VoiceOver / NVDA)

« « Conteneur, texte : Panier 2 » (Aucune annonce de bouton cliquable). »

Conséquence usager : Les utilisateurs naviguant au clavier ou au lecteur d'écran ne peuvent pas ouvrir le panier depuis l'en-tête.

Remplacez la <div> par un élément <button type="button"> natif ou ajoutez role="button" et tabindex="0" avec gestionnaire keydown.

Code corrigé recommandé :

<button type="button" class="quick-cart-btn" onclick="openMiniCart()">
  Panier (2)
</button>

RGAA 11.1WCAG 3.3.2 Labels or Instructions AÉléments interactifs & Cibles

Placeholder utilisé comme seule étiquette de formulaire de newsletter

form#newsletter-form input#email-input

Capture de l'élément

Code source défaillant

<input type="email" id="email-input" placeholder="Votre adresse email..." />

Le champ d'inscription à la newsletter ne possède ni balise <label>, ni attribut aria-label ou aria-labelledby. Dès la première saisie, le texte d'aide disparaît.

Restitution vocale (VoiceOver / NVDA)

« « Édition, texte vide » (Aucun nom de champ n'est annoncé). »

Conséquence usager : Impossibilité pour les usagers non-voyants de savoir quelle information est attendue dans ce champ.

Ajoutez une étiquette <label for="email-input"> explicite associée au champ.

Code corrigé recommandé :

<label for="email-input" class="form-label">
  Votre adresse email
</label>
<input type="email" id="email-input" />

RGAA 10.7WCAG 2.4.7 Focus Visible AAÉléments interactifs & Cibles

Contour de focus clavier désactivé (outline: none) sur le bouton principal

section.hero a.btn-primary

Capture de l'élément

Code source défaillant

<a href="/catalogue" class="btn-primary" style="outline: none;">Découvrir les paniers</a>

La propriété CSS outline: none a été appliquée sans style de focus de remplacement, rendant le curseur clavier invisible lors de la navigation avec la touche Tab.

Restitution vocale (VoiceOver / NVDA)

« Curseur invisible à l'écran lors de l'appui sur la touche Tabulation. »

Conséquence usager : Perte de repère visuel totale : l'utilisateur au clavier ne sait plus quel élément est sélectionné.

Supprimez outline: none ou définissez un contour net et contrasté avec :focus-visible.

Code corrigé recommandé :

.btn-primary:focus-visible {
  outline: 2px solid #09090b;
  outline-offset: 2px;
}

RGAA 1.2WCAG 1.1.1 Non-text Content AContenus & Médias

Attributs alt et title identiques sur l'image de présentation

#hero > div.banner > img

Code source défaillant

<img src="/assets/hero-panier.jpg" alt="Panier de légumes bio de saison" title="Panier de légumes bio de saison" />

L'attribut title répète mot pour mot l'attribut alt, forçant le lecteur d'écran (VoiceOver, NVDA) à lire la même phrase deux fois de suite.

Restitution vocale (VoiceOver / NVDA)

« « Image, Panier de légumes bio... Panier de légumes bio... » (Double vocalisation consécutive). »

Conséquence usager : Fatigue cognitive et désagrément sonore pour les personnes non-voyantes.

Supprimez l'attribut title sur la balise <img>. L'attribut alt suffit amplement.

Code corrigé recommandé :

<img src="/assets/hero.jpg" alt="Panier de légumes bio de saison" />

RGAA 6.1WCAG 2.4.4 Link Purpose (In Context) AStructure & Sémantique5 occurrences

Intitulé de lien générique non explicite hors contexte (« En savoir plus »)

header nav a.nav-catalogue-link

Code source défaillant

<a href="/catalogue" class="nav-catalogue-link">En savoir plus</a>

L'intitulé de lien « En savoir plus » ne permet pas de comprendre la destination ou la fonction du lien lorsqu'il est lu de manière isolée.

Restitution vocale (VoiceOver / NVDA)

« « Lien, En savoir plus » (L'utilisateur ignore vers quelle page le lien renvoie). »

Conséquence usager : Désorientation lors de la navigation dans la liste des liens du lecteur d'écran (Rotor / Touche Tab).

Fournissez un texte explicite directement dans le lien ou complétez avec aria-label ou un span masqué .sr-only.

Code corrigé recommandé :

<a href="/catalogue">Consulter tout le catalogue de soins bio</a>

RGAA 3.2WCAG 1.4.3 Contrast (Minimum) AAContrastes & Rendu5 occurrences

Contraste insuffisant sur les mentions légales du pied de page

footer.site-footer p.copy

Mesure Alpha WCAG 2.2

Ratio mesuré :2.9:1 (Requis 4.5:1)

#94a3b8

#f8fafc

Code source défaillant

<p class="copy" style="color: #94a3b8; background-color: #f8fafc;">© 2026 Boutique Bio — Tous droits réservés</p>

Le ratio de contraste mesuré par composition Alpha est de 2.9:1 entre le texte gris clair (#94a3b8) et le fond (#f8fafc), inférieur au seuil WCAG 2.2 AA (4.5:1).

Restitution vocale (VoiceOver / NVDA)

« Texte très difficile à déchiffrer pour les personnes malvoyantes ou sur écran à faible luminosité. »

Conséquence usager : Fatigue visuelle et difficulté de lecture pour les usagers malvoyants ou âgés.

Assombrissez la couleur du texte vers au moins #475569 (ratio 4.6:1) pour respecter le seuil WCAG AA.

Code corrigé recommandé :

footer.site-footer p.copy { color: #475569; /* Ratio 4.6:1 WCAG AA */ }

RGAA 10.14WCAG 2.5.8 Target Size (Minimum) AAÉléments interactifs & Cibles

Taille de zone cliquable inférieure à 24×24 pixels (WCAG 2.2 AA - 2.5.8)

aside.filters button.btn-sort-toggle

Capture de l'élément

Code source défaillant

<button class="btn-sort-toggle" style="width: 18px; height: 18px;">▲</button>

Le bouton de tri ascendant mesure 18×18 px. Le critère WCAG 2.2 AA (2.5.8 Target Size Minimum) exige une surface tactile d'au moins 24×24 pixels sans chevauchement.

Restitution vocale (VoiceOver / NVDA)

« Cible trop petite pour être activée avec précision sur smartphone ou pour les usagers avec tremblements. »

Conséquence usager : Clics manqués et frustration ergonomique lors de la manipulation des filtres du catalogue.

Ajoutez du padding interne ou fixez min-width: 24px; min-height: 24px; pour élargir la zone réactive.

Code corrigé recommandé :

/* CSS Standard (WCAG 2.5.8) : garantir une surface tactile d'au moins 24×24 px */
.cible-interactive {
  min-width: 24px;
  min-height: 24px;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

RGAA 1.3WCAG 1.1.1 Non-text Content AContenus & Médias

Nom de fichier brut utilisé comme texte alternatif d'une image produit

article.product-card:nth-of-type(3) img

Code source défaillant

<img src="/media/products/soap-lavande.jpg" alt="IMG_20261009_1402.JPG" />

Le texte alternatif contient le nom de fichier brut issu de l'appareil photo au lieu d'une description intelligible du produit.

Restitution vocale (VoiceOver / NVDA)

« « Image, I M G tiret bas 2 0 2 6 1 0 0 9 point J P G » (Lecture incompréhensible de 10 secondes). »

Conséquence usager : L'utilisateur non-voyant ne peut pas identifier le produit présenté dans le catalogue.

Renseignez un libellé descriptif concis dans l'attribut alt.

Code corrigé recommandé :

<img src="/media/soap-lavande.jpg" alt="Savon artisanal bio à la lavande de Provence - 100g" />

RGAA 3.2WCAG 1.4.3 Contrast (Minimum) AAContrastes & Rendu

Contraste très insuffisant (2.4:1) sur le badge promotionnel du catalogue

span.price-discount-tag

Capture de l'élément

Mesure Alpha WCAG 2.2

Ratio mesuré :2.4:1 (Requis 4.5:1)

#a8a29e

#f1f5f9

Code source défaillant

<span class="price-discount-tag" style="color: #a8a29e; background-color: #f1f5f9;">-20% Promo</span>

Le badge de remise présente un texte gris clair sur fond gris très pâle, rendant le taux de promotion illisible.

Restitution vocale (VoiceOver / NVDA)

« Texte promotionnel imperceptible pour les utilisateurs malvoyants. »

Conséquence usager : Perte d'information commerciale essentielle pour les personnes malvoyantes.

Utilisez un texte noir ou vert soutenu #166534 sur fond #dcfce7 (ratio 6.2:1 conforme AAA).

Code corrigé recommandé :

.price-discount-tag {
  color: #166534;
  background-color: #dcfce7;
  /* Ratio 6.2:1 WCAG AAA */
}

#10

RGAA 9.1WCAG 1.3.1 Info and Relationships AStructure & Sémantique

Saut dans la hiérarchie des titres (Passage direct de <h1> à <h3>)

section.commitments h3.section-title

Code source défaillant

<h3 class="section-title">Nos engagements environnementaux</h3>

La page passe directement d'un titre de niveau <h1> à un titre de niveau <h3> sans titre de niveau <h2> intermédiaire, désorientant la navigation par structure.

Restitution vocale (VoiceOver / NVDA)

« « Titre de niveau 3, Nos engagements » sans que l'utilisateur n'ait rencontré de niveau 2. »

Conséquence usager : L'utilisateur naviguant par la liste des titres a l'impression d'avoir manqué une section parente.

Transformez la balise en <h2> et adaptez la taille visuelle avec CSS sans déclasser la sémantique.

Code corrigé recommandé :

<h2 class="section-title">Nos engagements environnementaux</h2>

#11

RGAA 12.8WCAG 2.1.2 No Keyboard Trap AParcours dynamiqueDétecté par Agent IA

Tiroir panier impossible à refermer au clavier (Touche Échap inactive)

Contexte d'exécution : Étape 4 du parcours e-commerce : Tentative de fermeture du panier par la touche Échap

#cart-drawer-close

Code source défaillant

<div class="drawer-close" onclick="closeCart()">X</div>

Le tiroir panier intercepte l'écran mais le bouton de fermeture est codé avec une <div> non accessible, et l'écouteur de touche Échap est absent.

Restitution vocale (VoiceOver / NVDA)

« « Conteneur, X » (L'utilisateur non-voyant reste bloqué dans la fenêtre modale). »

Conséquence usager : Piège au clavier : l'utilisateur ne peut ni refermer le panier ni poursuivre sa navigation sur le site.

Ajoutez un écouteur keydown sur la touche Escape et remplacez la div par un vrai <button type="button" aria-label="Fermer le panier">.

Code corrigé recommandé :

<button type="button" class="drawer-close" aria-label="Fermer le panier" onclick="closeCart()">✕</button>