Kit accessibilité RGAA et EAA pour Figma (annotations, grille d'audit, composants)

Ce kit s’adresse aux designers UI et aux agences qui livrent des maquettes à une équipe de développement et doivent y documenter l’accessibilité, en particulier depuis que l’European Accessibility Act s’applique, le 28 juin 2025. Il réunit un calque d’annotation pour dire au développement ce que la maquette ne montre pas (ordre de tabulation, rôles, noms accessibles, alternatives, focus, taille des cibles), des composants dessinés dans tous leurs états, une palette aux contrastes calculés et une grille d’audit des critères du RGAA 4.1.2 qui se règlent dès la conception. Tout existe en HTML, en composants Astro et dans un fichier pour Figma, sur les mêmes tokens, en clair et en sombre. Les textes du kit sont en français.

Le kit aide à concevoir et à documenter. Il ne remplace ni un audit sur le site en ligne ni la déclaration d’accessibilité, et n’atteste d’aucune conformité.

• 11 sections : tampons d’annotation, gabarit de page annoté, boutons et liens, formulaire, navigation, modale, onglets et accordéon, tableau de données, matrice des états, palette et contrastes, grille d’audit RGAA et EAA.
• 15 tampons d’annotation : ordre de tabulation, ordre de lecture, région, niveau de titre, rôle, nom accessible, état et propriété, alternative informative, image décorative, langue, focus visible, taille de cible, contraste, message de statut et renvoi de note. Ils sont dans une teinte ambre réservée au calque d’annotation, identique en clair et en sombre, et chaque famille se reconnaît aussi à sa forme et à son libellé, jamais à la seule couleur. La légende indique le critère RGAA auquel chaque tampon se rattache.
• 6 composants annotés : boutons et liens, formulaire, navigation, modale, onglets et accordéon, tableau de données. Un interrupteur masque tous les tampons pour juger un composant seul.
• Une matrice des états : 9 composants (bouton principal, secondaire, destructif, bouton icône, lien de navigation, champ texte, case à cocher, bouton radio, onglet) dans 6 états (défaut, survol, focus clavier, actif ou sélectionné, indisponible, erreur ou attente), soit 54 variantes. Chaque cellule nomme l’attribut ou la pseudo-classe qui porte l’état dans le code.
• Une palette et ses contrastes, calculés dans chacun des 2 thèmes.
• Une grille d’audit de 47 critères en 11 thématiques : images, couleurs, tableaux, liens, scripts, éléments obligatoires, structuration de l’information, présentation de l’information, formulaires, navigation et consultation. Ce sont les critères du RGAA 4.1.2 qui se décident ou s’annotent pendant la conception, avec leur intitulé officiel. Chaque critère est rangé sous l’un des principes (perceptible, utilisable, compréhensible, robuste). La grille est fournie vierge et en exemple rempli sur une maquette fictive.
• Un encart sur l’EAA à côté de la grille : le texte de référence, la directive (UE) 2019/882, sa date d’application, les services visés, l’exemption des microentreprises, les exigences de l’Annexe I, section III, point c), et la référence technique : le RGAA 4.1.2 vérifie les critères de succès des niveaux A et AA des WCAG 2.1 retenus par la norme européenne EN 301 549 V2.1.2 (2018-08).
• 2 thèmes, clair et sombre.
• 3 pages HTML : la démonstration, qui réunit les 11 sections, et la grille d’audit vierge et remplie. La barre du haut de la démonstration règle la largeur, le thème et deux calques : les annotations et la grille de colonnes.
• 11 sections Astro et 3 composants d’appui (le cadre de page, la planche d’icônes et les comportements), avec un fichier LISEZMOI-astro.txt qui explique l’installation.
• Un fichier pour Figma : les mêmes tokens en variables, en modes clair et sombre, les composants dans tous leurs états, les 15 tampons plus un tampon libre (« Other ») pour une note qui n’entre dans aucune famille, la grille d’audit, l’exemple rempli et des écrans d’exemple en clair et en sombre.

Fichiers du kit :

