Corriger l’accessibilité écran par écran coûte cher et ne tient pas dans le temps : chaque nouvelle fonctionnalité réintroduit des défauts. Le design system permet de traiter le problème à la source. Un composant accessible le reste partout où il est utilisé.
Cet article fait partie de notre guide complet du design system.
Dans un produit, la même liste déroulante peut apparaître sur cinquante écrans. Si elle n’est pas utilisable au clavier, le défaut se répète cinquante fois. Corrigée dans le design system, elle est corrigée partout à la prochaine mise à jour. C’est ce qui rend l’accessibilité soutenable dans la durée, et c’est particulièrement utile pour les organisations soumises au RGAA ou à l’European Accessibility Act. Voir Accessibilité numérique : qui est concerné par la loi en 2026.
Les WCAG, sur lesquelles s’appuie le RGAA, demandent un contraste d’au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte et les éléments d’interface (bordures de champs, icônes porteuses de sens). Le plus simple est de vérifier ces ratios au niveau des tokens de couleur : chaque combinaison texte-fond autorisée est validée une fois.
Chaque composant interactif doit être utilisable au clavier et afficher un état de focus visible. C’est un état à dessiner, au même titre que le survol.
Les WCAG 2.2 demandent, au niveau AA, des cibles d’au moins 24 × 24 pixels ou un espacement suffisant. Beaucoup d’équipes visent 44 × 44 pixels, la recommandation du niveau AAA, plus confortable sur mobile.
Chaque champ a une étiquette visible et associée, des instructions claires et des messages d’erreur qui disent comment corriger. Ces règles se fixent dans le composant « champ » une fois pour toutes.
Les composants complexes (onglets, modales, menus, accordéons) doivent annoncer correctement leur rôle et leur état. C’est une spécification à transmettre aux développeurs avec le composant.
Le design system ne rend pas un produit conforme à lui seul. Plusieurs critères dépendent de l’usage : la structure des titres de chaque page, les textes alternatifs des images, la clarté des contenus, l’ordre de lecture des écrans assemblés. Il faut donc former les contributeurs et auditer les parcours. Voir Former les contributeurs à l’accessibilité et notre offre d’audit d’accessibilité.
Chez Ooinvestir, la création du design system a commencé par remplacer des couleurs très contrastées mais inaccessibles par une palette harmonieuse et accessible.
Vous devez mettre votre produit en conformité RGAA ? Nous intégrons l’accessibilité dans votre design system pour qu’elle tienne dans la durée.
👉 Découvrir l’offre design system de Wolfox
