Design System Accessible : Les bonnes pratiques pour 2024
En Bref : L'essentiel à retenir
- Un Design System accessible est crucial pour une accessibilité native et efficace, simplifiant le travail des développeurs.
- Les composants accessibles doivent respecter la sémantique HTML, gérer correctement les états (focus, hover, disabled) et garantir des contrastes de couleurs appropriés.
- La documentation est essentielle : chaque composant doit inclure des informations sur l'usage au clavier, les annonces vocales et les propriétés obligatoires pour l'accessibilité.
- Adopter une approche "Shift Left" en intégrant l'accessibilité dès la conception et le développement permet de réduire la dette technique et les coûts de correction.
L'accessibilité ne doit pas être une "verrue" qu'on ajoute sur un produit fini. Pour être efficace et pérenne, elle doit être native. C'est là tout l'enjeu d'un Design System accessible. Si vos briques de base (boutons, champs, modales) sont conformes, 80% du travail est fait pour les développeurs.
Les 3 piliers d'un composant accessible
Pour chaque composant de votre bibliothèque (Figma ou code), vérifiez ces trois aspects :
1. La Sémantique (HTML natif)
C'est la règle d'or : utilisez les balises HTML pour ce qu'elles sont.
- Un bouton est un
<button>, pas une<div>avec unonClick. - Un lien est un
<a>. - Un champ de formulaire a toujours un
<label>associé (attributfor/id).
Si vous devez créer un composant complexe (ex: un accordéon ou une modale), respectez les motifs de conception ARIA Authoring Practices du W3C.
2. Les États (Focus, Hover, Disabled)
Un composant n'est pas statique. Il vit.
- Focus visible : Ne supprimez jamais l'outline (
outline: none) sans le remplacer par un style visible (bordure épaisse, changement de couleur). C'est vital pour la navigation au clavier. - Disabled : Évitez les boutons désactivés grisés qui sont souvent illisibles (contraste insuffisant). Préférez un bouton actif qui affiche un message d'erreur explicite au clic.
3. Les Contrastes (Couleurs)
Votre palette de couleurs doit être validée mathématiquement.
- Texte normal : Ratio de 4.5:1 minimum avec le fond.
- Texte large / Icônes : Ratio de 3:1 minimum.
- Ne jamais utiliser la couleur seule : Une erreur dans un formulaire ne doit pas être juste rouge. Ajoutez une icône ou un texte "Erreur".
Documentation : le chaînon manquant
Un Design System n'est pas qu'une librairie UI, c'est une documentation. Pour chaque composant, ajoutez une section "Accessibilité" :
- Usage clavier : "On entre avec Tab, on valide avec Espace".
- Annonces vocales : "Le lecteur d'écran doit annoncer 'Bouton, fermé'".
- Props obligatoires : "Ce composant nécessite une prop
aria-labelsi le texte n'est pas visible".
L'approche "Shift Left"
En intégrant ces règles dès la phase de design (Figma) et de développement des composants (Storybook), vous réduisez drastiquement la dette technique. Un bug d'accessibilité corrigé dans le Design System est corrigé partout. Un bug corrigé en production coûte 100 fois plus cher.
Guides RGAA associés
Pour aller plus loin sur les sujets abordés dans cet article, consultez nos fiches techniques :
Le contraste entre la couleur du texte et la couleur de son arrière-plan doit être suffisamment élevé (4.5:1 pour le texte normal, 3:1 pour le grand texte).
Le contraste des composants d'interface et des éléments graphiques porteurs d'information doit être d'au moins 3:1 par rapport à leur arrière-plan.
L'intitulé de chaque lien doit être explicite et permettre de comprendre la destination ou la fonction du lien, même hors contexte.
Articles similaires
Votre site est-il conforme ?
Ne prenez pas de risques avec l'accessibilité. Lancez un audit complet de votre site en quelques minutes et obtenez un rapport détaillé des corrections à apporter.