34 lines
2.4 KiB
Markdown
34 lines
2.4 KiB
Markdown
|
# Audit accessibilité (a11y)
|
|||
|
|
|
|||
|
|
Rapport des violations et corrections pour atteindre un niveau Discord/Spotify (contraste, focus, labels, structure).
|
|||
|
|
|
|||
|
|
## Comment lancer l’audit
|
|||
|
|
|
|||
|
|
1. Démarrer Storybook : `npm run storybook` (depuis `apps/web`).
|
|||
|
|
2. Ouvrir l’addon **Accessibility** (a11y) dans la barre du bas.
|
|||
|
|
3. Lancer les stories full layout : **Layouts / DashboardLayout** (Dashboard, Playlists, Library, Settings, Profile).
|
|||
|
|
4. Lancer les composants critiques : **Sidebar**, **Header**, **GlobalPlayer**, **ErrorDisplay**, **Button**, **Input**, modales (AddToPlaylistModal, etc.).
|
|||
|
|
5. Noter chaque violation : composant, règle (ex. aria-valid-attr-value, color-contrast), description, sévérité (critical / serious / moderate), correction proposée.
|
|||
|
|
6. Mettre à jour ce fichier avec les entrées ci‑dessous et le statut (Résolu / Reporté / En attente).
|
|||
|
|
|
|||
|
|
## Format d’une entrée
|
|||
|
|
|
|||
|
|
| Composant | Règle | Description | Sévérité | Correction | Statut |
|
|||
|
|
|-----------|--------|-------------|----------|------------|--------|
|
|||
|
|
| (ex. Sidebar) | (ex. color-contrast) | (ex. Texte gris sur fond sombre < 4.5:1) | serious | Utiliser text-muted-foreground avec ratio vérifié | En attente |
|
|||
|
|
|
|||
|
|
## Violations connues et actions
|
|||
|
|
|
|||
|
|
- **Focus visible** : Couverture étendue (Phase A5) — ring focus-visible ajouté sur Select, listes, cards, dropdown trigger, etc. À valider en navigation clavier (Tab, Enter, Escape).
|
|||
|
|
- **Labels** : Vérifier que les icônes-only (fermeture modale, queue, volume, etc.) ont `aria-label` ou `title`. Sidebar et Header déjà partiellement couverts.
|
|||
|
|
- **Contraste** : Lancer l’addon a11y sur les stories en thème dark pour lister les paires foreground/background en dessous du ratio recommandé (4.5:1 texte normal, 3:1 gros texte).
|
|||
|
|
- **Live regions** : Toasts et messages d’erreur — s’assurer que `role="alert"` ou `aria-live="polite"` sont utilisés où pertinent (composant Toast, ErrorDisplay en bannière).
|
|||
|
|
- **Modales** : Vérifier `aria-modal="true"`, `aria-labelledby` / `aria-describedby` sur les dialogs (Radix Dialog déjà conforme ; modales custom à auditer).
|
|||
|
|
|
|||
|
|
## Prochaines étapes
|
|||
|
|
|
|||
|
|
1. Exécuter l’audit Storybook a11y sur les stories listées ci‑dessus.
|
|||
|
|
2. Remplir le tableau des violations avec les résultats.
|
|||
|
|
3. Corriger en priorité les violations **critical** et **serious**.
|
|||
|
|
4. Vérification manuelle : lecteur d’écran (NVDA/VoiceOver) et navigation clavier seule sur les parcours Dashboard → Library → Playlist → Player.
|