Accessibilité et responsive

Le frontend web vise le niveau AA du RGAA et des WCAG 2.1, exigé pour un service public communal. Aucun audit externe n'a été réalisé : cette page décrit ce qui est implémenté dans le code, et liste les écarts connus. Le cadre juridique (obligation, déclaration d'accessibilité) est traité dans Accessibilité numérique.

#Structure des pages

#Clavier et focus

• Tous les contrôles sont des button, a ou champs natifs. Aucun div cliquable ne remplace un bouton.
• Le contour de focus est global : :focus-visible dessine 2 px en couleur --violet, décalés de 2 px (globals.css). Les champs de saisie le remplacent par une bordure encre et un halo jaune de 4 px.
• Les boutons qui ne contiennent qu'une icône (cloche, déconnexion, fermeture des feuilles) portent un aria-label ; les icônes elles-mêmes sont en aria-hidden.
• Les feuilles modales (Sheet.tsx) ont role="dialog", aria-modal="true" et aria-labelledby sur leur titre. À l'ouverture, le focus va au premier élément focusable ; Tab et Maj+Tab restent piégés dans la feuille ; Échap ferme si la feuille est fermable ; le défilement de la page est bloqué ; à la fermeture, le focus revient à l'élément qui l'avait ouverte.
• La carte à gratter (ScratchCanvas.tsx) se gratte à la souris, au doigt ou au stylet (événements pointer) et propose un bouton « Révéler sans gratter » pour le clavier et les lecteurs d'écran. La couche à gratter est peinte en jaune --sun (lu dans les styles calculés, #FFDA38 par défaut) avec son libellé en encre #1D2637. Le code masqué est annoncé « Code masqué » puis révélé dans une zone aria-live.
• Le bandeau de consentement (ConsentBanner) est une région titrée (role="region", aria-labelledby) ; ses boutons « Tout refuser » et « Tout accepter » ont la même présentation. Dans ConsentControls, le choix actif est exposé par aria-pressed et l'état courant est annoncé en role="status". Le bandeau n'est pas une feuille modale : il ne piège pas le focus.
• Le bouton de son (SoundToggle) ne contient qu'une icône ; il porte un aria-label et un title qui changent avec l'état (« Couper les sons » ou « Activer les sons »).

#Lecteurs d'écran

Le test « fournit un tableau équivalent pour les lecteurs d'écran » de components.test.tsx vérifie le tableau de BarList, et « expose la progression aux technologies d'assistance » vérifie la jauge.

#Mouvement

Une règle globale de globals.css neutralise toutes les animations et transitions quand le système demande moins de mouvement :

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

La roue du tirage, les squelettes et l'ouverture des feuilles deviennent donc instantanés.

Les sons du tirage (roue sur /tirage, compte à rebours des 8 dernières secondes sur /accueil) ne partent jamais d'eux-mêmes au chargement : useSound.ts attend une première interaction (clic, toucher ou touche du clavier, ou navigator.userActivation.hasBeenActive). Ils se coupent avec SoundToggle, et ce choix est mémorisé (bl.pref.sound). Aucune information n'est transmise par le son seul : la roue et le compte à rebours restent visibles.

#Contrastes

Ratios calculés sur les valeurs de globals.css (formule WCAG de luminance relative). Le seuil AA est 4,5 pour le texte courant et 3 pour le grand texte (24 px, ou 18,66 px en gras) et les éléments graphiques.

Pour les éléments graphiques (seuil 3) :

Le texte d'un bouton désactivé (--text-muted sur --surface-elevated, 2,76 en clair) n'est pas soumis au seuil, les composants inactifs en étant exemptés par les WCAG.

#Responsive

Le site est conçu d'abord pour le téléphone, puis élargi. Les points de rupture sont ceux de Tailwind par défaut.

D'autres mesures concernent le mobile :

• viewport avec viewportFit: 'cover', et marges basses env(safe-area-inset-bottom) pour la barre d'onglets et les feuilles : rien n'est masqué par la barre système des iPhone.
• Hauteurs en dvh (min-h-dvh) pour tenir compte de la barre d'adresse mobile.
• Boutons de 52 px de haut (min-h-[52px]) en taille md, au-dessus des 44 px recommandés pour une cible tactile. Les boutons sm font 40 px, comme la cloche des notifications.
• Contenu principal limité à max-w-6xl, avec une marge basse de 144 px sur mobile pour ne pas passer sous la barre d'onglets et la mention de sécurité.
• -webkit-text-size-adjust: 100% empêche l'agrandissement automatique du texte en mode paysage sur iOS.
• Champs avec inputMode et autoComplete adaptés (email, numeric, one-time-code) pour afficher le bon clavier.

#Points à vérifier avant une mise en ligne

1. Corriger les contrastes listés plus haut.
2. Ajouter la navigation aux flèches dans SegmentedTabs et ChoicePills.
3. Traduire les quelques textes d'interface encore en français fixe (loader de session, libellé du spinner).
4. Faire un audit manuel avec un lecteur d'écran (NVDA, VoiceOver) et un contrôle automatique (axe) sur les parcours clés : connexion, achat, tirage, boutique.
5. Rédiger la déclaration d'accessibilité.