Accessibilité — ALD FormaKit

• axe-core (règles WCAG 2.1 A + AA + AAA + bonnes pratiques) : 0 violation sur 11 pages SEO testées (page d'accueil, boutique, fiche produit, guides, FAQ, mentions légales, CGV, CGU, politique de confidentialité, panier, accessibilité).

• Tests lecteur d'écran automatisés via Playwright : 22/35 critères conformes (63%) sur 5 scénarios critiques (connexion, ajout panier, achat checkout, ouverture feedback, navigation sidebar). 2 bugs a11y détectés sur la modale feedback (radios et textarea non étiquetés) — corrigés le ${DATE_AUDIT}.

• Test manuel de focus trap (3 modales) : Tab/Shift+Tab cyclent à l'intérieur, Échap ferme, focus restauré. 12 Tab testés en continu dans la modale feedback, aucun élément focusable extérieur atteint.

• Navigation 100 % au clavier : tous les éléments interactifs sont atteignables et actionnables via Tab, Maj+Tab, Entrée, Échap.

• Lien d'accès rapide « Aller au contenu principal » (skip-link) en début de chaque page, opérationnel dès la première frappe de Tab.

• Landmarks ARIA explicites (banner, navigation, main, contentinfo) sur l'ensemble des écrans — un utilisateur de lecteur d'écran peut sauter directement à la zone qui l'intéresse.

• Indication de la page courante via aria-current sur l'onglet actif du menu.

• Étiquettes accessibles (aria-label / accessibilityLabel) sur tous les boutons et champs de formulaire, y compris ceux sans texte visible.

• Cibles tactiles d'au moins 44 × 44 pixels (WCAG 2.5.5 AAA) sur tous les boutons, liens et contrôles interactifs — utilisable sur mobile et tablette.

• Piège de focus (focus trap) sur les 3 modales de l'application (connexion, retour utilisateur, contrat) : la touche Tab cycle à l'intérieur, Échap ferme, le focus est restauré à l'élément d'origine à la fermeture.

• Respect de la préférence « réduire les animations » (prefers-reduced-motion) du système d'exploitation.

• Indicateur de focus visible (contour doré 3 px) sur tous les éléments interactifs, lisible sur fond sombre.

• Structure de titres hiérarchique et cohérente (un seul H1 par page, H2 pour les sections, etc.).

• Images porteuses d'information accompagnées d'un texte alternatif descriptif ; images purement décoratives correctement masquées pour les lecteurs d'écran.

• La flèche animée décorative « ⌄ » en bas du hero de la page d'accueil est trop petite pour constituer une cible tactile conforme. Elle est purement décorative (tabIndex désactivé, masquée pour les lecteurs d'écran) et n'est pas accessible au clavier — c'est volontaire.

• Les tests lecteur d'écran automatisés couvrent 5 scénarios au cordeau, mais ne remplacent pas une session manuelle avec NVDA + micro pour capter le ressenti subjectif (silences anormaux, annonces confuses, fatigue cognitive). Une session manuelle d'1-2 h est recommandée pour confirmer l'expérience finale. Les scénarios et le mode d'emploi NVDA sont disponibles dans docs/tests-a11y/.

• Les pages auth-gated (/boutique, /panier, /accueil, /mes-formations, /compte) n'ont pas pu être testées en automatisé sans compte de test. Les landmarks sont validés sur /accueil (auth-gated) mais le contenu de la sidebar et du footer reste à vérifier avec un compte de test.

• Les visuels d'aperçu des formations (rendus des slides) ne portent pas encore de description longue pour les utilisateurs aveugles ; le texte alternatif actuel décrit le visuel mais pas le contenu pédagogique de chaque slide.