design-md-a11y
En production
design-md-a11y écrit les règles d’accessibilité de votre design system dans son DESIGN.md, le fichier que lisent vos assistants de code. Un outil vérifie ensuite qu’elles sont tenues. Il sert dans les offres Design system accessible et Site accessible par construction : nous l’appliquons à votre design system, et votre équipe reçoit l’outil de contrôle. Il s’installe aussi dans vos assistants avec l’offre Outiller vos équipes.
Ce que le format ne couvre pas
Le format DESIGN.md, publié par Google Labs en spécification alpha, décrit couleurs, typographie et composants. Il ne fixe ni l’anneau de focus, ni la taille des cibles, ni les animations, ni l’espacement du texte, ni l’affichage sur petit écran. Il ne traite pas non plus du comportement : clavier, ARIA, hiérarchie.
design-md-a11y ajoute ces réglages visuels dans l’en-tête du fichier, sous une seule clé, a11y. Le linter de Google, son contrôle automatique, l’accepte avec un avertissement, sans l’exploiter. Une seule de ses onze règles touche l’accessibilité.
La spécification du format DESIGN.md, sur GitHub (en anglais)
Cinq familles de réglages
| Famille | Ce qu’elle fixe | Référence |
|---|---|---|
focus | Couleur, épaisseur et décalage de l’anneau de focus ; marge pour qu’un en-tête fixe ne le masque pas | RAWeb 10.7 et 3.3 ; WCAG 2.4.11, anticipé |
target | Taille minimale et taille visée des cibles | WCAG 2.5.8, anticipé ; WCAG 2.5.5 (niveau AAA) pour la taille visée |
motion | Durée maximale des animations ; respect de la préférence « mouvement réduit » | RAWeb 13.8 ; mouvement réduit : WCAG 2.3.3 (niveau AAA), recommandé |
text.spacing | Espacements du texte que la mise en page doit supporter | RAWeb 10.12 ; WCAG 1.4.12 |
reflow | Affichage sans défilement horizontal à 320 px de large | RAWeb 10.11 ; WCAG 1.4.10 |
Deux réglages facultatifs complètent ces familles : themes, la couleur d’anneau et les fonds de chaque thème, par exemple le mode sombre ; surfaces, la liste des fonds, quand leurs noms ne suffisent pas à les reconnaître.
Anticipé : critère des WCAG 2.2 que le RAWeb 1.1 ne contient pas encore.
Règles de contrôle
| Règle | Niveau | Ce qu’elle vérifie |
|---|---|---|
| Contrôle de format | Erreur, alerte ou information | Les réglages sont lisibles : clé a11y, références et valeurs. Un fichier à l’ancien format est invité à migrer |
| Contrôle de présence | Erreur ou information | Les réglages obligatoires et recommandés sont déclarés |
focus-contrast | Erreur ou alerte | Contraste de l’anneau de focus d’au moins 3:1 contre chaque fond où il se dessine, thème par thème. Alerte quand la mesure repose sur une donnée supposée ou manquante |
target-size | Alerte | Cibles d’au moins 24 × 24 px, sauf liens dans le texte |
large-text-contrast | Information ou alerte | Contraste d’au moins 3:1 pour les grands textes |
non-text-contrast | Alerte ou information | Contraste d’au moins 3:1 pour les bordures des composants. Information pour une couleur de bordure qu’aucun composant n’utilise |
text-spacing-tokens | Information | Les espacements du texte sont déclarés, aux valeurs du test |
motion-reduced | Information | La préférence « mouvement réduit » est déclarée |
Comment le contrôle se fait
Notre outil design-md-a11y-lint lance le linter de Google, puis applique ces règles. Son rapport sépare les avertissements de Google, y compris ceux que l’extension provoque elle-même, des constats de l’extension. Les contrastes sont calculés, jamais estimés. Même fichier, même rapport : le contrôle se rejoue à chaque version.
L’outil est inclus dans la prestation. Votre équipe peut le lancer dans sa chaîne d’intégration, à chaque modification du DESIGN.md. Il exporte aussi les réglages d’accessibilité en propriétés CSS, par exemple --a11y-focus-ring-color, y compris pour le mode sombre : votre code les applique.
Un assistant IA qui a reçu le skill design-md-a11y applique les mêmes règles, même sans l’outil : il calcule les contrastes avec un script, jamais de tête.
Ce qu’il ne fait pas
- Il ne vérifie pas le comportement : clavier, ordre de lecture, rôles ARIA, gestion du focus à l’exécution. Ces points relèvent des tests et de l’audit.
- Il ne rend pas une interface conforme : il fixe le contrat que le code doit respecter. Un DESIGN.md, même sans écart, ne prouve pas la conformité d’un site : seul l’audit du site rendu en juge.
- Les exports de Google ignorent ces réglages. Notre outil les exporte en propriétés CSS, mais c’est le code qui les applique.
- Il n’extrait un DESIGN.md que depuis le code d’un site. À partir de maquettes Figma ou d’un autre format de jetons, le fichier s’écrit, sans extraction.
Référentiels
Critères du RAWeb 1.1 et du RGAA 4.1.2 ; la conformité au premier n’emporte pas celle au second. Anticipés, hors RAWeb : WCAG 2.2, critères 2.4.11 et 2.5.8.
Statut et accès
| Statut | En production |
|---|---|
| Contrôle automatique | Outil design-md-a11y-lint 0.1.0, inclus dans la prestation (Node.js 22 ou plus récent) |
| Version | 1.2.0, octobre 2026 |
| Dépôt | Privé |
| Licence | Installable dans vos assistants, sous licence : Outiller vos équipes |
| Exemple public | Le DESIGN.md de ce site, et son rapport de contrôle |
| Pour en bénéficier | Design system accessible ; Site accessible par construction ; Outiller vos équipes |
Faire relire votre design system
Nous appliquons l’extension à votre design system, avec un rapport d’écarts.
Les autres produits
a11y-assistant
Assistant IA d’audit d’accessibilité : il prépare le rapport, la grille de critères et la déclaration, rédige des spécifications à partir des maquettes et explique les critères en contexte.
Catalogue A2UI
Composants React accessibles pour les interfaces qu’un agent IA génère, avec leur validateur.
a11y-engine
294 règles écrites par le cabinet : 62 concluent seules, les autres signalent un point à faire lire par un humain. Aujourd’hui, il alimente sept tests d’a11y-assistant.
a11y-raweb
Skill d’accessibilité pour assistants IA, fondé sur le RAWeb 1.1 : l’assistant dispose des critères et d’exemples de code au moment d’écrire.