e82560c547
- AUDIT_UI_UX_VISUEL_COMPLET.md: comprehensive visual audit with structured analysis (shell, rhythm, typography, colors, components, motion) and Top 10 improvement roadmap - UI_UX_AUDIT_DISCORD_SPOTIFY_QUALITY.md: detailed gap analysis vs Discord/Spotify with phased action plan - A11Y_AUDIT.md: accessibility audit baseline - EMPTY_ERROR_PATTERNS.md: unified empty/error state pattern guide - codemod-typography-arbitrary.mjs: migration script for text-[10px] Co-authored-by: Cursor <cursoragent@cursor.com>
33 lines
2.4 KiB
Markdown
33 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.
|