Agence WebPro

Démo — Site e-commerce

https://demo-boutique.fr
67 C
✗ Non conforme EAA 2025
RGAA 4.1 WCAG 2.1 AA EAA 2025
Date de l'audit : 15 avril 2026 Pages analysées : 8

Résumé exécutif

Recommandation

Le site présente plusieurs problèmes d'accessibilité critiques qui empêchent une partie des utilisateurs de naviguer correctement. Priorité aux images sans alternative textuelle et aux formulaires sans étiquettes, qui bloquent directement les utilisateurs de lecteurs d'écran.

3
Problèmes critiques
2
Problèmes sérieux
2
Problèmes modérés
18
Points conformes

Conformité par catégorie

Catégorie Problèmes Statut
Images 1 À corriger
Navigation 1 À corriger
Formulaires 1 À corriger
Structure 2 À corriger
Couleurs 1 À corriger
ARIA 2 À corriger
L'European Accessibility Act (EAA) est en vigueur depuis le 28 juin 2025. Elle impose à toute entreprise offrant des services numériques aux consommateurs européens de rendre ses interfaces accessibles. Le non-respect expose à des sanctions financières et à l'exclusion des marchés publics.

Détail des problèmes

Critiques

3
Images sans attribut alt RGAA 1.1 / WCAG 1.1.1
Plusieurs images du site ne possèdent pas d'attribut alt, ce qui les rend totalement inaccessibles aux utilisateurs de lecteurs d'écran.
Impact utilisateur
Les utilisateurs aveugles ou malvoyants ne peuvent pas comprendre le contenu véhiculé par ces images. Sur un site e-commerce, cela inclut les photos de produits, les bannières promotionnelles et les icônes de navigation.
Comment corriger
Ajouter un attribut alt descriptif à chaque balise <img>. Si l'image est purement décorative, utiliser alt="" (vide). Éviter les textes génériques comme "image" ou "photo".
https://demo-boutique.fr/
https://demo-boutique.fr/catalogue
https://demo-boutique.fr/produit/robe-ete
et 1 autres pages
14 éléments affectés · 14 occurrences
Champs de formulaire sans étiquette RGAA 11.1 / WCAG 1.3.1
Les champs de saisie du formulaire de commande et de recherche ne sont pas associés à une étiquette textuelle visible ou accessible.
Impact utilisateur
Les utilisateurs de lecteurs d'écran ne peuvent pas identifier l'objet de chaque champ. Le processus d'achat devient inutilisable pour les personnes handicapées visuelles.
Comment corriger
Associer chaque champ <input> à un élément <label> via l'attribut for/id, ou utiliser aria-label / aria-labelledby si une étiquette visuelle n'est pas possible.
https://demo-boutique.fr/recherche
https://demo-boutique.fr/checkout
7 éléments affectés · 7 occurrences
Boutons sans texte accessible RGAA 11.9 / WCAG 4.1.2
Plusieurs boutons (ajout au panier, fermeture de modale, navigation carrousel) ne contiennent que des icônes sans texte ni attribut aria-label.
Impact utilisateur
Les utilisateurs de lecteurs d'écran entendent uniquement « bouton » sans comprendre l'action déclenchée. Cela bloque l'utilisation des fonctionnalités clés de la boutique.
Comment corriger
Ajouter un attribut aria-label descriptif ou un texte visible. Par exemple : <button aria-label="Ajouter au panier">. Utiliser la classe sr-only pour un texte visible uniquement par les lecteurs d'écran.
https://demo-boutique.fr/
https://demo-boutique.fr/catalogue
https://demo-boutique.fr/produit/robe-ete
9 éléments affectés · 9 occurrences

Sérieux

