Accessibilité

Nous visons le niveau AA des règles WCAG 2.2. Cette page ne se contente pas de l'annoncer : elle énumère les touches de chaque jeu, une par une, et dit ce qui ne va pas encore.

Ce qui vaut pour tout le site

• Un lien « Aller au contenu principal » apparaît à la première tabulation.
• Tout élément interactif possède un état de survol et un contour de focus visible, en cyan, qui ne dépend pas des réglages par défaut du navigateur.
• Le contraste du texte sur le fond sombre respecte le seuil AA ; le texte clair sur presque-noir dépasse 15:1.
• Si votre système demande de réduire les animations (prefers-reduced-motion), le lent glissement du fond s'arrête, les clignotements et les halos animés sont neutralisés, et toutes les transitions tombent à zéro.
• Aucune information n'est portée par la couleur seule : les signaux de Séquence ont une forme et un nom, les couleurs d'Inondation portent un symbole, un tuyau alimenté change de brillance, la sortie du labyrinthe porte une étoile.
• Chaque jeu possède une zone d'état en aria-live qui annonce le coup joué et la situation courante, pas seulement le résultat final.

Labyrinthe

• Tab amène le focus sur la grille, qui est alors annoncée avec votre position et le nombre de pas.
• ↑ ↓ ← →, ou W A S D, ou Z Q S D déplacent le point.
• Le pavé directionnel sous la grille est composé de quatre vrais boutons, atteignables au clavier et étiquetés.
• Un déplacement contre un mur est annoncé (« Mur »), il ne se contente pas de ne rien faire.
• La position, le nombre de pas et l'atteinte de la sortie sont tous annoncés.

Tuyaux

• La grille utilise un focus glissant : une seule case est dans l'ordre de tabulation, les flèches déplacent le focus de tuyau en tuyau.
• Entrée ou Espace fait pivoter le tuyau focalisé d'un quart de tour.
• Chaque tuyau s'annonce par sa position, la direction de ses connexions (haut, droite, bas, gauche) et par « alimenté » ou « éteint ».
• Le nombre de tuyaux alimentés est affiché en chiffres dans le bandeau et annoncé après chaque rotation.

Séquence

• Les quatre pavés sont de vrais boutons ; les touches 1, 2, 3, 4 leur correspondent.
• Pendant que la suite se joue, les pavés sont désactivés ; ils se réactivent pour votre saisie.
• Chaque signal est annoncé par son nom au moment où il s'allume : « triangle », « cercle », « carré », « losange ». Le jeu se joue donc à l'oreille, sans voir l'écran.
• Une erreur annonce le signal attendu et le signal reçu, ainsi que la manche atteinte.

Inondation

• Les six pastilles de couleur sont de vrais boutons ; Tab pour circuler, Entrée ou Espace pour inonder.
• La couleur actuelle de la zone est désactivée : le lecteur d'écran l'annonce comme indisponible.
• Chaque case et chaque pastille porte un symbole selon sa couleur (▲ ● ■ ◆ ★ ✚), lisible sans distinguer les teintes.
• Après chaque coup, la zone du coin, sa taille et la couleur choisie sont annoncées.

Défi du jour

• La bascule Partie libre / Défi du jour est un groupe de deux boutons ordinaires, atteignables avec Tab. Chacun annonce son état avec aria-pressed.
• Le panneau du défi énonce en toutes lettres la date, le résultat déjà obtenu s'il y en a un, et la série en cours.
• Le bouton Copier mon résultat n'apparaît qu'une fois le défi réussi. S'il échoue, le texte s'affiche dans une zone que le clavier peut sélectionner, et une zone aria-live annonce ce qui vient de se passer.
• Sur la page d'accueil, chaque jeu du défi du jour porte une étiquette qui dit s'il est réussi et avec quel résultat ; la coche verte est décorative et masquée aux lecteurs d'écran.

Limites connues

La grille du Labyrinthe est exposée comme une application (role="application") avec une étiquette d'état plutôt que case par case. Ce choix rend le jeu praticable au clavier, mais un lecteur d'écran ne peut pas explorer chaque couloir individuellement ; il faut se fier à l'annonce de position après chaque pas.

Sur la grille d'Inondation 16 × 16 affichée sur un téléphone de 390 pixels de large, une case mesure une vingtaine de pixels de côté et son symbole devient petit. Les grilles 10 × 10 et 12 × 12 sont bien plus lisibles ; nous préférons le dire que le cacher.

Signaler un problème

Si une partie du site vous bloque, écrivez à [email protected] en indiquant votre navigateur et votre technologie d'assistance. Les problèmes d'accessibilité passent devant le reste.

Dernière mise à jour : 10 juillet 2026.