L'accessibilité n'est pas une réflexion après coup — c'est une exigence. Nous ciblons la conformité WCAG 2.1 AA comme base. Tout le monde devrait pouvoir utiliser Zenovay quelles que soient ses capacités.
Contraste des couleurs
Tout le texte respecte les ratios de contraste minimaux : 4,5:1 pour le texte de corps, 3:1 pour le texte large. Nous ne nous appuyons pas uniquement sur la couleur pour transmettre le sens — les icônes et le texte fournissent un support.
Notre palette de couleurs a été conçue avec l'accessibilité à l'esprit. Chaque couleur sémantique (succès, avertissement, erreur) fonctionne pour les utilisateurs daltoniens lorsqu'elle est associée à des icônes appropriées.
Navigation au clavier
Chaque élément interactif est accessible via le clavier. Les états de focus sont visibles et cohérents. L'ordre des tabulations suit l'ordre visuel. Pas de pièges au clavier.
- Tab et Shift+Tab naviguent entre les éléments
- Entrée active les boutons et les liens
- Échap ferme les modales et les menus déroulants
- Les touches fléchées naviguent dans les composants
Lecteurs d'écran
Nous utilisons d'abord le HTML sémantique, ARIA quand nécessaire. Les images ont un texte alternatif. Le contenu dynamique annonce les changements. Les widgets complexes ont des rôles et des états appropriés.
- Les titres créent la structure du document (h1, h2, h3)
- Les listes regroupent les éléments liés
- Boutons vs liens : boutons pour les actions, liens pour la navigation
- Les champs de formulaire ont des étiquettes associées
- Les régions live annoncent les mises à jour dynamiques
Mouvement
Nous respectons la media query prefers-reduced-motion. Les informations essentielles ne sont jamais transmises uniquement par le mouvement. Les animations sont subtiles et intentionnelles.
Les utilisateurs qui préfèrent les mouvements réduits voient des changements d'état instantanés plutôt que des transitions. L'expérience est également fonctionnelle sans animation.
Tests
Nous testons régulièrement l'accessibilité :
- Tests automatisés avec axe-core en CI
- Tests de navigation au clavier manuels
- Tests avec les lecteurs d'écran VoiceOver et NVDA
- Tests de zoom jusqu'à 200 %
- Vérification du contraste des couleurs dans Figma