Accessia
Sommaire de l'aide

Utiliser le plugin Figma

Le plugin vérifie vos maquettes dans Figma, avant le développement : contrastes, tailles de cibles, typographie et composants. Il simule aussi des troubles de la vision, de la lecture et de la motricité, et prépare les annotations d'accessibilité pour les développeurs.

Mis à jour le

Installer le plugin

Le plugin s'utilise dans l'application bureau de Figma. Il est en cours de publication sur Figma Community ; en attendant, il s'installe en mode développement :

  1. Demandez le dossier du plugin à zappclic@gmail.com et décompressez-le.
  2. Dans Figma, ouvrez le menu Plugins → Development → Import plugin from manifest… et sélectionnez le fichier manifest.json du dossier.
  3. Lancez-le depuis Plugins → Development → Accessia — Audit accessibilité.

Onglet « Audit » : vérifier une maquette

  1. Sélectionnez un ou plusieurs cadres (frames), par exemple les versions mobile et ordinateur d'un écran.
  2. Cliquez sur « Analyser le cadre sélectionné ».
  3. Les constats s'affichent par gravité, avec un compteur par catégorie et un filtre par appareil. Cliquez sur un constat pour sélectionner le calque concerné et lire la correction proposée.

Le plugin contrôle :

  • le contraste des textes (RGAA 3.2) et des éléments d'interface : icônes, bordures et fonds de champs (RGAA 3.3) ;
  • la taille des cibles tactiles (24 × 24 px au minimum, WCAG 2.5.8) ;
  • la typographie : tailles de texte trop petites, interlignage, longueur de ligne.

Relancez l'analyse après vos corrections : le plugin compare avec la précédente et affiche ce qui a été résolu (« Voir les constats résolus »).

Des corrections à vos couleurs

Ouvrez le plugin dans votre fichier de design system et cliquez sur « + Définir un fichier comme mon design system ». Sur vos maquettes, chaque correction de contraste propose alors le token conforme le plus proche, de même teinte. Les tokens de statut (erreur, alerte…) ne sont jamais proposés pour du texte.

Onglet « Simulation des troubles »

Sélectionnez un cadre : l'aperçu montre la maquette telle qu'elle est perçue avec le trouble choisi. Après un changement sur la maquette, cliquez sur « Actualiser ».

  • Couleurs : « Vision des couleurs simulée », pour les différentes formes de daltonisme.
  • Vision : « Flou (acuité réduite) », « Perte de contraste », « Champ visuel réduit (glaucome) », « Tache centrale (DMLA) », cumulables.
  • Lecture : « Mots aux lettres mélangées (dyslexie) ».
  • Motricité : repère les cibles de moins de 44 px, difficiles à atteindre en cas de tremblements ou au doigt, et les composants sans état « focus » pour la navigation au clavier.

Trois actions accompagnent chaque simulation :

  • « Vérifier la maquette pour ce trouble » : liste les problèmes concrets, par exemple couleurs distinctes qui se confondent, textes qui perdent leur contraste pour une personne daltonienne, longs passages en majuscules ou composants avec des états, mais sans état « focus ».
  • « Créer la version simulée sur le canevas » : place à côté du cadre une image simulée (ou, pour la dyslexie, une copie du cadre aux mots mélangés), à montrer en revue de conception.
  • « Voir l'original » : revient à l'aperçu normal.

Préparer le passage aux développeurs

« Ajouter les constats en annotations (Dev Mode) » transforme les constats en annotations Figma, visibles par les développeurs dans le Dev Mode. « Retirer les annotations Accessia » les supprime toutes.

La section « Annoter (handoff) — alt, titres, repères » permet de documenter un calque sélectionné : « Alternative textuelle »,« Niveau de titre », « Type de repère » et « Rôle pour le développement », puis « Enregistrer l'annotation ». Ces informations, que la maquette ne peut pas porter seule, sont celles que le développement oublie le plus souvent.

Envoyer le rapport vers l'application

  1. Après une analyse, cliquez sur « Envoyer vers Accessia → ».
  2. Le rapport s'ouvre dans l'application : maquette annotée, constats par cadre et par appareil, et les simulations vérifiées.
  3. Pour compléter un audit existant plutôt qu'en créer un nouveau, renseignez « Rattacher à un audit existant (id — optionnel) » dans « Réglages (application & audit existant) ».

Statistiques d'usage

À la première ouverture, le plugin vous demande si vous acceptez de partager des statistiques anonymes (« Oui, partager » ou « Non merci »). Elles ne contiennent jamais vos maquettes, vos textes ni vos noms de fichiers. Le choix se modifie à tout moment en bas du plugin.

Pour exploiter le rapport reçu, voir Lire un rapport.

Questions fréquentes

Le plugin modifie-t-il ma maquette ?

Non, l'analyse ne touche à rien. Seules deux actions écrivent dans le fichier, et uniquement quand vous les demandez : « Créer la version simulée sur le canevas » (ajoute une image ou une copie à côté du cadre) et les annotations Dev Mode, que « Retirer les annotations Accessia » supprime en un clic.

Pourquoi le plugin classe-t-il mes cadres par appareil ?

Il déduit l'appareil de la largeur de chaque cadre (mobile, tablette, ordinateur). Les constats sont ainsi filtrables par appareil, et le rapport envoyé à l'application garde cette information, comme pour l'extension Chrome.

L'envoi vers Accessia échoue.

Vérifiez votre connexion, puis l'adresse indiquée dans « Réglages (application & audit existant) » : elle doit être https://www.accessia.app. Les très grandes maquettes sont automatiquement compressées ; si l'envoi échoue encore, analysez moins de cadres à la fois.

Le plugin remplace-t-il un audit du site développé ?

Non. Il évite d'introduire des défauts dès la conception (contraste, taille des cibles, typographie, états de focus), mais une partie des critères RGAA dépend du code : structure, alternatives, comportement au clavier. Auditez aussi le site une fois développé, avec l'application ou l'extension.