accessibility-review

Par anthropics · knowledge-work-plugins

Effectue un audit d'accessibilité WCAG 2.1 AA sur un design ou une page. Déclenche avec « audit accessibility », « check a11y », « is this accessible? », ou lors de la revue d'un design pour le contraste des couleurs, la navigation clavier, la taille des zones tactiles, ou le comportement des lecteurs d'écran avant le handoff.

npx skills add https://github.com/anthropics/knowledge-work-plugins --skill accessibility-review

/accessibility-review

Si tu vois des placeholders inconnus ou que tu dois vérifier quels outils sont connectés, consulte CONNECTORS.md.

Audite une conception ou une page pour la conformité d'accessibilité WCAG 2.1 AA.

Utilisation

/accessibility-review $ARGUMENTS

Audite pour l'accessibilité : @$1

Référence rapide WCAG 2.1 AA

Perceptible

  • 1.1.1 Le contenu non textuel possède un texte alternatif
  • 1.3.1 L'info et la structure sont véhiculées sémantiquement
  • 1.4.3 Ratio de contraste >= 4,5:1 (texte normal), >= 3:1 (texte grand)
  • 1.4.11 Contraste non textuel >= 3:1 (composants UI, graphiques)

Utilisable

  • 2.1.1 Toutes les fonctionnalités disponibles au clavier
  • 2.4.3 Ordre de focus logique
  • 2.4.7 Indicateur de focus visible
  • 2.5.5 Zone tactile >= 44x44 pixels CSS

Compréhensible

  • 3.2.1 Prévisible au focus (pas de changements inattendus)
  • 3.3.1 Identification des erreurs (décrire l'erreur)
  • 3.3.2 Labels ou instructions pour les entrées

Robuste

  • 4.1.2 Nom, rôle, valeur pour tous les composants UI

Problèmes courants

  1. Contraste de couleur insuffisant
  2. Labels de formulaire manquants
  3. Pas d'accès clavier aux éléments interactifs
  4. Texte alternatif manquant sur les images significatives
  5. Pièges de focus dans les modales
  6. Landmarks ARIA manquants
  7. Médias en lecture automatique sans contrôles
  8. Limites de temps sans option d'extension

Approche de test

  1. Scan automatisé (détecte ~30% des problèmes)
  2. Navigation au clavier uniquement
  3. Test lecteur d'écran (VoiceOver, NVDA)
  4. Vérification du contraste de couleur
  5. Zoom à 200% — la mise en page casse-t-elle ?

Sortie

## Accessibility Audit: [Design/Page Name]
**Standard:** WCAG 2.1 AA | **Date:** [Date]

### Summary
**Issues found:** [X] | **Critical:** [X] | **Major:** [X] | **Minor:** [X]

### Findings

#### Perceivable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [1.4.3 Contrast] | 🔴 Critical | [Fix] |

#### Operable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [2.1.1 Keyboard] | 🟡 Major | [Fix] |

#### Understandable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [3.3.2 Labels] | 🟢 Minor | [Fix] |

#### Robust
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [4.1.2 Name, Role, Value] | 🟡 Major | [Fix] |

### Color Contrast Check
| Element | Foreground | Background | Ratio | Required | Pass? |
|---------|-----------|------------|-------|----------|-------|
| [Body text] | [color] | [color] | [X]:1 | 4.5:1 | ✅/❌ |

### Keyboard Navigation
| Element | Tab Order | Enter/Space | Escape | Arrow Keys |
|---------|-----------|-------------|--------|------------|
| [Element] | [Order] | [Behavior] | [Behavior] | [Behavior] |

### Screen Reader
| Element | Announced As | Issue |
|---------|-------------|-------|
| [Element] | [What SR says] | [Problem if any] |

### Priority Fixes
1. **[Critical fix]** — Affects [who] and blocks [what]
2. **[Major fix]** — Improves [what] for [who]
3. **[Minor fix]** — Nice to have

Si connecteurs disponibles

Si ~~design tool est connecté :

  • Inspecte les valeurs de couleur, tailles de police et zones tactiles directement depuis Figma
  • Vérifie les rôles ARIA et le comportement clavier dans la spécification de conception

Si ~~project tracker est connecté :

  • Crée des tickets pour chaque problème d'accessibilité avec sévérité et critère WCAG
  • Lie les résultats à des épics de remédiation d'accessibilité existants

Conseils

  1. Commence par le contraste et le clavier — Ce sont les problèmes les plus courants et impactants.
  2. Teste avec la vraie technologie d'assistance — Mon audit est un bon début, mais les tests manuels avec VoiceOver/NVDA détectent des choses que je ne peux pas faire.
  3. Priorise par impact — Corrige d'abord les problèmes qui bloquent les utilisateurs, les améliorations peuvent attendre.

Skills similaires