Design system accessible
Vos interfaces héritent de l’accessibilité de votre design system. Nous l’y intégrons dès le départ.
Pour les organisations qui ont une charte graphique ou une bibliothèque de composants. Vos écrans sont produits par vos équipes, par des assistants IA ou par un prestataire : le même DESIGN.md guide les uns et les autres.
Le problème
Les interfaces produites avec l’IA reproduisent les défauts du système de design : contrastes insuffisants, contour de focus invisible (c’est lui qui montre où l’on se trouve au clavier), cibles trop petites, mouvement imposé. On les corrige ensuite page par page, à chaque nouvelle génération.
Corriger le système une fois évite de corriger chaque écran.
Design system, DESIGN.md : de quoi parle-t-on ?
Un design system rassemble les couleurs, les polices et les composants (boutons, champs, menus) qui servent à construire toutes vos interfaces.
Le DESIGN.md est un fichier texte, au format publié par Google Labs, qui décrit ce design system. Les assistants IA qui écrivent du code le lisent, vos designers et vos développeurs aussi. Ce que le fichier contient, l’assistant le reproduit sur chaque écran. Une couleur trop pâle devient un défaut sur toutes vos pages ; une règle d’accessibilité bien écrite devient une qualité de toutes vos pages.
La spécification du format DESIGN.md, sur GitHub (en anglais)
Le format touche peu à l’accessibilité : une seule de ses règles de contrôle la concerne, le contraste du texte. Notre extension, design-md-a11y, y ajoute les règles qui manquent, et notre outil vérifie qu’elles sont tenues.
Ce que cela change pour vous
- Moins de défauts à reprendre : couleurs et contrastes, contour de focus, taille des boutons et des liens sont fixés une fois, dans un design system contrôlé, puis repris sur chaque écran. Les règles sur les animations, l’espacement du texte et l’affichage sur petit écran y sont écrites aussi.
- Un contrôle qui se rejoue : même fichier, même rapport. Votre équipe relance le contrôle à chaque version, avec notre outil.
- Des écarts compréhensibles : chaque écart du rapport donne son emplacement dans le fichier et le critère du RAWeb ou des WCAG concerné.
Trois formules
Diagnostic
Pour qui : un site existe déjà.
Le DESIGN.md de votre design system réel, extrait du code de votre site. Un rapport d’écarts, chaque écart relié à son critère : RAWeb 1.1, ou WCAG quand le critère est hors RAWeb. Un plan de correction par priorité.
Conception
Pour qui : une refonte ou un nouveau produit.
Un DESIGN.md écrit avant le code, à partir de vos maquettes ou de votre charte, avec ses réglages d’accessibilité et son rapport de contrôle. Placé à la racine de votre dépôt, il est lu par vos assistants de code. Un atelier de transfert pour vos designers et vos développeurs.
Suivi
Pour qui : après un diagnostic ou une conception.
Un nouveau contrôle à chaque version de votre design system. Une mise à jour des réglages quand les référentiels évoluent.
Concrètement, dans les trois formules :
- Nous écrivons votre DESIGN.md, ou nous l’extrayons de votre site, avec ses réglages d’accessibilité.
- Notre outil de contrôle, design-md-a11y-lint, le vérifie : il calcule chaque contraste et compare chaque réglage aux seuils des référentiels.
- En conception, nous corrigeons le fichier jusqu’à zéro erreur et expliquons chaque alerte restante. En diagnostic, chaque écart va dans le rapport, avec un plan de correction.
- Nous vous remettons le fichier, le rapport de contrôle et l’outil. Votre équipe relance le même contrôle dans sa chaîne d’intégration, à chaque modification du DESIGN.md.
La conformité de vos interfaces se mesure ensuite par un audit, réalisé par le cabinet.
Vos assistants de code peuvent aussi recevoir nos skills. Voir l’offre Outiller vos équipes
Déroulé
| Formule | Étapes |
|---|---|
| Diagnostic | Lecture du site, puis extraction du DESIGN.md, contrôle, rapport d’écarts et plan de correction |
| Conception | Lecture des maquettes ou de la charte, puis écriture du DESIGN.md, contrôle et atelier de transfert |
| Suivi | À chaque version : contrôle et rapport ; mise à jour quand les référentiels évoluent |
Format et tarif
| Formule | Format | Tarif |
|---|---|---|
| Diagnostic | Une fois, sur un site existant | Sur devis |
| Conception | Une fois, avant le code | Sur devis |
| Suivi | À l’année | Sur devis |
Extrait de livrable
Rapport réel de notre outil design-md-a11y-lint sur le cas fictif « Banque Numérique » du skill, mis en forme pour la lecture.
Extrait d’un rapport de contrôle · cas fictif
Contrôle par design-md-a11y-lint 0.1.0
erreur focus-contrast a11y.focus.ringColor
anneau #A0C4FF à 1,77:1 sur le fond,
3:1 attendu (RAWeb 3.3)
alerte target-size components.button-icon-close
16 × 16 px, 24 × 24 px attendus
(WCAG 2.5.8, anticipé)
alerte large-text-contrast components.hero-banner
texte large à 2,52:1, 3:1 attendu (RAWeb 3.2)
information motion-reduced a11y.motion.respectReducedMotion
valeur false : recommandation (WCAG 2.3.3,
niveau AAA), pas une exigence du niveau AA
… 9 autres constats
Linter de Google : 0 erreur, 6 avertissements,
dont 3 attendus avec l’extension
Extension : 2 erreurs · 3 alertes · 8 informationsExemple de lecture : la première ligne signale un contour de focus trop pâle sur le fond de la page. Son contraste est de 1,77 pour 1, alors qu’il faut au moins 3 pour 1.
Le rapport complet relie chaque écart à son critère et à son emplacement dans le fichier. Il distingue les avertissements de Google dus à l’extension des écarts réels.
Ce que le format DESIGN.md ne couvre pas
Le format DESIGN.md (Google Labs, spécification alpha) décrit l’apparence, pas le comportement. Notre extension y ajoute les réglages d’accessibilité visuels qui lui manquent : contour de focus, taille des cibles, animations, espacement du texte, affichage sur petit écran. L’outil de Google les accepte sans les exploiter ; le nôtre les contrôle. Le comportement au clavier, les rôles ARIA et la structure des pages ne sont pas dans le fichier : ils se vérifient à l’audit.
Le lien avec le cabinet
L’audit de vos maquettes d’interface n’est pas compris dans cette offre : il est réalisé par le cabinet.
Preuves
- Contrat de designLe DESIGN.md d’audit-web.aiPublic
- Outil maisonL’extension design-md-a11y et son outil de contrôleSkill 1.2.0, outil 0.1.0 · Dépôt privé
Questions fréquentes
Nos assistants peuvent-ils connaître nos composants ?
Oui, avec un skill écrit pour votre design system : vos composants et leurs règles d’accessibilité. Voir les skills sur mesure
Nous n’avons pas de DESIGN.md. Est-ce un problème ?
Non. Nous l’écrivons à partir de ce que vous avez : un design system dans Figma ou dans le code, ou simplement une charte graphique et quelques maquettes.
Pouvons-nous relancer le contrôle nous-mêmes ?
Oui. Notre outil design-md-a11y-lint est inclus dans la prestation : votre équipe le lance 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 pour votre code.
Est-ce que cela rend nos interfaces conformes ?
Pas à lui seul. Un design system accessible évite à la source les défauts de couleur, de contraste, de focus et de taille de cible. Il pose aussi les règles d’animation, d’espacement du texte et d’affichage sur petit écran. Il ne règle ni le contenu, ni la structure des pages, ni le comportement au clavier. La conformité d’une interface se mesure par un audit, réalisé par le cabinet.
Faut-il ajouter quelque chose à nos pages ?
Non. Le contrôle porte sur votre DESIGN.md. Rien n’est ajouté à vos pages : pas d’overlay, cette surcouche correctrice.
Faire relire votre design system
Envoyez-nous votre DESIGN.md ou un accès à votre design system. Nous revenons vers vous avec une proposition de cadrage.
Les autres offres
Site accessible par construction
Un site produit avec l’IA, livré avec son audit et sa déclaration d’accessibilité.
Interfaces et agents IA accessibles
Interfaces conversationnelles et générées, utilisables avec les technologies d’assistance.
Outiller vos équipes
Des assistants de code qui connaissent le RGAA, le RAWeb, les WCAG et la norme EN 301 549, ainsi que vos propres règles d’accessibilité.