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 or, qui ne dépend pas des réglages par défaut du navigateur.
• Le contraste du texte sur le fond respecte le seuil AA ; les longs textes sont posés sur un panneau sombre plutôt que directement sur le ciel.
• Si votre système demande de réduire les animations (prefers-reduced-motion), l'aurore cesse de tourner et toutes les transitions sont neutralisées.
• Aucune information n'est portée par la couleur seule : les caisses, le joueur, les repères, les lumières et les disques portent tous un symbole ou un chiffre.
• 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.

Pousse-Caisses

• Tab amène le focus sur le plateau, qui est alors annoncé avec le numéro du tableau et le nombre de caisses déjà placées.
• ↑ ↓ ← →, ou W A S D, ou Z Q S D déplacent le joueur.
• Le pavé directionnel affiché sous le plateau est composé de quatre vrais boutons, atteignables au clavier et étiquetés.
• Les boutons « Annuler le coup » et « Recommencer le tableau » sont dans l'ordre de tabulation, après le pavé.
• Un déplacement impossible est annoncé (« Déplacement bloqué »), il ne se contente pas de ne rien faire.

Nonogrammes

• La grille utilise un focus glissant : une seule case est dans l'ordre de tabulation, les flèches déplacent le curseur de case en case.
• Entrée applique le mode courant sur la case ; Espace y pose ou retire un ✕, quel que soit le mode.
• Chaque case s'annonce par sa ligne, sa colonne et son état : remplie, marquée vide, ou indéterminée.
• Les chiffres en marge sont décoratifs pour les lecteurs d'écran : l'état complet est porté par l'étiquette des cases. Nous savons que c'est une limite, voir plus bas.
• Les boutons de taille et de mode annoncent leur état avec aria-pressed.

Éteins-tout

• Chaque case est un bouton : Tab pour circuler, Entrée ou Espace pour appuyer.
• Chaque bouton porte aria-pressed et une étiquette qui donne la ligne, la colonne et l'état, allumée ou éteinte.
• La grille annonce le nombre de lumières encore allumées après chaque appui.
• L'indice entoure la case suggérée d'un trait tireté rose et l'annonce par sa ligne et sa colonne, pour ne pas dépendre du seul contour.

Tours de Hanoï

• Les touches 1, 2 et 3 choisissent une tige ; Échap annule la sélection en cours.
• Chaque tige est un bouton dont l'étiquette énumère les disques qu'elle porte, du haut vers le bas.
• Le focus est rendu à la tige que vous veniez d'activer après chaque coup, pour que la navigation au clavier ne reparte pas du début.
• Chaque disque affiche son numéro : la taille ne repose pas uniquement sur la largeur ni sur la teinte.
• Un coup interdit est annoncé avec sa raison, et non signalé par un simple refus silencieux.

Défi du jour

• La bascule Partie libre / Défi du jour est un groupe de deux boutons ordinaires, atteignables avec Tab et actionnés par Entrée ou Espace. Chacun annonce son état avec aria-pressed.
• Le panneau du défi énonce en toutes lettres la date, le minimum de coups, le résultat déjà obtenu s'il y en a un, et la série en cours. Il n'y a rien à deviner à partir d'une couleur ou d'une icône.
• Le bouton Copier mon résultat n'apparaît qu'une fois le défi réussi. S'il échoue, par exemple parce que le navigateur refuse l'accès au presse-papiers, le texte s'affiche dans une zone de texte 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

Les chiffres en marge de Nonogrammes sont marqués aria-hidden. Un lecteur d'écran peut donc jouer la grille case par case mais ne peut pas relire commodément les indices d'une ligne. Restituer les indices proprement demande une structure de tableau que nous n'avons pas encore écrite. C'est le défaut d'accessibilité le plus sérieux du site et nous ne cherchons pas à le maquiller.

Le plateau de Pousse-Caisses est exposé comme une application (role="application") avec une étiquette d'état plutôt que comme une grille case par case. Ce choix rend le jeu praticable au clavier mais ne permet pas d'explorer le plateau case par case avec un lecteur d'écran.

Sur la grille 15 × 15 de Nonogrammes, affichée sur un téléphone de 390 pixels de large, une case mesure une vingtaine de pixels de côté. C'est sous le seuil de 24 pixels de la règle « taille de la cible » de WCAG 2.2. Les grilles 5 × 5 et 10 × 10 le dépassent largement, et les flèches du clavier restent un chemin complet vers chaque case. Nous préférons l'écrire ici plutôt qu'invoquer l'exception de présentation essentielle et refermer le dossier.

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.