168 lines
3.9 KiB
Markdown
168 lines
3.9 KiB
Markdown
---
|
||
name: validating-accessibility
|
||
description: Validates web accessibility according to WCAG 2.1 AA standards for users with disabilities. Use when modifying UI, adding components, or performing accessibility audits
|
||
allowed-tools: Read, Grep, Glob, Bash, WebSearch
|
||
---
|
||
|
||
# Validateur d'Accessibilité
|
||
|
||
Guide la validation et l'amélioration de l'accessibilité web selon WCAG 2.1 niveau AA.
|
||
|
||
## Table des matières
|
||
|
||
- [Quand utiliser](#quand-utiliser)
|
||
- [Standards WCAG 2.1 AA](#standards-wcag-21-aa)
|
||
- [Scripts npm disponibles](#scripts-npm-disponibles)
|
||
- [Checklist essentielle](#checklist-essentielle)
|
||
- [Workflow d'audit](#workflow-daudit)
|
||
- [Checklist avant release](#checklist-avant-release)
|
||
- [En cas de doute](#en-cas-de-doute)
|
||
|
||
## Quand utiliser
|
||
|
||
- Ajout de composants UI
|
||
- Modification d'interfaces
|
||
- Avant chaque release majeure
|
||
- Audit d'accessibilité complet
|
||
|
||
## Standards WCAG 2.1 AA
|
||
|
||
**Quatre principes POUR :**
|
||
|
||
1. **Perceptible** - Information présentable
|
||
2. **Opérable** - Composants opérables
|
||
3. **Compréhensible** - Info et UI compréhensibles
|
||
4. **Robuste** - Contenu robuste
|
||
|
||
## Scripts npm disponibles
|
||
|
||
Trouve et utilise :
|
||
|
||
- Audit accessibilité complet
|
||
- Audit mobile responsive
|
||
- Vérification contraste
|
||
- Tests automatisés
|
||
|
||
## Checklist essentielle
|
||
|
||
### 1. Structure sémantique HTML
|
||
|
||
- Balises appropriées (`<header>`, `<nav>`, `<main>`, `<footer>`)
|
||
- Hiérarchie titres logique (h1 → h2 → h3)
|
||
- `<button>` pour actions, `<a>` pour navigation
|
||
|
||
### 2. Navigation clavier
|
||
|
||
- Éléments interactifs focusables
|
||
- Ordre tabulation logique
|
||
- Focus visible (outline ou custom)
|
||
- Raccourcis clavier sans conflit
|
||
|
||
### 3. ARIA (Accessible Rich Internet Applications)
|
||
|
||
**Utiliser quand sémantique HTML insuffisante**
|
||
|
||
Règles :
|
||
|
||
- Pas d'ARIA mieux que mauvais ARIA
|
||
- Vérifier support lecteurs d'écran
|
||
- Tester avec vraies technologies assistives
|
||
|
||
Attributs courants :
|
||
|
||
- `aria-label`, `aria-labelledby`
|
||
- `aria-describedby`
|
||
- `aria-hidden`
|
||
- `role` (button, dialog, alert, etc.)
|
||
|
||
### 4. Contraste couleurs
|
||
|
||
**WCAG 2.1 AA minimum :**
|
||
|
||
- Texte normal : 4.5:1
|
||
- Texte large (≥18pt ou ≥14pt gras) : 3:1
|
||
- Composants UI : 3:1
|
||
|
||
Outils : navigateur DevTools, Contrast Checker
|
||
|
||
### 5. Alternatives textuelles
|
||
|
||
- Toutes images avec `alt`
|
||
- Images décoratives : `alt=""`
|
||
- Images complexes : description détaillée
|
||
- Vidéos : sous-titres/transcription
|
||
|
||
### 6. Formulaires
|
||
|
||
- Labels explicites associés
|
||
- Messages d'erreur clairs
|
||
- Instructions visibles
|
||
- Validation côté client + serveur
|
||
|
||
### 7. Responsive et zoom
|
||
|
||
- Support zoom 200% sans perte fonctionnalité
|
||
- Contenu responsive (mobile, tablette, desktop)
|
||
- Touch targets ≥ 44×44 px mobile
|
||
|
||
## Workflow d'audit
|
||
|
||
### 1. Tests automatisés
|
||
|
||
Utilise scripts npm disponibles ou Lighthouse (Chrome DevTools).
|
||
|
||
### 2. Tests manuels
|
||
|
||
**Navigation clavier :**
|
||
|
||
- Tab à travers tous éléments interactifs
|
||
- Enter/Space pour activer
|
||
- Échap pour fermer modales/menus
|
||
|
||
**Lecteur d'écran :**
|
||
|
||
- VoiceOver (macOS/iOS)
|
||
- NVDA (Windows)
|
||
- JAWS (Windows)
|
||
|
||
**Contraste :**
|
||
|
||
- Vérifie tous textes et icônes
|
||
- Teste modes sombre/clair
|
||
|
||
### 3. Tests utilisateurs réels
|
||
|
||
- Personnes avec handicaps
|
||
- Différentes technologies assistives
|
||
- Feedback sur expérience réelle
|
||
|
||
## Checklist avant release
|
||
|
||
- [ ] Hiérarchie titres correcte
|
||
- [ ] Navigation clavier complète
|
||
- [ ] Contraste WCAG AA respecté
|
||
- [ ] Alt text sur toutes images
|
||
- [ ] Labels formulaires associés
|
||
- [ ] Focus visible partout
|
||
- [ ] Tests lecteur d'écran passés
|
||
- [ ] Zoom 200% fonctionnel
|
||
- [ ] Touch targets ≥ 44px mobile
|
||
|
||
## En cas de doute
|
||
|
||
**Source :** Standards WCAG 2.1 AA officiels
|
||
|
||
**Règles absolues :**
|
||
|
||
1. Toujours tester clavier uniquement
|
||
2. Toujours vérifier contraste
|
||
3. Toujours tester lecteur d'écran
|
||
4. Jamais cacher contenu sans `aria-hidden`
|
||
5. Jamais empêcher zoom mobile
|
||
|
||
**Workflow minimal :**
|
||
|
||
- Lighthouse audit
|
||
- Navigation clavier complète
|
||
- Test 1 lecteur d'écran minimum
|