---
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