Lisez le résumé : la situation, le risque et que faire, en une minute.
Transmettez ce lien à la personne qui gère votre site : les erreurs vont de la plus grave à la moins grave, avec leur emplacement et la façon de les corriger.
Conservez ce lien : c'est votre accès au rapport. Ne le partagez qu'avec les personnes que vous voulez laisser le consulter.
En résumé
Pour qui décide, en une minute.
État : il y a des choses qu'un lecteur d'écran ne peut pas nommer ou qu'on ne peut pas utiliser sans souris ; commencez par elles.
Risque : si le site vend ou fournit des services aux consommateurs (commerce en ligne, banque, transports…), l'acte européen sur l'accessibilité (en France, loi n° 2023-171) impose qu'il soit accessible, sauf si le service est fourni par une microentreprise, et nous n'avons pas trouvé d'informations sur l'accessibilité du site. Un utilisateur peut faire un signalement à la DGCCRF (SignalConso), qui peut ordonner la mise en conformité et infliger une amende. Si c'est votre cas, consultez votre conseiller.
En premier : boutons sans nom (menu, recherche, fermer…) inutilisables avec un lecteur d'écran.
Que faire : transmettre ce rapport à la personne qui gère le site, corriger les erreurs dans l'ordre où elles apparaissent et publier la déclaration.
Avant de commencer
La loi renvoie à des normes techniques d'accessibilité fondées sur une liste de règles appelées WCAG (la norme de référence, EN 301 549, reprend la version 2.1, niveau AA, tout comme le RGAA 4.1.2 pour les sites publics, et nous ajoutons ce qui est nouveau dans la 2.2 et mesurable, comme la taille des boutons). Une machine peut vérifier à peu près un tiers de cette liste, et c'est ce que mesure ce rapport.
Le reste doit être vérifié par une personne : par exemple, si le site peut être utilisé entièrement au clavier, s'il se lit dans un ordre logique ou si les descriptions des images disent quelque chose d'utile.
Les erreurs qui empêchent d'utiliser le site viennent en premier, puis les autres, de la plus grave à la moins grave. Pour chacune, vous trouverez ce qu'elle signifie, comment la corriger et des exemples tirés de votre propre site. Ce que nous mesurons et ce que nous ne mesurons pas.
Voici comment commence votre page d'accueil pour qui ne la voit pas
«Lien: Café de Muestra, inicio.»
«Lien: Shop.»
«Lien: Cafés.»
«Lien: About us.»
«Lien: Contacto.»
«Bouton: Buscar.»
«Bouton: Carrito.»
«Image: Taza de café recién hecho. Recién tostado cada lunes.»
«Bouton: ‹.»
«Bouton: ›.»
«Lien: IMG_2034.jpg.»
«Lien: Leer más.»
Les premiers liens, boutons et images, tels que les nomme un lecteur d'écran (il lit aussi les textes et les titres entre eux). Chaque « sans nom » est un élément inutilisable pour qui ne voit pas l'écran.
Utiliser le site uniquement au clavier
Beaucoup de gens n'utilisent pas de souris : des personnes aveugles, qui ont peu de mobilité dans les mains ou qui naviguent avec un contacteur. Nous avons parcouru vos pages en appuyant sur la touche Tab, comme elles le feraient.
Page d'accueil
https://cafedemuestra.example/
·Recommandation : Recommandation : Il n'y a pas de lien d'évitement vers le contenu. La page a un autre moyen d'éviter le menu (zones balisées), mais un lien au début aide beaucoup ceux qui utilisent le clavier.
✓Correct : Correct : Nous n'avons pas trouvé d'endroits où le focus reste bloqué.
✗Erreur : Erreur : Sur 15 éléments ou plus, on ne voit pas où est le focus. Qui utilise le clavier se perd. Correction : ne pas supprimer le contour du focus (outline: none) ou le remplacer par un autre bien visible.
✓Correct : Correct : Le focus ne va pas sur des éléments masqués.
✗Erreur : Erreur : 1 élément peut être activé à la souris mais pas au clavier, par exemple : «Ver ofertas». Correction : utiliser de vrais boutons et liens (<button>, <a href>) au lieu de <div> ou de <span> cliquables.
Sans focus visible, par exemple : «Café de Muestra, inicio», «Shop», «Cafés», «About us».
Page /producto.html
https://cafedemuestra.example/producto.html
·Recommandation : Recommandation : Il n'y a pas de lien d'évitement vers le contenu. La page a un autre moyen d'éviter le menu (zones balisées), mais un lien au début aide beaucoup ceux qui utilisent le clavier.
✓Correct : Correct : Nous n'avons pas trouvé d'endroits où le focus reste bloqué.
✗Erreur : Erreur : Sur 13 éléments, on ne voit pas où est le focus. Qui utilise le clavier se perd. Correction : ne pas supprimer le contour du focus (outline: none) ou le remplacer par un autre bien visible.
✓Correct : Correct : Le focus ne va pas sur des éléments masqués.
✓Correct : Correct : Nous n'avons pas trouvé d'éléments activables à la souris mais pas au clavier (ceux faits sur mesure, comme les menus ou les carrousels, sont à tester à la main).
Sans focus visible, par exemple : «Café de Muestra, inicio», «Shop», «Cafés», «About us».
Page /contacto.html
https://cafedemuestra.example/contacto.html
·Recommandation : Recommandation : Il n'y a pas de lien d'évitement vers le contenu. La page a un autre moyen d'éviter le menu (zones balisées), mais un lien au début aide beaucoup ceux qui utilisent le clavier.
✓Correct : Correct : Nous n'avons pas trouvé d'endroits où le focus reste bloqué.
✗Erreur : Erreur : Sur 12 éléments, on ne voit pas où est le focus. Qui utilise le clavier se perd. Correction : ne pas supprimer le contour du focus (outline: none) ou le remplacer par un autre bien visible.
✓Correct : Correct : Le focus ne va pas sur des éléments masqués.
✓Correct : Correct : Nous n'avons pas trouvé d'éléments activables à la souris mais pas au clavier (ceux faits sur mesure, comme les menus ou les carrousels, sont à tester à la main).
Sans focus visible, par exemple : «Café de Muestra, inicio», «Shop», «Cafés», «About us».
Les images, une par une
Nous avons examiné une à une 6 images de votre site, en comparant chacune avec sa description.
3 n'ont pas de description utile. Voici celle que nous proposons : vérifiez-la et copiez-la dans l'attribut alt.
Les propositions sont rédigées par une machine qui regarde l'image : vérifiez-les avant de les utiliser. Les commentaires de cette vérification sont rédigés dans la langue dans laquelle l'analyse a été demandée (Español).
Description inutile
Es un nombre de archivo y no dice qué producto es.
Maintenant : alt="IMG_2034.jpg"
Proposition : alt="Bolsa de café de Colombia Huila, 250 gramos"
Sans description
No tiene texto alternativo y muestra un producto.
Maintenant : sans attribut alt
Proposition : alt="Bolsa de café de Etiopía Yirgacheffe, 250 gramos"
Description inutile
La palabra «foto» no explica qué producto se muestra.
Maintenant : alt="foto"
Proposition : alt="Bolsa de café descafeinado por proceso de agua, 250 gramos"
Et 3 images avec une bonne description.
Ce que disent vos boutons et liens
Qui utilise un lecteur d'écran entend le nom de chaque bouton et de chaque lien. Nous avons examiné les 23 qui apparaissent sur vos pages.
11 ne se comprennent pas bien : ils sont dans une autre langue, utilisent du jargon technique, se répètent ou ne disent pas où ils mènent. Correction : remplacer le texte ou l'aria-label par celui que nous proposons. Les commentaires de cette vérification sont rédigés dans la langue dans laquelle l'analyse a été demandée (Español).
Autre langue · lien
Maintenant, on entend : « Shop » (3 fois). Está en inglés y la página en español.
Proposition : « Inicio »
Autre langue · lien
Maintenant, on entend : « About us » (3 fois). Está en inglés y lleva a la página de contacto.
Proposition : « Contacto »
Ne dit pas où il mène · bouton
Maintenant, on entend : « ‹ ». Un símbolo no dice qué hace el botón.
Proposition : « Anterior »
Ne dit pas où il mène · bouton
Maintenant, on entend : « › ». Un símbolo no dice qué hace el botón.
Proposition : « Siguiente »
Jargon technique · lien
Maintenant, on entend : « IMG_2034.jpg ». Es el nombre de un archivo, no dice adónde lleva.
Proposition : « [Destino del enlace] »
Ne dit pas où il mène · lien
Maintenant, on entend : « Leer más » (4 fois). No dice qué se va a leer.
Proposition : « Leer más sobre nuestros cafés »
Ne dit pas où il mène · lien
Maintenant, on entend : « foto ». No dice qué muestra ni adónde lleva.
Proposition : « [Descripción de la foto y destino] »
Autre langue · bouton
Maintenant, on entend : « Subscribe » (3 fois). Está en inglés y la página en español.
Proposition : « Suscribirme »
Autre langue · bouton
Maintenant, on entend : « Add to cart ». Está en inglés y la página en español.
Proposition : « Añadir al carrito »
Ne dit pas où il mène · lien
Maintenant, on entend : « Click here ». Está en inglés y no dice adónde lleva.
Proposition : « Volver a la página de inicio »
Autre langue · bouton
Maintenant, on entend : « Send ». Está en inglés y la página en español.
Proposition : « Enviar mensaje »
Liens qui ne disent pas où ils mènent
Les lecteurs d'écran permettent de sauter de lien en lien. Si dix liens disent « Lire la suite », la personne ne sait pas lequel est lequel. Correction : que le texte indique la destination (« Lire la suite sur la livraison ») ou ajouter un aria-label.
«Leer más» · 4 fois
«Click here» · 1 fois
Déclaration d'accessibilité
Nous ne l'avons pas trouvée. La loi n° 2023-171 (article L.412-13 du Code de la consommation) oblige les entreprises concernées à expliquer, dans leurs conditions générales ou dans un document équivalent et sous une forme accessible, comment leur service satisfait aux exigences d'accessibilité ; le plus souvent, c'est une page « Accessibilité » avec un lien dans le pied de page. Les administrations publiques, ainsi que les entreprises qui réalisent plus de 250 millions d'euros de chiffre d'affaires en France, doivent en outre publier une déclaration qui indique leur niveau de conformité, les contenus non accessibles, la date de l'évaluation et la façon de signaler un problème, avec un lien sur toutes les pages.
Voici un brouillon avec les données de ce rapport. Complétez ce qui est entre crochets, vérifiez que tout est exact et publiez-le.
Avant de le publier, il est conseillé qu'une personne vérifie ce que ce rapport ne couvre pas : les parcours complets (rechercher, acheter, s'inscrire, payer), les messages d'erreur des formulaires, les fenêtres pop-up, les vidéos et les documents téléchargeables. Si elle trouve d'autres erreurs, ajoutez-les à la liste.
Attention : si votre service relève de la loi n° 2023-171 et n'est pas conforme, la loi vous oblige à le mettre en conformité et à en informer la DGCCRF. Consultez votre conseiller avant de publier.
Votre brouillon : Déclaration d'accessibilité
[Nom de votre entreprise] s'engage à rendre son site web cafedemuestra.example accessible, conformément à l'article L.412-13 du Code de la consommation (loi n° 2023-171). Comme référence technique, elle utilise la norme EN 301 549, qui reprend les règles WCAG 2.1 de niveau AA ; nous avons aussi vérifié les nouveaux critères des WCAG 2.2.
Description du service
[Décrivez brièvement votre service, comment il est fourni et comment il s'utilise avec un lecteur d'écran, au clavier ou avec un agrandissement.]
[À faire vérifier par un expert avant publication.]
État de conformité
Ce site web n'est pas conforme aux règles WCAG 2.1 de niveau AA, pour les raisons indiquées ci-dessous.
Contenus non accessibles
Boutons sans nom (menu, recherche, fermer…) inutilisables avec un lecteur d'écran.
Champs de formulaire sans étiquette : qui utilise un lecteur d'écran ne sait pas quoi écrire.
Liens vides : une personne aveugle entend « lien » sans savoir où il mène.
Le site empêche de zoomer avec les doigts sur mobile.
Champs dont le seul nom est le texte d'exemple à l'intérieur : il disparaît dès qu'on commence à écrire, et certains lecteurs d'écran ne le lisent même pas.
Images sans description : un lecteur d'écran ne sait pas ce qu'elles montrent.
Certaines images n'ont pas de description adéquate.
Certains boutons et liens ont des noms incompréhensibles avec un lecteur d'écran.
Sur certains éléments, on ne voit pas où est le focus quand on navigue au clavier.
Certains éléments peuvent être activés à la souris mais pas au clavier.
Nous travaillons à le corriger avant le [date prévue].
Établissement de cette déclaration
Déclaration établie le 2026-11-01 par autoévaluation : analyse automatique selon les WCAG 2.2 A et AA, tests automatisés d'utilisation au clavier et vérification automatisée des images et des noms des boutons et des liens[, et vérification manuelle de …].
Observations et coordonnées
Si vous rencontrez un problème d'accessibilité ou avez besoin des informations dans un autre format, écrivez-nous à [e-mail] ou appelez-nous au [téléphone]. Nous répondrons dans un délai maximum de [délai : celui que vous fixez, par exemple 20 jours ouvrés].
Voies de recours
Si vous estimez que ce service ne respecte pas les exigences d'accessibilité, vous pouvez le signaler à la DGCCRF sur SignalConso (signal.conso.gouv.fr).
Les erreurs, une par une
1. Boutons sans nom (menu, recherche, fermer…) inutilisables avec un lecteur d'écran
Critique · 1 élément dans 1 pages sur 3 · règle button-name
Comment le corriger. Donner un nom à chaque bouton : texte visible ou aria-label ("Ajouter au panier", "Fermer", "Rechercher").
5. Champs dont le seul nom est le texte d'exemple à l'intérieur
Il disparaît dès qu'on commence à écrire, et certains lecteurs d'écran ne le lisent même pas.
Grave · 6 éléments dans 3 pages sur 3 · règle wa-placeholder
Comment le corriger. Ajouter à chaque champ un <label> visible (ou, s'il ne peut pas être visible, un aria-label). Le placeholder peut rester comme exemple, mais il ne remplace pas l'étiquette.
Un lecteur d'écran ne sait pas ce qu'elles montrent.
Critique · 1 élément dans 1 pages sur 3 · règle image-alt
Comment le corriger. Ajouter à chaque <img> un attribut alt qui décrit ce qu'apporte l'image (p. ex. alt="Chaussure de running bleue, vue de côté"). Si elle est purement décorative, alt="" vide.
7. Textes peu contrastés, difficiles à lire pour les personnes malvoyantes
Grave · 13 éléments dans 3 pages sur 3 · règle color-contrast
Comment le corriger. Foncer le texte ou éclaircir le fond jusqu'à un contraste de 4,5:1 (3:1 pour les grands textes). Le rapport indique chaque paire de couleurs en échec.
https://cafedemuestra.example/Code : Code : <p class="promo">Envío gratis a partir de 35 € · Tostamos cada lunes en pequeños lotes</p>Texte #9a8775 sur fond #fffaf2 : contraste 3.31:1, il faut 4.5:1.
https://cafedemuestra.example/Code : Code : <p class="precio">12,90 €</p>Texte #a08b78 sur fond #fffaf2 : contraste 3.12:1, il faut 4.5:1.
https://cafedemuestra.example/producto.htmlCode : Code : <p class="precio">12,90 €</p>Texte #a08b78 sur fond #fffaf2 : contraste 3.12:1, il faut 4.5:1.
https://cafedemuestra.example/contacto.htmlCode : Code : <p class="promo">Respondemos en menos de 24 horas laborables.</p>Texte #9a8775 sur fond #fffaf2 : contraste 3.31:1, il faut 4.5:1.
8. Boutons ou liens trop petits ou trop rapprochés pour être touchés du doigt
Grave · 3 éléments dans 1 pages sur 3 · règle target-size
Comment le corriger. Que chaque zone cliquable mesure au moins 24×24 pixels, ou qu'elle ait autour d'elle assez d'espace libre pour atteindre cette taille (WCAG 2.2).
https://cafedemuestra.example/ (sur écran de mobile)Code : Code : <a href="contacto.html">Contacto</a>
9. La page déborde à droite quand on zoome ou sur un petit mobile
Qui agrandit le texte doit faire défiler horizontalement à chaque ligne.
Grave · 1 élément dans 1 pages sur 3 · règle wa-reflow
Comment le corriger. Que la mise en page s'adapte à 320 px de large : pas de largeurs fixes en pixels, des images avec max-width: 100 % et des tableaux ou blocs larges avec leur propre défilement.
https://cafedemuestra.example/ (sur écran de mobile)Code : Code : <html> (la page déborde à droite à 320 px)
10. Titres qui sautent des niveaux
Le lecteur d'écran laisse entendre qu'il manque une partie de la page.
Modéré · bonne pratique · 1 élément dans 1 pages sur 3 · règle heading-order
Comment le corriger. Utiliser les titres dans l'ordre (<h1>, puis <h2>, <h3>…) sans sauter de niveau ; la taille se change avec le CSS, pas avec le niveau.
