Catalogue A2UI
Bêta privée
Des composants React accessibles pour les interfaces qu’un agent IA génère, et un validateur qui bloque, avant son affichage, toute interface qui enfreint ses règles.
Le site du catalogue, catalog.audit-web.ai, est accessible sur invitation pendant la bêta.
Ce qu’est A2UI
A2UI, pour Agent-to-User Interface, est un format ouvert défini par Google. Il permet à l’agent IA d’une application d’afficher une interface au fil de l’échange : une fiche, des onglets, un carrousel, ou un formulaire pour demander une saisie structurée.
L’agent émet un document JSON ; le catalogue l’affiche en HTML accessible.
Ce qu’il fait
- 27 composants React : 14 communs au catalogue de base de Google, 5 primitives d’accessibilité ajoutées exprès et 8 composants propres à Audit-Web.
- Un validateur déterministe de 50 codes, en JavaScript et en Python. Il bloque, avant son affichage, toute interface qui enfreint ses règles.
- Zéro dépendance d’accessibilité tierce. Le focus, les rôles ARIA, qui décrivent les composants aux lecteurs d’écran, et la navigation au clavier sont écrits dans le catalogue. Ni Radix, ni Floating UI, ni TanStack, ni Headless UI, directement ou par dépendance.
- Deux usages : l’agent émet l’interface pendant l’exécution, ou il écrit du code React qui importe les composants, vérifié en intégration continue.
Les 27 composants
| Famille | Composants |
|---|---|
| Communs au catalogue de base de Google (14) | Text, Image, Icon, Row, Column, List, Card, Modal, Tabs, Button, TextField, ChoicePicker, Slider, DateTimeInput |
| Primitives d’accessibilité ajoutées (5) | Heading, Link, Form, Section, Select |
| Propres à Audit-Web (8) | Tag, Spinner, NotificationContainer, Notification, Disclosure, Accordion, Tooltip, Carousel |
Un registre personnalisé permet de remplacer ou d’étendre ces composants dans le moteur de rendu.
Le validateur
Le même document donne le même verdict, en JavaScript comme en Python.
Deux modes
Mode strict, par défaut : une erreur bloque l’affichage et fait échouer la construction du projet. Mode d’alerte : toutes les anomalies remontent, rien n’est bloqué. Utile pour mesurer avant de corriger.
Un retour fait pour l’agent
Quand un document échoue, le validateur renvoie une réponse
VALIDATION_FAILED: la surface concernée, le chemin de l’élément en cause dans le document, le message et la liste complète des anomalies. L’agent corrige son document et le renvoie.Une ligne de commande
a2ui-validatorapplique les mêmes règles que la bibliothèque. Elle sort en code 1 si une erreur bloque, en code 0 sinon : elle s’insère directement dans une intégration continue.JavaScript et Python à l’identique
Les deux validateurs partagent le même schéma JSON et les mêmes 48 règles : mêmes codes, mêmes sévérités, même ordre. Des tests vérifient cette correspondance.
Deux options
L’option « langue de la page » évite les fausses alertes sur les attributs de langue. L’option « page complète », réservée à une page entière, exige un titre de niveau 1 ; par défaut, elle est désactivée, car un document A2UI s’insère le plus souvent dans une page qui a déjà le sien.
En situation
Le document transmis par l’agent
Le document complet, avec sa version et son enveloppe updateComponents. Il passe le validateur en mode strict.
{
"version": "v0.9",
"updateComponents": {
"surfaceId": "demande-rappel",
"components": [
{
"id": "root",
"component": "Disclosure",
"summary": "Pourquoi ces informations ?",
"content": ["explication"]
},
{
"id": "explication",
"component": "Text",
"text": "Votre numéro sert uniquement à vous rappeler."
}
]
}
}Son affichage par le catalogue
- Le bouton, annoncé avec son état, ouvert ou fermé.
- Le texte, masqué tant que le bloc est fermé.
Ce que le validateur détecte, par exemple
| Code | Sévérité | Ce qui est détecté |
|---|---|---|
SCHEMA | Erreur bloquante | Une image sans alternative textuelle : le schéma du document l’interdit, avant même l’application des règles. |
RAWEB-7.1-BUTTON-LABEL-IN-NAME | Erreur bloquante | Un bouton dont le libellé visible diffère du nom accessible (WCAG 2.5.3). Un utilisateur de commande vocale prononce ce qu’il voit : le bouton ne répondrait pas. |
RAWEB-11.13-FORM-MISSING-AUTOCOMPLETE | Avertissement | Un champ de données personnelles sans indication pour le remplissage automatique. |
RAWEB-13.8-CAROUSEL-AUTOPLAY-SHORT-INTERVAL | Avertissement | Un carrousel qui défile automatiquement trop vite. |
Une erreur bloque, un avertissement signale sans bloquer. 50 codes sont émis à l’exécution ; cinq autres sont déclarés mais interceptés plus tôt, par le schéma ou par le moteur de rendu.
Ce qu’il ne fait pas
- Il couvre chaque composant, pas la page qui les assemble : la conformité d’une interface se mesure par un audit.
- Il ne corrige pas un document : il le refuse et dit pourquoi. La correction revient à l’agent, puis à l’équipe qui relit.
- Il n’affiche pas le fil de la conversation : il affiche les interfaces que l’agent y insère.
- En version 1, il ne couvre ni le paiement, ni les graphiques, ni les cartes, ni la vidéo, ni le dépôt de fichiers, ni l’édition de texte riche, ni l’authentification.
- Il n’existe qu’en React.
Comment il est vérifié
| Contrôle | Résultat |
|---|---|
| Tests unitaires | 932 : 552 pour le moteur de rendu, 200 pour le validateur JavaScript, 180 pour le validateur Python |
| Contrôles axe-core en intégration continue | 169, sans violation |
| Codes de validation | 50 : 48 règles et 2 codes système |
| Environnements testés | Node.js 22 et 24, Python 3.11, 3.12 et 3.13, à chaque modification |
axe-core est un moteur open source de tests d’accessibilité.
Douze doctrines capitalisées
Douze doctrines d’accessibilité sont consignées dans le dépôt. Chacune lie un comportement attendu à son critère RAWeb, au constat d’audit dont elle vient et à la règle du validateur qui l’applique.
Référentiels couverts
Composants conçus selon le RAWeb 1.1, le RGAA 4.1.2, les WCAG 2.2 au niveau AA et la norme européenne EN 301 549.
Statut et accès
| Statut | Bêta privée |
|---|---|
| Versions | Moteur de rendu React 2.0.0, validateur JavaScript 4.0.0 |
| Validateur Python | Version 0.4.0, en développement. Mêmes règles que le validateur JavaScript ; son canal de distribution est en cours de décision. Accès anticipé sur demande. |
| Format A2UI | Version 0.9, compatible avec la 0.9.1. La version 1.0, encore candidate, n’est pas suivie. |
| Prérequis | React 18 ou 19, Node.js 22 ou plus ; Python 3.11 ou plus pour le validateur Python |
| Distribution | Paquets privés, installés avec un jeton fourni avec la licence |
| Licence | Licence commerciale annuelle |
| Pour en bénéficier | Interfaces et agents IA accessibles |
Demander un accès
Dites-nous dans quelle application votre agent génère des interfaces, et pour quels utilisateurs.
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.
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.
design-md-a11y
Écrit les règles d’accessibilité de votre design system dans le fichier que lisent vos assistants de code ; son outil de contrôle, design-md-a11y-lint, vérifie qu’elles sont tenues.