Aide RGAA

Explications simples des sous-tests complexes avec des exemples réels

Couleurs

3.1.1

L'information par la couleur

Si vous ne voyez pas les couleurs, comprenez-vous tout ?

Imaginez que vous êtes daltonien ou aveugle. Est-ce que vous comprenez quand même toutes les informations de la page ?

Exemples réels

Site de réservation SNCF

❌

PROBLÈME : Les trains complets sont affichés en rouge, les trains disponibles en vert. Mais à part la couleur, rien d'autre ne vous dit si le train est complet ou pas.

✅

OK : Les trains complets ont le mot "COMPLET" écrit en plus d'être en rouge. Les trains disponibles ont le bouton "Réserver" en plus d'être en vert.

Formulaire de contact

❌

PROBLÈME : Les champs obligatoires ont juste une bordure rouge. Si vous ne voyez pas le rouge, vous ne savez pas quels champs remplir.

✅

OK : Les champs obligatoires ont une étoile * ET le mot "obligatoire" ET la bordure rouge. Même sans voir les couleurs, vous savez quoi remplir.

Calendrier de réservation Airbnb

❌

PROBLÈME : Les jours disponibles sont en vert, les indisponibles en gris. Aucun texte ne le précise.

✅

OK : Les jours indisponibles sont barrés ET grisés ET affichent "indisponible" quand on passe la souris dessus.

3.1.2

Les liens visibles sans couleur

Sans voir le bleu, savez-vous que c'est un lien ?

Dans un paragraphe de texte, si vous ne voyez pas que certains mots sont en bleu, savez-vous quand même que ce sont des liens cliquables ?

Exemples réels

Article Wikipédia

❌

