Les 9 Révélations

Le Grimoire des Révélations

Chaque niveau du donjon simulait un obstacle réel rencontré par des millions de personnes sur le Web. Voici les explications pédagogiques et les critères RGAA associés.

La Dépendance à la Couleur

Le Mur

Vous deviez choisir la bonne fiole uniquement par sa couleur, sans aucun texte, icône ou motif pour distinguer les options. Si vous ne perceviez pas certaines teintes, la tâche devenait un jeu de hasard.

Personnes exclues

Cela impacte directement les personnes atteintes de daltonisme ou d'achromatopsie (8 % des hommes, 0,5 % des femmes), mais aussi n'importe qui utilisant un écran au soleil, en mode économie d'énergie monochrome, ou une liseuse e-ink.

Critère 3.1

Avant

Après

<button class="bg-green-500"> <Icon type="check" /> Antidote </button>

Guide RGAA — Critère 3.1

L'Encre Invisible

Le Mur

Le texte était écrit avec une encre presque identique au parchemin (ratio ~1.2:1). Impossible de lire le code secret à l'œil nu. De plus, le texte était masqué aux technologies d'assistance (aria-hidden), rendant l'information doublement inaccessible.

Personnes exclues

Cela exclut les personnes malvoyantes (1,7 million en France), les personnes âgées dont la vision baisse, mais aussi toute personne utilisant un écran au soleil, un rétroprojecteur, ou un écran mal calibré.

Critère 3.2

Avant

<p style="color: #d4d4d4; background: #e8e8e8;"> Texte illisible (ratio 1.2:1) </p>

Après

<p style="color: #0f172a; background: #ffffff;"> Texte lisible (ratio 15.4:1) </p> /* Minimum RGAA : 4.5:1 (AA) */

Guide RGAA — Critère 3.2

Le Labyrinthe Sans Clavier

Le Mur

Les portes étaient visuellement présentes mais impossibles à atteindre au clavier. Aucun « outline » de focus n'était visible, rendant la navigation sans souris totalement impossible.

Personnes exclues

Cela exclut les personnes en situation de handicap moteur qui utilisent exclusivement le clavier, un contacteur ou une licorne (tige frontale). Plus de 2 millions de personnes en France sont concernées.

Critères 10.7 + 12.8

Avant

*:focus { outline: none; } div.onclick="navigate()"

Après

*:focus-visible { outline: 3px solid var(--primary); } <button onClick={navigate}>Porte</button>

Guide RGAA — Critère 10.7 Guide RGAA — Critère 12.8

Le Son du Silence

Le Mur

Un contenu audio ou vidéo démarrait automatiquement sans sous-titres ni transcription. Pour quiconque ne pouvant pas entendre, le sens du contenu était perdu.

Personnes exclues

Cela impacte les 6 millions de personnes sourdes ou malentendantes en France, mais aussi toute personne dans un environnement bruyant, sans casque, ou dans un lieu silencieux.

Critères 4.1 + 4.3

Avant

Après

Guide RGAA — Critère 4.1 Guide RGAA — Critère 4.3

L'Image Fantôme

Le Mur

Les images n'avaient aucune alternative textuelle pertinente. Les alt étaient des noms de fichiers (« IMG_4920.jpg ») au lieu de descriptions utiles. L'information est simplement perdue.

Personnes exclues

Les personnes aveugles ou malvoyantes (1,7 million en France) dépendent des textes alternatifs. C'est aussi utile quand la connexion est lente ou les images bloquées.

Critères 1.1 + 1.3

Avant

Après

Guide RGAA — Critère 1.1 Guide RGAA — Critère 1.3

Les Liens Fantômes

Le Mur

Les liens n'avaient aucun intitulé descriptif : « cliquez ici », « en savoir plus », « lien ». Hors contexte visuel, impossible de savoir où ils mènent.

Personnes exclues

Les personnes utilisant un lecteur d'écran naviguent souvent de lien en lien. Sans intitulé clair, elles entendent « lien : cliquez ici » en boucle sans comprendre la destination.

Critère 6.1

Avant

<a href="/guide">Cliquez ici</a> <a href="/audit">En savoir plus</a>

Après

<a href="/guide">Consulter le guide RGAA</a> <a href="/audit">Demander un audit d'accessibilité</a>

Guide RGAA — Critère 6.1

Le Formulaire Maudit

Le Mur

Les champs du formulaire n'avaient aucune étiquette (<label>) associée. Les placeholders disparaissaient à la saisie, laissant l'utilisateur sans repère sur ce qu'il devait remplir.

Personnes exclues

Les personnes utilisant un lecteur d'écran n'entendent que « champ de saisie vide » sans label. Les personnes avec des troubles cognitifs perdent le fil sans repère visuel permanent.

Critère 11.1

Avant

Après

<label for="name">Votre nom</label> <input id="name" type="text" />

Guide RGAA — Critère 11.1

La Zone Piégée

Le Mur

Les éléments cliquables changeaient de taille, se déplaçaient ou avaient des zones de clic trop petites. Cliquer au bon endroit devenait un exercice de précision extrême.

Personnes exclues

Les personnes atteintes de tremblements (Parkinson, sclérose en plaques), de troubles moteurs fins, ou utilisant un écran tactile avec difficulté. Aussi frustrant sur mobile avec de petits boutons.

Bonne pratique WCAG 2.5.5 / 2.5.8 (Taille de cible)

Avant

Après

<button style="min-width: 44px; min-height: 44px; padding: 12px;"> Fermer </button>

Le Boss de l'Exclusion

Le Mur

Vous étiez sous pression avec un temps limité non ajustable. Des animations en fond tiraient votre attention. Et le comble : un CAPTCHA illisible sans alternative.

Personnes exclues

Les personnes avec des troubles de l'attention (TDAH), des troubles cognitifs, des handicaps visuels ou moteurs qui ralentissent l'interaction. Les CAPTCHA visuels excluent aussi les personnes aveugles.

Critères 1.5 / 3.2 / 13.1 / 13.8

Avant

<div class="captcha" style="opacity: 0.3; font-style: italic;"> XG7pq </div> <script>setTimeout(() => fail(), 15000)</script>

Après

<label for="captcha">Code de vérification : XG7pq</label> <input id="captcha" /> <button>Demander un nouveau code</button> <p>Temps restant : ajustable</p>

Guide RGAA — Critère 1.5 Guide RGAA — Critère 3.2 Guide RGAA — Critère 13.1 Guide RGAA — Critère 13.8