Construire un design system accessible
C'est le meilleur investissement d'accessibilité qu'une organisation puisse faire, et le seul dont le rendement croît avec le temps. Un jeton de couleur corrigé répare toutes ses occurrences. Un composant rendu accessible une fois l'est partout où il est employé, y compris dans les produits qui n'existent pas encore.
Les jetons de couleur
Premier chantier, et le plus rentable. Chaque paire réellement employée — texte sur fond, texte sur surface, texte sur encadré — se calcule et se documente avec son rapport de contraste.
| Élément | Seuil | Oubli fréquent |
|---|---|---|
| Texte courant | 4,5:1 | Les textes secondaires en gris clair |
| Texte de grande taille | 3:1 | Les titres en couleur de marque |
| Bordures de champs | 3:1 | Presque toujours oublié |
| Indicateur de focus | 3:1 | Contre le fond et contre la surface |
| Icônes signifiantes | 3:1 | Pictogrammes de statut |
| Thème sombre | idem | Rien ne se transpose : tout se recalcule |
Voir la vérification des contrastes.
L'état de focus, composant à part entière
Supprimer l'indicateur de focus par défaut sans le remplacer est la non-conformité la plus répandue du web, et elle se décide presque toujours en maquette, pour des raisons esthétiques.
Un design system sérieux spécifie l'état de focus au même titre que l'état de survol : forme, épaisseur, décalage, couleur, et comportement sur fond clair comme sur fond sombre.
Les composants
Chaque composant interactif se documente avec quatre informations que les bibliothèques oublient régulièrement : le balisage natif employé, le comportement au clavier attendu, les états annoncés aux technologies d'assistance, et la gestion du focus à l'ouverture comme à la fermeture.
| Composant | Attendu au clavier |
|---|---|
| Bouton | Activable à la barre d'espace et à la touche Entrée |
| Accordéon | Ouverture et fermeture au clavier, état déplié annoncé |
| Onglets | Navigation aux flèches, panneau associé à son onglet |
| Fenêtre modale | Focus capturé, fermeture par la touche d'échappement, focus restitué |
| Menu déroulant | Ouverture au clavier, parcours des entrées, fermeture sans piège |
| Champ de saisie assistée | Suggestions parcourables, nombre annoncé, sélection au clavier |
Documenter, pas seulement livrer
Un composant accessible mal documenté finit détourné. La fiche de chaque composant gagne à préciser ce qu'il ne faut pas faire : ne pas remplacer l'étiquette par un texte indicatif, ne pas imbriquer deux éléments interactifs, ne pas modifier les couleurs localement.
Cette dernière règle est celle qu'on enfreint le plus, et elle annule à elle seule le bénéfice des jetons.
Verrouiller ce qui doit l'être
Un système de design n'est utile que s'il est contraignant sur trois points : les couleurs, les états de focus et la structure des gabarits. Le reste peut rester ouvert. Voir le cas des constructeurs de pages.
Le rendement dans le temps
C'est l'argument à porter devant une direction : le coût est engagé une fois, le bénéfice se répète à chaque projet. Une organisation qui dispose d'un système de design accessible voit le coût de ses audits baisser, ses contre-audits se réduire, et ses nouveaux services naître conformes.
Poursuivre
Pour le dispositif qui empêche la dégradation, voyez la maintenance et la non-régression.