PROBLÈME : Dans le texte, certains mots sont en bleu (ce sont des liens vers d'autres articles). Mais ils ne sont pas soulignés. Si vous ne voyez pas le bleu, ça ressemble juste à du texte normal.

✅

OK : Les liens sont soulignés OU en gras OU ont une petite icône à côté. Même sans voir le bleu, vous savez que c'est cliquable.

Liens

6.2.1

Les liens explicites

En lisant juste le texte du lien, sait-on où il mène ?

Un aveugle qui navigue de lien en lien avec son lecteur d'écran n'entend QUE le texte du lien, pas le texte autour.

Exemples réels

Liens vagues partout

❌

PROBLÈME : "Cliquez ici", "En savoir plus", "Lire la suite", "Ici" - ces textes ne disent rien sur la destination. Un aveugle entend "Cliquez ici, En savoir plus, Lire la suite..." sans savoir où ça mène !

✅

OK : "Voir nos tarifs", "Lire l'article sur l'accessibilité", "Télécharger le guide PDF" - on sait exactement où on va.

Liste d'articles de blog

❌

PROBLÈME : Chaque article a un lien "Lire la suite". Un aveugle qui liste les liens entend "Lire la suite, Lire la suite, Lire la suite..." - impossible de s'y retrouver !

✅

OK : Le titre de l'article est le lien. Ou le lien dit "Lire l'article : Comment cuisiner des pâtes".

Scripts

7.3.1

Les menus et composants au clavier

Les menus déroulants, onglets, popups marchent-ils au clavier ?

Tous les composants interactifs (menus déroulants, onglets, carrousels, calendriers...) doivent fonctionner avec le clavier uniquement, sans souris.

Exemples réels

Menu déroulant Amazon "Catégories"

❌

PROBLÈME : Le menu s'ouvre quand vous passez la souris dessus. Mais si vous appuyez sur Tab puis Entrée, rien ne se passe. Vous êtes bloqué.

✅

OK : Tab sélectionne le menu, Entrée l'ouvre, les flèches haut/bas naviguent dans les options, Échap ferme le menu.

Onglets sur une fiche produit

❌

PROBLÈME : Les onglets "Description", "Avis", "Livraison" ne changent que si vous cliquez avec la souris. Au clavier, impossible de passer d'un onglet à l'autre.

✅

OK : Les flèches gauche/droite changent d'onglet. Tab va au contenu de l'onglet sélectionné.

Sélecteur de date (calendrier popup)

❌

PROBLÈME : Le petit calendrier qui s'ouvre pour choisir une date ne fonctionne qu'à la souris. Impossible de naviguer entre les jours au clavier.

✅

OK : Les flèches permettent de naviguer entre les jours, Entrée sélectionne le jour, Échap ferme le calendrier.

7.4.1

Pas de changement surprise

La page change-t-elle toute seule sans prévenir ?

La page ne doit pas faire des choses sans vous prévenir : se recharger, changer de contenu, ouvrir une nouvelle fenêtre...

Exemples réels

Formulaire avec liste déroulante de pays

❌

PROBLÈME : Vous choisissez "France" dans la liste des pays, et PAF ! La page se recharge automatiquement pour afficher les régions françaises. Vous n'avez rien demandé, c'est déstabilisant.

✅

OK : Vous choisissez "France" dans la liste, puis vous cliquez sur un bouton "Continuer" pour voir les régions. C'est vous qui décidez quand la page change.

Lien qui ouvre une nouvelle fenêtre

❌

PROBLÈME : Vous cliquez sur "Conditions générales" et ça ouvre un nouvel onglet sans vous prévenir. Vous êtes perdu.

✅

OK : Le lien dit "Conditions générales (nouvelle fenêtre)" ou il y a une petite icône qui indique que ça va s'ouvrir ailleurs.

7.5.1

Les messages annoncés

Les messages (succès, erreur) sont-ils annoncés au lecteur d'écran ?

Quand un message apparaît sur la page (confirmation, erreur, notification...), le lecteur d'écran doit l'annoncer automatiquement.

Exemples réels

Ajout au panier sur un site e-commerce

❌

PROBLÈME : Vous cliquez sur "Ajouter au panier". Un petit message "Article ajouté !" apparaît en haut de la page. Mais le lecteur d'écran ne dit rien. La personne aveugle ne sait pas si ça a marché.

✅

OK : Le lecteur d'écran annonce automatiquement "Article ajouté au panier" dès que le message apparaît.

Erreur dans un formulaire

❌

PROBLÈME : Vous envoyez un formulaire avec une erreur. Un message rouge apparaît. Mais le lecteur d'écran reste silencieux.

✅

OK : Le lecteur d'écran annonce "Erreur : le champ email est invalide" automatiquement.

Structuration

9.1.2

L'ordre des titres

Les titres vont-ils dans l'ordre 1, 2, 3 sans sauter ?

Les titres de la page doivent suivre l'ordre logique : Titre niveau 1, puis Titre niveau 2, puis Titre niveau 3... sans sauter de niveau.

Exemples réels

Page produit mal structurée

❌

PROBLÈME : h1 : "iPhone 15 Pro", puis h3 : "Caractéristiques" (on a sauté h2 !), puis h4 : "Écran". C'est comme un livre avec Chapitre 1, puis directement Sous-section 1.1.1.

✅

OK : h1 : "iPhone 15 Pro", h2 : "Caractéristiques", h3 : "Écran", h3 : "Batterie", h2 : "Avis clients". L'ordre est logique.

Designer qui triche sur les niveaux

❌

PROBLÈME : Le designer trouvait que les h2 étaient trop gros visuellement. Donc il a utilisé h4 pour les titres de section parce que c'était plus petit.

✅

OK : On utilise les bons niveaux de titres (h2 pour les sections) et on change la taille avec du CSS. Le niveau = la structure. Le style = l'apparence.

Présentation

10.8.1

Le contenu caché vraiment caché

Un menu fermé est-il invisible pour tout le monde ?

Quand quelque chose est invisible à l'écran (menu fermé, popup fermée...), ça doit aussi être invisible pour un lecteur d'écran.

Exemples réels

Menu hamburger sur mobile

❌

PROBLÈME : Le menu est fermé, on ne le voit pas à l'écran. Mais le lecteur d'écran peut quand même lire tous les liens du menu ! C'est très confus pour une personne aveugle.

✅

OK : Quand le menu est fermé, personne ne peut le lire - ni visuellement, ni avec un lecteur d'écran. Il est vraiment caché.

FAQ en accordéon

❌

PROBLÈME : Les réponses des questions fermées sont quand même lues par le lecteur d'écran. La personne aveugle entend tout le contenu d'un coup.

✅

OK : Seules les réponses des questions ouvertes sont lisibles. Les autres sont vraiment cachées.

10.9.1

Les icônes avec du texte

Chaque icône a-t-elle un texte qui explique ?

Chaque icône (corbeille, enveloppe, maison, cœur...) doit avoir un texte visible à côté qui explique ce qu'elle veut dire.

Exemples réels

Barre d'outils d'une boîte mail

❌

PROBLÈME : Il y a des icônes : une poubelle, une enveloppe, un dossier... Mais aucun texte. Il faut deviner. Et un lecteur d'écran ne peut rien dire d'utile.

✅

OK : Chaque icône a son texte à côté : 🗑️ "Supprimer", ✉️ "Nouveau message", 📁 "Déplacer".

Statut de commande

❌

PROBLÈME : Un rond vert = "livré", un rond orange = "en cours", un rond rouge = "annulé". Mais aucun texte n'accompagne ces ronds colorés.

✅

OK : Chaque statut a son texte : 🟢 "Livré", 🟠 "En cours", 🔴 "Annulé".

10.9.3

Les jauges avec une valeur

Les barres de progression ont-elles un pourcentage écrit ?

Les barres de progression, les notes en étoiles, les jauges de niveau... doivent avoir une valeur écrite en texte.

Exemples réels

Barre de téléchargement

❌

PROBLÈME : Une barre bleue se remplit progressivement. On voit visuellement que c'est à environ 75%. Mais aucun pourcentage n'est écrit.

✅

OK : Le texte "Téléchargement : 75%" est affiché à côté de la barre.

Note d'un produit en étoiles

❌

PROBLÈME : Le produit a 4 étoiles jaunes sur 5. Visuellement, on comprend. Mais un lecteur d'écran ne voit pas les étoiles.

✅

OK : Le texte "Note : 4 sur 5" ou "4/5 étoiles" est écrit à côté.

10.10.1

Le gras, la taille, la position

Sans VOIR le gras ou la taille, comprenez-vous pareil ?

Si quelqu'un ne VOIT pas que le texte est en gras, ou qu'il est plus grand, ou qu'il est en premier... est-ce qu'il comprend quand même toute l'information ?

Exemples réels

Texte important en gras

❌

PROBLÈME : "Lisez bien les instructions. Ne touchez jamais le fil rouge. Bonne journée." Le texte en gras veut dire "attention, c'est dangereux !" Mais le mot "attention" n'est pas écrit. Un lecteur d'écran lira tout pareil.

✅

OK : "Lisez bien les instructions. ⚠️ ATTENTION : Ne touchez jamais le fil rouge. Bonne journée." Le mot "ATTENTION" est écrit. Tout le monde comprend.

Produit vedette affiché plus grand

❌

PROBLÈME : Dans une liste de produits, un produit est affiché plus grand que les autres. On comprend que c'est le recommandé. Mais rien ne le dit en texte.

✅

OK : Le produit mis en avant a une étiquette "Recommandé" ou "Meilleure vente".

Prix barré (ancien/nouveau prix)

❌

PROBLÈME : "50€ 30€" - Le prix barré indique l'ancien prix. Mais un lecteur d'écran dit juste "50 euros 30 euros" sans expliquer.

✅

OK : "Ancien prix : 50€, Nouveau prix : 30€" ou le lecteur annonce "50 euros barré, 30 euros nouveau prix".

10.13.1

Le contenu au survol

Les infobulles restent-elles affichées assez longtemps ?

Quand du contenu apparaît au survol de la souris (infobulle, sous-menu...), vous devez pouvoir le lire tranquillement sans qu'il disparaisse.

Exemples réels

Infobulle d'aide sur un formulaire

❌

PROBLÈME : Vous passez la souris sur un petit "?" à côté d'un champ. Une infobulle apparaît. Mais dès que vous bougez la souris pour la lire, elle disparaît !

✅

OK : Vous pouvez déplacer votre souris sur l'infobulle. Elle reste affichée assez longtemps pour être lue. Échap la ferme.

Sous-menu de navigation

❌

PROBLÈME : Vous survolez "Produits" et un sous-menu apparaît. Mais quand vous déplacez la souris vers le sous-menu, il se ferme car vous avez quitté "Produits" une fraction de seconde.

✅

OK : Le sous-menu reste ouvert le temps que vous naviguiez dedans. Il ne disparaît pas au moindre mouvement.

Formulaires

11.10.1

Les erreurs de formulaire

Le message d'erreur dit-il quel champ et pourquoi ?

Quand il y a une erreur dans un formulaire, le message doit dire clairement : quel champ a un problème, quel est le problème, et comment le corriger.

Exemples réels

Message trop vague

❌

PROBLÈME : Après avoir soumis le formulaire, le message dit "Erreur". C'est tout. Quel champ ? Quelle erreur ? Mystère.

✅

OK : "Le champ 'Email' est invalide. Veuillez entrer une adresse email valide, par exemple : nom@exemple.fr"

Champ rouge sans explication

❌

PROBLÈME : Un champ a une bordure rouge. OK, il y a un problème. Mais lequel ? Rien n'est écrit.

✅

OK : Sous le champ rouge, un message explique : "Ce champ est obligatoire" ou "Le format est invalide".

11.11.1

La suggestion de correction

L'erreur dit-elle comment la corriger ?

Le message d'erreur doit non seulement dire qu'il y a un problème, mais aussi expliquer comment le résoudre.

Exemples réels

Mot de passe refusé

❌

PROBLÈME : "Mot de passe trop faible". OK, mais qu'est-ce qu'il faut mettre ?

✅

OK : "Mot de passe trop faible. Il doit contenir au moins 8 caractères, une majuscule, une minuscule et un chiffre."

Format de date invalide

❌

PROBLÈME : "Format invalide". Mais quel format faut-il utiliser ?

✅

OK : "Format invalide. Utilisez le format JJ/MM/AAAA, par exemple : 25/12/2024"

Navigation

12.8.1

L'ordre de navigation clavier

Tab suit-il un ordre logique (gauche-droite, haut-bas) ?

Quand vous appuyez sur Tab, le focus doit se déplacer dans un ordre logique, comme quand on lit : de gauche à droite, de haut en bas.

Exemples réels

Ordre illogique

❌

PROBLÈME : Tab va du menu en haut... au pied de page en bas... puis remonte au contenu au milieu. C'est très confus, on fait des allers-retours.

✅

OK : Tab va du menu → au contenu principal → au pied de page. Dans l'ordre de la page.

Popup qui laisse échapper le focus

❌

PROBLÈME : Une popup s'ouvre. Mais quand vous appuyez sur Tab, le focus va DERRIÈRE la popup, sur des éléments qu'on ne voit plus.

✅

OK : Le focus reste "piégé" dans la popup tant qu'elle est ouverte. Tab ne va que vers les boutons de la popup.

Consultation

13.7.1

Les animations qu'on peut arrêter

Peut-on mettre en pause les carrousels et animations ?

Les animations, carrousels, vidéos qui bougent automatiquement doivent pouvoir être mis en pause ou arrêtés.

Exemples réels

Carrousel automatique

❌

PROBLÈME : Les images changent toutes les 3 secondes, automatiquement. Pas de bouton pause. Si vous êtes en train de lire le texte sur une image, elle disparaît avant que vous ayez fini !

✅

OK : Il y a un bouton pause/play visible. Ou le carrousel s'arrête quand vous passez la souris dessus.

Vidéo en lecture automatique

❌

PROBLÈME : Une vidéo de présentation démarre toute seule et tourne en boucle. Pas de bouton visible pour l'arrêter.

✅

OK : La vidéo a des contrôles play/pause clairement visibles, et ces contrôles sont utilisables au clavier.

13.8.1

Les clignotements

Peut-on arrêter ce qui clignote ?

Si quelque chose clignote sur la page, on doit pouvoir l'arrêter. Les clignotements rapides peuvent même provoquer des crises d'épilepsie !

Exemples réels

Icône de notification qui clignote

❌

PROBLÈME : L'icône de notification clignote sans arrêt pour attirer votre attention. Impossible de l'arrêter. C'est très gênant.

✅

OK : Le clignotement s'arrête automatiquement après quelques secondes. Ou vous pouvez cliquer pour l'arrêter.

Bannière promotionnelle

❌

PROBLÈME : Le texte "PROMO !" clignote en boucle infinie pour attirer l'œil. C'est agressif et impossible à stopper.

✅

OK : Le texte ne clignote pas du tout (il peut être en couleur vive à la place). Ou il clignote 3 fois puis s'arrête.

⚠️

Les clignotements rapides (plus de 3 fois par seconde) peuvent provoquer des crises d'épilepsie chez les personnes photosensibles. C'est dangereux !

Glossaire complet Accueil

17 sous-tests expliqués • 8 thèmes