Un design system accessible : composants, tokens, documentation
Cette page fait partie de La mise en conformité RGAA.
Le meilleur rapport entre effort et conformité
Un audit compte les non-conformités par problème, pas par occurrence. Or sur un site industrialisé, un problème vit dans un composant et se répète partout où ce composant est utilisé. Corriger le composant corrige tout le site.
Un design system accessible transforme donc la conformité d’un travail proportionnel au nombre de pages en un travail proportionnel au nombre de composants. Sur un grand site, le rapport est de un à cent.
Les jetons de couleur, vérifiés par le calcul
Une palette ne se valide pas à l’œil. Chaque couple texte / fond et chaque couple composant / fond doit être calculé : 4,5:1 pour le texte courant, 3:1 pour les composants d’interface et les éléments graphiques porteurs d’information.
Le contrôle doit être automatisé et rejoué à chaque évolution de la charte. C’est ce que fait le site que vous lisez : ses 20 couples de couleurs sont recalculés avant chaque mise en ligne, dans les deux thèmes, et un contraste insuffisant fait échouer le déploiement.
Ce que chaque composant doit documenter
- l’élément HTML sous-jacent — natif de préférence, et la raison s’il ne l’est pas ;
- le comportement clavier attendu : quelles touches, quel ordre, comment on en sort ;
- l’état de focus, dessiné et non laissé à l’implémentation ;
- le nom accessible : d’où il vient, et ce qu’il devient quand le composant n’a pas de texte visible ;
- les annonces produites lors d’un changement d’état ;
- les usages interdits — souvent le plus utile : « ne pas utiliser ce composant comme lien », « ne pas imbriquer ».
Sans la raison écrite, chaque arbitrage se rejoue : quelqu’un trouvera le gris trop foncé, l’anneau de focus trop visible, l’étiquette trop longue. Une ligne expliquant « ce gris est le plus clair qui atteigne 4,5:1 » clôt la discussion en dix secondes, et pour toujours.
Les pièges des bibliothèques toutes faites
Une bibliothèque de composants réputée accessible ne garantit rien une fois intégrée. Trois écarts reviennent : la palette d’origine est remplacée par celle de la marque sans revérifier les contrastes ; les composants sont surchargés en CSS et perdent leur focus visible ; les composants natifs sont remplacés par des versions personnalisées jugées plus jolies.
Il faut donc auditer le design system tel qu’il est configuré chez vous, pas tel qu’il est livré.
Le point de bascule
À partir de quelques dizaines de pages, investir dans le design system coûte moins cher que corriger les pages — et surtout, l’investissement ne se redéprécie pas à chaque nouvelle page. C’est aussi ce qui rend la non-régression tenable dans le temps.