Que fait Accessibilité ?
Rendre l'interface utilisable sans souris, sans vision parfaite et sans patience pour l'ambiguïté.
Quand utiliser
Utilisez lorsque l'utilisateur :
- souhaite un audit d'accessibilité ;
- construit des formulaires, de la navigation, des modales ou des composants interactifs ;
- a besoin de conseils WCAG ;
- veut une prise en charge clavier ou lecteur d'écran ;
- pose des questions sur le contraste ou les états de focus.
1. Définir le périmètre
- Quelles pages ou composants ?
- Quels groupes d'utilisateurs et technologies d'assistance sont concernés ?
- Quelle norme s'applique : WCAG 2.2 AA, politique interne, exigence légale ?
- Qu'est-ce qui est hors périmètre ?
2. Vérifier les bases
Sémantique
- Utilisez les éléments natifs :
button,a,input,label,nav,main. - N'utilisez pas une
divcomme bouton. - Utilisez les titres dans l'ordre.
- Donnez aux points de repère et aux sections des noms accessibles.
Clavier
- Chaque élément interactif est accessible via Tab.
- L'ordre du focus correspond à l'ordre visuel.
- Le focus est visible.
- Pas de piège clavier.
- Escape ferme les modales.
- Les touches fléchées fonctionnent dans les menus, onglets et grilles là où attendu.
Formulaires
- Chaque champ a une étiquette.
- Les erreurs sont annoncées et liées au champ.
- Les champs obligatoires sont marqués en texte, pas uniquement par la couleur.
- La saisie automatique est utilisée quand approprié.
- Les instructions viennent avant le champ.
Images et médias
- Les images porteuses de sens ont un texte alternatif.
- Les images décoratives ont un alt vide.
- Les vidéos ont des sous-titres.
- L'audio a une transcription.
- Aucune information n'est transmise uniquement par la couleur.
Contraste et texte
- Le contraste du texte respecte WCAG AA.
- Le texte peut être redimensionné à 200 % sans perte.
- La longueur de ligne et l'espacement sont lisibles.
- Le contenu se réorganise à 320 px.
Contenu dynamique
- Les états de chargement sont annoncés.
- Les toasts et alertes utilisent les régions live appropriées.
- Les modales gèrent le focus.
- Les changements de route côté client mettent à jour le titre et le focus.
3. Tester
- Parcours uniquement au clavier.
- Test avec lecteur d'écran si disponible.
- Zoom à 200 %.
- Mode contraste élevé.
- Mouvement réduit.
- Vérifications automatisées, en sachant qu'elles ne couvrent qu'une partie du problème.
Format de sortie
## Périmètre
## Constats
### <gravité> : <problème>
- **Emplacement :** `<chemin ou composant>`
- **WCAG :** <critère>
- **Impact :** <qui est bloqué et comment>
- **Correctif :** <modification spécifique>
- **Vérification :** <comment tester>
## Ce qui fonctionne
## Non testé
## Priorité
1. ...
Règles
- Ne pas revendiquer une conformité totale WCAG à partir d'un scan automatisé.
- Ne pas utiliser
aria-*pour corriger une mauvaise sémantique. - Ne pas supprimer les contours de focus sans remplacement visible.
- Ne pas se fier uniquement à la couleur.
- Ne pas ajouter une classe réservée au lecteur d'écran comme substitut à une étiquette.
- Si la revue est partielle, indiquer ce qui n'a pas été testé.
Vérifications qualité
- La sémantique native est utilisée.
- L'accès clavier fonctionne.
- Le focus est visible.
- Les formulaires ont des étiquettes et des erreurs.
- Le contraste est suffisant.
- Le contenu dynamique est annoncé.
- La revue indique ce qui n'a pas été testé.