GUIDE.txt
html/index.html
html/sections/   (11 sections et la planche d'icônes)
html/css/tokens.css
html/css/kit.css
html/js/kit.js
tailwind/theme.css
astro/           (11 sections, KitPage.astro, IconSprite.astro, KitBehavior.astro, LISEZMOI-astro.txt)
grille/          (audit-grid-blank et audit-grid-example, en HTML et en CSV)
figma/rgaa-accessibility-kit-1.0.0.fig

Fabrication et IA

Le code du kit (sections HTML, composants Astro, thème Tailwind), ses textes, la grille d’audit et le fichier pour Figma ont été produits avec un assistant d’IA, puis relus et contrôlés : aucune erreur axe-core sur la démonstration en clair comme en sombre, contrastes vérifiés sur 24 paires dans chaque thème, espacements sur l’échelle de 4 px, et références réglementaires relues dans la démonstration, les sections, les composants Astro et les grilles. Le kit ne contient aucune image générée par IA.

• HTML et CSS compilé, sans CDN : html/index.html et les grilles s’ouvrent dans un navigateur, sans installation ni étape de build. Les fichiers de html/sections/ sont des fragments à copier dans votre page ; le commentaire en tête de chaque fichier liste ce qu’il demande (tokens.css, kit.css, la planche d’icônes et kit.js, qui porte les comportements : menu, onglets, tri, formulaire, contrastes, grille).
• CSS custom properties, clair et sombre : html/css/tokens.css porte les couleurs, espacements, rayons, tailles et styles de texte en variables CSS.
• Tailwind CSS v4 (thème) : tailwind/theme.css reprend les mêmes noms et les mêmes valeurs que tokens.css, et remplace les échelles par défaut : une valeur absente de l’échelle ne produit rien.
• Composants Astro à props typées (TypeScript) : testés avec Astro 7.4, sans autre dépendance qu’Astro. La version de Node demandée et les étapes sont dans LISEZMOI-astro.txt.
• Grille d’audit en HTML et en CSV (UTF-8) : la page HTML garde vos statuts dans le navigateur et recalcule le taux selon la méthode du RGAA (critères conformes divisés par les critères applicables). Le CSV, en UTF-8 avec BOM et séparé par des points-virgules, s’ouvre directement dans un tableur réglé en français ; colonnes : thématique, n°, critère, principe, statut, note.
• Fichier .fig (figma/rgaa-accessibility-kit-1.0.0.fig) : un fichier compatible Figma, à importer par le menu Fichier, Importer.
• Polices : Geist et Geist Mono, sous licence SIL OFL 1.1, sont chargées par un lien et ne sont pas incluses dans le kit. Vous pouvez aussi les héberger vous-même.

Ce qui a été contrôlé sur la démonstration : aucune erreur d’accessibilité relevée par axe-core en clair comme en sombre, contraste de 24 paires de couleurs dans chaque thème, espacements sur une échelle de 4 px, et aucun défilement horizontal de la page à 375, 768 et 1 440 px de large (seuls les onglets et les tableaux défilent, dans leur propre conteneur).

À savoir avant l’achat :

• Le kit est entièrement en français : textes de démonstration, tampons, intitulés de critères et grille.
• La grille rassemble les critères qui se règlent à la conception, pas tout le RGAA : les autres se vérifient sur le site en ligne, par un audit.
• Le fichier pour Figma montre les écrans à 1 440 px seulement, en clair et en sombre : les largeurs de 375 et 768 px sont couvertes par le code. La modale y est figée ; les interactions (focus, touche Échap, tri, filtre, taux recalculé) n’existent que dans le code.
• Le texte des composants indisponibles reste sous le seuil de contraste, comme le permettent les règles pour un composant inactif ; la section palette et contrastes le documente.

Le kit est vendu avec la licence commerciale : vous pouvez utiliser les tampons, les composants, la grille et le fichier dans vos projets personnels et professionnels, y compris pour vos clients, mais pas revendre ni redistribuer les fichiers du kit, même modifiés, comme kit ou comme modèle.

• RGAA, EAA, WCAG : quelle norme s’applique en 2026 ?
• La conception pour l’accessibilité

1.0.0 (10 novembre 2026) : première version.