Claude
FigmaAUDIT ACCESSIBILITÉ MAQUETTE
Prérequis
- Maquettes Figma des composants critiques (boutons, formulaires, navigation)
- Tokens couleur et typo documentés (valeurs hex, tailles)
- Référentiel accessibilité projet (niveau AA visé)
- Exports ou descriptions des variantes (hover, focus, disabled, erreur)
Repérer les problèmes d’accessibilité en développement coûte cher en allers-retours design. Un pré-audit sur maquette Figma : assisté par Claude : aligne l’équipe sur les mêmes critères WCAG avant handoff. Vous allez structurer un prompt d’audit couvrant contrastes, libellés, focus et états, sans remplacer l’audit HTML final.
Préparer le contexte Figma pour l’audit
Listez les composants prioritaires : CTA primaire, liens, champs formulaire, messages d’erreur, navigation, modales. Chaque variante (hover, focus, disabled) doit être décrite.
Exportez les valeurs de contraste depuis un plugin Figma (Stark, Contrast) ou saisissez les paires couleur avec leurs ratios. Joignez les règles projet : niveau AA, exceptions documentées.
Décrivez la hiérarchie des titres prévue et les libellés visibles. Claude ne voit pas le fichier Figma : plus le contexte est précis, plus l’audit est utile.
Construire le prompt d’audit accessibilité
System prompt : « Auditeur accessibilité web agence. Référentiel WCAG 2.2 niveau AA. Signalez les non-conformités avec critère WCAG, gravité et recommandation design. »
Demandez une sortie par composant : Conforme / Non conforme , critère WCAG, correction proposée, note si vérification HTML requise.
Incluez des points de contrôle explicites : contrastes texte et UI, taille cible tactile, libellés de formulaire, focus visible, alternatives textuelles icônes seules.
Exploiter les résultats avant handoff
Priorisez les bloquants design (contraste insuffisant, focus absent, label manquant). Corrigez dans Figma avant de transmettre au développement.
Documentez les exceptions validées (logo, décoration) dans la spec composant. Le développeur intègre sans réinterpréter.
Croisez avec le tutoriel audit contraste Figma pour les ratios exacts. Claude accélère la revue qualitative ; les mesures restent vérifiables par plugin.
Erreurs fréquentes
Envoyer une capture sans valeurs couleur : audit approximatif.
Confondre pré-audit maquette et certification RGAA : deux étapes distinctes.
Oublier les états focus et erreur : non conformité fréquente en recette.
Accepter les ratios calculés par Claude sans vérification plugin.
Auditer des pages entières sans passer par les composants du design system.
Ce qu’il faut retenir
Contexte Figma détaillé (couleurs, états, libellés) + prompt WCAG = pré-audit actionnable.
Correction design avant handoff, pas en développement.
Claude assiste ; plugins Figma et audit HTML final restent obligatoires.
Documentez les exceptions pour éviter les débats en intégration.
FAQ
Non nativement. Vous devez exporter les specs visuelles (couleurs, textes, variantes) ou utiliser une description structurée. Des connecteurs tiers existent mais le contexte explicite reste le plus fiable.
Commencez par les composants du design system. Les pages héritent des mêmes règles. Auditez ensuite les compositions spécifiques (landing, tunnel conversion) si elles divergent du système.
Le pré-audit maquette réduit les écarts en amont. En recette, refaites un audit HTML avec les outils RGAA. Les écarts résiduels (polices système, smoothing) sont documentés et corrigés côté CSS.
Cursor
ChatGPT