Accessibilité.

Le bouton courant atteint 44 px de justesse, à 44,5. Le bouton petit de la trame (Voir l’offre dans une carte, celui du mur) tient 44 px par une hauteur minimale : son libellé seul ferait 35,5 px. Celui de l’en-tête ne l’a pas : l’en-tête est posé hors de .tr, et la règle .tr .btn--sm ne le touche pas ; il garde 35,5 px, 33 px sous 360 px. Les entrées du rail font 27,5 px ; les maillons du fil d’Ariane sont des liens dans le texte, à 16,5 px. C’est écrit ici pour qu’on le sache, pas pour l’excuser.

Page.astro pose la classe .js sur l’élément html avant le rendu, par un script inline. Toutes les règles de départ (opacité 0, lignes à 0 %, carrés à 0) n’existent que sous cette classe : sans script, tout est affiché et tracé. Aucune vidéo n’est plus posée depuis le 13 octobre (la section IA de l’accueil a reçu son schéma v2) ; les illustrations v2 s’animent quand même : leur mouvement est écrit dans le SVG, et la boîte du schéma IA flotte par grinn.css, ses étapes éteintes. Les questions s’ouvrent avec details, le menu est un nav ordinaire. Le formulaire, lui, passe la main à la messagerie du visiteur, après la validation du navigateur (Formulaire, rubrique 7).

En mouvement réduit (prefers-reduced-motion: reduce), grinn.css coupe toutes les transitions et les boucles de la trame, arrête le bandeau des clients (sa seconde piste masquée, la rangée défilable à la main), masque la barre de lecture, chaque illustration v2 coupe ses propres animations (son SVG pose animation: none sur tout), la boîte du schéma IA ne flotte pas et ses étapes ne s’allument pas, et les scripts suivent : grinn.js affiche tout d’emblée, trame.ts ne lance aucune ancienne scène en boucle (il n’y en a plus en service), ne fait pas flotter la scène hero ni circuler les carrés de son anneau, trace la grille sans attendre, coupe la parallaxe et les cellules sous la souris, dessine le dôme en une seule image, et ne fait pas tourner les offres du premier écran (leurs traits restent tracés ; le survol et le focus d’une offre allument encore son trait, sans transition ni flux).

Sans script, la démonstration de l’accueil garde ses cases et leurs liens, la scène hero sans flottement, sans traits d’attache ni anneau : rien ne manque pour choisir une offre.

La page est en français (lang="fr"), sans zoom bloqué (width=device-width, initial-scale=1), et commence par le lien d’évitement vers le contenu.

Toutes les paires de texte passent 4,5:1. Dans la démonstration de l’accueil, « Voir l’offre » passait au vert profond sur le vert clair au survol, à 4,497:1 : il passe à l’encre depuis le 12 octobre. La plus juste est le vert profond sur la cellule pâle, à 4,81:1. Le détail, paire par paire, avec la pastille et l’emploi : Couleurs, rubrique 04.

• Le formulaire part par le relais depuis le 12 octobre (Formulaire, rubrique 6) : bilan des erreurs en tête, liens vers les champs, champ refusé marqué, focus sur le premier. Les messages d’état sont annoncés poliment (aria-live polite), pas en alerte, pour ne pas couper l’annonce du champ qui reçoit le focus : à valider avec un lecteur d’écran.
• Les logos du bandeau ont le nom du client pour alternative, ceux du mur des clients et des cartes de la page Réalisations aussi ; un client sans fichier reste en texte, en Outfit. Sur la page Réalisations, le badge « cas » se lit à la suite du nom, dans le bandeau comme dans le nom des liens du mur.
• Le bandeau des clients défile plus de cinq secondes. Le survol l’arrête, et un bouton pause (44 × 44 px, aria-pressed, libellé qui change) l’arrête au clavier et au doigt, comme le demande le critère 2.2.2 de WCAG. Sans script, le bouton reste caché et seul le survol arrête la rangée ; en mouvement réduit, elle ne défile pas.
• La photo de groupe est affichée depuis le 12 octobre (public/assets/equipe/groupe.webp), avec son alt : « L’équipe Grinn, à Nantes » sur l’accueil et la page de l’équipe, « L’équipe Grinn » sur la page carrières. C’est le seul alt de photo à relire. Les photos des réalisations (les cartes des pages d’offre), des lieux et les portraits sont en réserve : une cellule marquée aria-hidden, avec le format attendu. Les captures des cas, dans leur vitrine (les cartes de l’accueil depuis le 13 octobre, la page Réalisations, les pages de cas), sont décoratives : la carte ou la page dit ce qu’elles montrent.
• Le bouton de l’en-tête (35,5 px, 33 px sous 360 px), les entrées du rail (27,5 px) et les maillons du fil d’Ariane font moins de 44 px.
• Le tour des offres du premier écran dure 21,6 s (deux passages, six offres, 1,8 s chacune), et le trait de l’offre allumée défile tant qu’elle l’est ; il n’a pas de bouton pour s’arrêter. Le survol et le focus dans la démonstration l’arrêtent, mais il reprend quand ils en sortent ; il s’arrête seul après deux passages, et le mouvement réduit l’empêche. Le critère 2.2.2 de WCAG demande un moyen de mettre en pause ce qui bouge plus de cinq secondes : à trancher.
• Les illustrations v2 bougent sans fin, par le CSS de leur SVG : l’image flotte (5 s), le vert respire, les nœuds s’allument ; sur l’accueil, trame.ts fait en plus flotter la scène hero et circuler les carrés de son anneau, et grinn.css fait flotter la boîte du schéma IA (5 s) pendant que ses trois étapes s’allument tour à tour (6,6 s). Rien ne les arrête, sinon le mouvement réduit, qui les fige. Le critère 2.2.2 de WCAG demande un moyen de mettre en pause ce qui bouge plus de cinq secondes à côté d’autre contenu : à trancher, avec le tour des offres.
• Aucun test avec un lecteur d’écran n’a été fait. Ce que ces pages disent vient du code, pas d’un parcours réel.