Qu'est-ce qu'un système de conception pour l'accessibilité ?

Qu'est-ce qu'un système de conception pour l'accessibilité ?

Un système de conception (design system) est une bibliothèque partagée de composants, de jetons de design et de règles d'usage que les équipes réutilisent dans tout le produit. Il sert l'accessibilité lorsque chaque composant est construit et testé une seule fois pour répondre à des exigences comme l'usage au clavier, un focus visible, un contraste suffisant et des libellés corrects : chaque équipe qui l'utilise hérite de ce travail au lieu de le refaire.

Ce que contient un système de conception accessible

• Des jetons de design : des paires de couleurs vérifiées par rapport aux seuils de contraste des WCAG, voir les palettes de couleurs accessibles, ainsi que des styles de focus, des espacements et des tailles minimales de cibles.
• Des composants au comportement intégré : boutons, champs de formulaire, menus et boîtes de dialogue qui fonctionnent au clavier, gèrent le focus et exposent le bon rôle, le bon nom et le bon état aux technologies d'assistance.
• Des consignes : quand utiliser chaque composant, comment rédiger libellés et messages d'erreur, et quand recourir à ARIA uniquement parce que le HTML natif ne suffit pas.
• Un journal de tests : ce qui a été vérifié, avec quels outils, et ce qui reste ouvert.

Exemple

Une boîte de dialogue modale est facile à rater : le focus doit y entrer, y rester tant qu'elle est ouverte, revenir au déclencheur à la fermeture, et la touche Échap doit la fermer. En construisant et en testant cela une fois dans le composant de dialogue du système, chaque écran qui l'utilise obtient ce comportement, y compris l'ordre de navigation au clavier. Il en va de même pour un champ de formulaire dont le libellé, l'aide et le message d'erreur sont liés.

Le U.S. Web Design System en est un exemple public. Il vise le niveau WCAG 2.1 AA, teste ses composants avec des lecteurs d'écran, au clavier seul, au zoom et au tactile, et lance des analyses automatiques à chaque modification du code.

Erreurs fréquentes

• Croire que les composants rendent le produit accessible. Le U.S. Web Design System le dit clairement : utiliser des composants accessibles ne garantit pas un service accessible. La mise en page, le contenu, les titres et le parcours restent à votre charge.
• Corriger les composants dans une application plutôt que dans le système. La correction est alors perdue pour les autres équipes.
• Écraser les styles des composants. Un changement de couleur local peut casser le contraste, et supprimer le contour de focus empêche l'usage au clavier.
• Ne pas documenter l'usage accessible. Un bon composant détourné vers un autre élément échoue quand même.
• Tester uniquement avec des outils automatiques. Ils ne détectent qu'une partie des problèmes ; voir les tests d'accessibilité automatisés, et ajoutez des vérifications manuelles et avec des technologies d'assistance.

Lien avec les tests et la surveillance

Testez chaque composant isolément, puis de vraies pages construites avec eux, car l'accessibilité peut casser dans l'assemblage. Des contrôles automatiques en intégration continue repèrent les régressions après un changement. La surveillance de la vitesse de page LoadFocus enregistre le score d'accessibilité Lighthouse selon un calendrier, depuis 25 régions cloud, ce qui rend visible une baisse après une mise en production. Ce score est un signal automatique, pas une preuve de conformité. Sur l'articulation entre accessibilité et vitesse dans les tests, voir performance testing et métriques d'accessibilité (en anglais).

Questions fréquentes : systèmes de conception pour l'accessibilité

Un système de conception rend-il mon site accessible ?

Non. Il supprime une grande part des erreurs répétées au niveau des composants, mais la structure des pages, le contenu et les parcours demandent leurs propres vérifications.

Quelle norme un système de conception doit-il viser ?

La plupart des équipes visent WCAG 2.1 ou 2.2 niveau AA. Le U.S. Web Design System, par exemple, vise 2.1 AA et progresse vers les critères de 2.2.

Qui est responsable de l'accessibilité dans un système de conception ?

L'équipe du système répond du comportement et de la documentation des composants. Les équipes produit répondent de leur assemblage en pages et de leur contenu.

Comment tester un composant accessible ?

Combinez analyses automatiques, usage au clavier seul, un passage au lecteur d'écran et des contrôles de zoom. Recommencez après chaque modification du composant.