Comprendre les violations
A11y Audit détecte et classe les violations en 7 catégories correspondant aux critères WCAG 2.2 AA les plus fréquemment violés dans les maquettes Figma.
1. Contraste du texte — WCAG 1.4.3
Section intitulée « 1. Contraste du texte — WCAG 1.4.3 »Critère : Contrast (Minimum) — Niveau AA
Seuils requis
Section intitulée « Seuils requis »| Type de texte | Rapport minimum |
|---|---|
| Texte normal (< 18pt ou < 14pt gras) | 4.5:1 |
| Grand texte (≥ 18pt ou ≥ 14pt gras) | 3:1 |
Comment le plugin le mesure
Section intitulée « Comment le plugin le mesure »Le plugin calcule le rapport de luminance relative entre la couleur du texte et la couleur de l’arrière-plan immédiat. Si plusieurs couches d’arrière-plan se superposent, il remonte la hiérarchie des calques pour trouver la couleur effective.
Violations fréquentes
Section intitulée « Violations fréquentes »- Texte gris clair sur fond blanc (ex. : texte de placeholder)
- Texte blanc sur fond de couleur vive insuffisamment sombre
- Texte coloré sur fond de couleur proche
2. Contraste des composants UI — WCAG 1.4.11
Section intitulée « 2. Contraste des composants UI — WCAG 1.4.11 »Critère : Non-text Contrast — Niveau AA
Seuil requis
Section intitulée « Seuil requis »Rapport de contraste minimum 3:1 entre :
- Les contours des champs de formulaire et l’arrière-plan
- Les états actifs des composants (case cochée, bouton actif) et l’arrière-plan adjacent
- Les icônes informatives et leur arrière-plan
Violations fréquentes
Section intitulée « Violations fréquentes »- Bordure de champ texte trop claire
- Icône grise sur fond blanc
- Toggle ou checkbox dont l’état est indiqué uniquement par la couleur
3. Taille du texte — WCAG 1.4.4
Section intitulée « 3. Taille du texte — WCAG 1.4.4 »Critère : Resize text — Niveau AA
Le texte doit pouvoir être agrandi à 200 % sans perte de contenu ni de fonctionnalité. Dans le contexte Figma, le plugin vérifie que la taille de police est suffisamment lisible dès la conception.
Seuils indicatifs
Section intitulée « Seuils indicatifs »| Contexte | Taille minimale recommandée |
|---|---|
| Corps de texte | 16px |
| Légendes et labels | 12px |
| Texte mobile (corps) | 16px |
4. Taille des cibles tactiles — WCAG 2.5.8 et 2.5.5
Section intitulée « 4. Taille des cibles tactiles — WCAG 2.5.8 et 2.5.5 »Critères :
- 2.5.8 Target Size (Minimum) — Niveau AA : zone cliquable ≥ 24×24 px
- 2.5.5 Target Size (Enhanced) — Niveau AAA : zone cliquable ≥ 44×44 px
Comment le plugin le mesure
Section intitulée « Comment le plugin le mesure »Le plugin mesure les dimensions des éléments interactifs identifiés (boutons, liens, icônes cliquables). Un avertissement est émis si la dimension est inférieure à 24×24 px (violation AA) ; une information est affichée si elle est entre 24 et 44 px (non-conformité AAA).
Violations fréquentes
Section intitulée « Violations fréquentes »- Icônes de navigation trop petites sur mobile
- Liens dans un texte courant (zone de tap = hauteur de ligne uniquement)
- Boutons “fermer” ou “info” de 16×16 px
5. Images sans description — WCAG 1.1.1
Section intitulée « 5. Images sans description — WCAG 1.1.1 »Critère : Non-text Content — Niveau A
Toute image informative doit avoir un équivalent textuel. Dans Figma, cela correspond aux images et icônes qui n’ont pas de nom de calque descriptif.
Comment le plugin le détecte
Section intitulée « Comment le plugin le détecte »Le plugin signale les calques de type image ou icône dont le nom est générique (“Image”, “Rectangle”, numéro automatique Figma, etc.). Ces calques doivent être renommés avec une description du contenu ou marqués comme décoratifs.
Convention de nommage
Section intitulée « Convention de nommage »- Image informative : nommer le calque avec une description (ex. :
Photo équipe de développement) - Image décorative : préfixer avec
[deco](ex. :[deco] Illustration fond)
6. Hiérarchie des titres — WCAG 1.3.1
Section intitulée « 6. Hiérarchie des titres — WCAG 1.3.1 »Critère : Info and Relationships — Niveau A
La structure des titres (H1, H2, H3…) doit être logique et sans saut de niveau. Dans Figma, le plugin inspecte les styles de texte appliqués et leur ordre d’apparition dans la frame.
Violations détectées
Section intitulée « Violations détectées »- Plusieurs H1 dans une même page
- Saut de H2 à H4 sans H3 intermédiaire
- Utilisation de titres uniquement pour leur apparence visuelle (ex. : H1 utilisé comme sous-titre car il est “plus joli”)
Convention
Section intitulée « Convention »Appliquez les styles de texte Figma en cohérence avec leur niveau sémantique. Nommez vos styles Heading/H1, Heading/H2, etc. pour que le plugin les reconnaisse correctement.
7. Couleur seule — WCAG 1.4.1
Section intitulée « 7. Couleur seule — WCAG 1.4.1 »Critère : Use of Color — Niveau A
L’information ne doit pas être transmise uniquement par la couleur. Un utilisateur daltonien ou en situation de handicap visuel doit pouvoir comprendre l’information sans percevoir les différences de couleur.
Violations fréquentes
Section intitulée « Violations fréquentes »- Champs de formulaire invalides signalés uniquement par un contour rouge (sans icône ni texte d’erreur)
- Graphiques où les séries de données sont distinguées uniquement par la couleur (sans label ni motif)
- Liens dans un texte non soulignés et distingués uniquement par leur couleur
Comment le plugin le détecte
Section intitulée « Comment le plugin le détecte »Le plugin identifie les états (erreur, succès, warning) qui n’utilisent qu’un changement de couleur sans autre indicateur visuel (icône, texte, soulignement, motif).
Résumé des critères
Section intitulée « Résumé des critères »| Catégorie | Critère WCAG | Niveau |
|---|---|---|
| Contraste texte | 1.4.3 | AA |
| Contraste UI | 1.4.11 | AA |
| Taille texte | 1.4.4 | AA |
| Target size minimum | 2.5.8 | AA |
| Target size enhanced | 2.5.5 | AAA |
| Images sans description | 1.1.1 | A |
| Hiérarchie titres | 1.3.1 | A |
| Couleur seule | 1.4.1 | A |