2
Contraste de couleur insuffisant RGAA 3.2 / WCAG 1.4.3
Le ratio de contraste entre le texte gris clair et l'arrière-plan blanc est de 2.8:1, inférieur au minimum requis de 4.5:1 pour le texte normal.
Impact utilisateur
Les utilisateurs malvoyants ou souffrant de daltonisme ne peuvent pas lire correctement les descriptions de produits, les prix réduits et les textes secondaires.
Comment corriger
Augmenter le contraste en assombrissant la couleur du texte. Utiliser un outil comme le Colour Contrast Analyser pour vérifier le ratio avant déploiement.
https://demo-boutique.fr/
https://demo-boutique.fr/catalogue
https://demo-boutique.fr/a-propos
11 éléments affectés · 11 occurrences
Liens sans texte descriptif RGAA 6.1 / WCAG 2.4.4
Des liens « Cliquez ici », « En savoir plus » et « Voir » sont utilisés sans contexte supplémentaire, rendant leur destination incompréhensible hors contexte.
Impact utilisateur
Les utilisateurs de lecteurs d'écran qui naviguent de lien en lien ne peuvent pas comprendre la destination ou l'objet de ces liens. La liste des liens de la page devient inexploitable.
Comment corriger
Rédiger des textes de lien descriptifs : « Voir la fiche du produit Robe été » plutôt que « Voir ». Utiliser aria-label si le texte visible ne peut pas être modifié.
https://demo-boutique.fr/catalogue
https://demo-boutique.fr/blog
6 éléments affectés · 6 occurrences

Modérés

2
Structure des titres incohérente RGAA 9.1 / WCAG 1.3.1
La hiérarchie des titres (H1 → H6) présente des sauts : un H4 apparaît sans H2 ni H3 parent, et plusieurs sections commencent par un H3.
Impact utilisateur
Les utilisateurs de lecteurs d'écran utilisent les titres pour naviguer rapidement dans la page. Une hiérarchie incohérente rend cette navigation confuse et peu fiable.
Comment corriger
Utiliser les niveaux de titres de manière séquentielle sans sauter de niveau. Chaque page doit avoir exactement un H1. Les sections de contenu commencent en H2, leurs sous-sections en H3.
https://demo-boutique.fr/
https://demo-boutique.fr/catalogue
5 éléments affectés · 5 occurrences
Attributs ARIA invalides ou mal utilisés RGAA 8.2 / WCAG 4.1.2
Des éléments utilisent des attributs ARIA non reconnus ou appliqués à des éléments incorrects (ex : role="button" sur un <div> sans tabindex).
Impact utilisateur
Les technologies d'assistance peuvent ignorer ou mal interpréter ces éléments, créant des comportements imprévisibles pour les utilisateurs de lecteurs d'écran.
Comment corriger
Vérifier que chaque attribut ARIA correspond à un rôle valide. Pour un <div> interactif, ajouter tabindex="0" et gérer les événements clavier en plus de aria-role.
https://demo-boutique.fr/panier
4 éléments affectés · 3 occurrences

Mineurs

1
Langue de la page non spécifiée RGAA 8.3 / WCAG 3.1.1
L'attribut lang de la balise <html> est absent ou incorrectement défini sur certaines pages du site.
Impact utilisateur
Les lecteurs d'écran utilisent la langue déclarée pour choisir la prononciation correcte. Sans cet attribut, le contenu peut être lu avec la mauvaise langue, rendant le texte incompréhensible.
Comment corriger
Ajouter l'attribut lang="fr" sur la balise <html> de chaque page : <html lang="fr">.
https://demo-boutique.fr/mentions-legales
https://demo-boutique.fr/contact
2 éléments affectés · 2 occurrences

Méthodologie & Contact

Ce rapport a été généré automatiquement par analyse du code source de votre site web.

Référentiels utilisés : • RGAA 4.1 — Référentiel Général d'Amélioration de l'Accessibilité (référentiel officiel français) • WCAG 2.1 AA — Web Content Accessibility Guidelines du W3C (standard international) • EN 301 549 — Norme européenne d'accessibilité numérique (European Accessibility Act 2025)

Moteur d'analyse : axe-core (Deque Systems), utilisé par plus de 500 millions de sites web.

Limites de l'audit automatique

Les outils automatisés détectent automatiquement environ 40 à 50 % des critères WCAG/RGAA. Une conformité complète nécessite également des tests manuels avec des technologies d'assistance (lecteurs d'écran, navigation clavier). Ce rapport est un point de départ, non une certification de conformité.

Pour une conformité complète, nous recommandons un audit manuel réalisé par un expert en accessibilité, en complément de ce rapport automatisé.

Contactez votre agence

Agence WebPro