senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
veza/apps/web/docs/A11Y_AUDIT.md
senke e82560c547 docs: add UI/UX audit reports and design system documentation 
- 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>
2026-02-08 22:49:40 +01:00

2.4 KiB
Raw Blame History

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.