Accessibilité

Ce que Cauri garantit

• Contrastes AA sur les couples de la charte. Texte courant, boutons, liens et fonds doux respectent le rapport minimal de 4,5:1 du WCAG 2.x pour le texte normal.
• Composants navigables au clavier. Les boutons, liens, champs, menus déroulants, onglets, accordéons, modales et panneaux latéraux se parcourent avec Tab, les flèches, Entrée, Espace et Échap.
• Focus visible. Les éléments interactifs affichent un indicateur de focus quand on les atteint au clavier.
• Mouvement réduit. Les transitions sont coupées quand le système demande de réduire les animations.

Une couleur à ne jamais utiliser pour du texte

Le vert de marque (#6CA942, variable --cauri-green-brand) n’atteint que 2,8:1 sur fond blanc. Il sert aux filets et aux accents décoratifs, comme le trait sous l’en-tête. Pour du texte, des boutons ou des coches, utilisez le vert accessible #387A1B (5,3:1 sur blanc). Voir la page Couleurs.

Si vous ajoutez une couleur au thème, contrôlez-la : les classes text-bg-* choisissent automatiquement un texte blanc ou noir lisible sur le fond, ce qui évite d’associer couleur et fond à la main.

Clavier et focus

Cauri s’appuie sur des éléments HTML natifs (button, a, input) : leur comportement au clavier vient du navigateur. Le JavaScript ajoute ce que HTML ne fait pas seul :

• la modale et le panneau latéral gardent le focus à l’intérieur tant qu’ils sont ouverts, se ferment avec Échap et rendent le focus au bouton d’origine ;
• les menus déroulants se parcourent avec les flèches haut et bas ;
• les onglets et le carrousel répondent aux flèches gauche et droite ;
• les infobulles s’ouvrent aussi au focus, à condition d’être posées sur un élément focalisable (bouton, lien, champ).

Si vous retirez un contour de focus, remplacez-le par un équivalent visible. L’aide Anneau de focus propose un style prêt à l’emploi.

Mouvement réduit

Quand l’utilisateur active « Réduire les animations » dans son système, la feuille de style désactive les transitions des composants (fondu de la modale, glissement du menu mobile, repli de l’accordéon…). Le défilement doux de la page n’est actif que si l’utilisateur n’a pas exprimé cette préférence. Les composants BDU suivent la même règle : la carte produit ne se soulève plus au survol.

Ce comportement dépend de l’option Sass $enable-reduced-motion, activée par défaut (voir Options Sass). Ne la désactivez pas.

Une limite : Cauri n’interrompt pas l’avance automatique d’un carrousel. Si vous en utilisez un avec data-bs-ride="carousel", prévoyez un bouton pause visible.

Ce qui n'est pas encore vérifié

• Pas de test avec des lecteurs d’écran. Le balisage suit les bonnes pratiques et les attributs ARIA sont en place, mais aucune vérification n’a été faite avec VoiceOver, NVDA, JAWS ou TalkBack. Testez vos parcours critiques avant la mise en production.
• Contrastes du thème sombre. Onze couples sont contrôlés par le test automatisé, et toutes les pages de la documentation ont été auditées en thème sombre (aperçus compris). Les classes à couleur fixe (btn-outline-dark, bg-white…) ne s’y adaptent pas : voir la page Modes de couleur.
• Pas d’audit WCAG complet. Les contrôles couvrent les contrastes des couples de la charte, pas l’ensemble des critères du WCAG. Les couleurs d’avertissement et de danger (valeurs d’origine) ne figurent pas dans le test automatisé.
• Le contraste de l’indicateur de focus n’est pas mesuré par le test automatisé. Vérifiez-le sur vos propres fonds.
• La charte est provisoire. Les couleurs seront confirmées par la charte officielle ; relancez npm test à ce moment-là.