[UX] Accessibilité : contraste du thème clair, focus visible et navigation clavier #60

Open
opened 2026-10-28 23:28:41 -04:00 by bruno · 0 comments
Owner

Constat (audit visuel, v0.41.0)

Le thème sombre est bon (texte 16,1:1, texte secondaire 8,0:1, accent 5,0:1). Le thème clair, lui, a un angle mort : --accent: #0d9488 sur blanc = 3,74:1, sous le seuil WCAG AA 4,5:1 pour du texte normal — or plusieurs composants utilisent --accent pour du texte en clair (codes de carte, liens, triage). Par ailleurs :focus-visible est global mais certains composants le remplacent par des outline: none + anneaux ad hoc, et les zones de glisser-déposer du tableau n'ont pas d'équivalent clavier documenté.

Travail attendu

  • Introduire un jeton --accent-text distinct de --accent (remplissage) : sombre #14b8a6, clair #0f766e (5,47:1 sur blanc), et l'utiliser partout où l'accent est du texte.
  • Unifier le focus visible (un seul anneau, jamais supprimé sans remplacement) sur boutons, liens, champs, menus et cartes.
  • Vérifier l'ordre de tabulation sur Projets, tableau et Mes issues, et documenter l'équivalent clavier du déplacement de carte (ou l'absence, à combler).

Critère de validation

Vérifié par le build de l'utilisateur et par un calcul de contraste : tous les textes d'accent ≥ 4,5:1 dans les deux thèmes, focus visible sur chaque élément interactif au clavier.

Hors portée

Refonte du glisser-déposer lui-même.

## Constat (audit visuel, v0.41.0) Le thème sombre est bon (texte 16,1:1, texte secondaire 8,0:1, accent 5,0:1). Le thème clair, lui, a un angle mort : `--accent: #0d9488` sur blanc = 3,74:1, sous le seuil WCAG AA 4,5:1 pour du texte normal — or plusieurs composants utilisent `--accent` pour du texte en clair (codes de carte, liens, triage). Par ailleurs `:focus-visible` est global mais certains composants le remplacent par des `outline: none` + anneaux ad hoc, et les zones de glisser-déposer du tableau n'ont pas d'équivalent clavier documenté. ## Travail attendu - Introduire un jeton `--accent-text` distinct de `--accent` (remplissage) : sombre `#14b8a6`, clair `#0f766e` (5,47:1 sur blanc), et l'utiliser partout où l'accent est du texte. - Unifier le focus visible (un seul anneau, jamais supprimé sans remplacement) sur boutons, liens, champs, menus et cartes. - Vérifier l'ordre de tabulation sur Projets, tableau et Mes issues, et documenter l'équivalent clavier du déplacement de carte (ou l'absence, à combler). ## Critère de validation Vérifié par le build de l'utilisateur et par un calcul de contraste : tous les textes d'accent ≥ 4,5:1 dans les deux thèmes, focus visible sur chaque élément interactif au clavier. ## Hors portée Refonte du glisser-déposer lui-même.
bruno added the kanban:todo label 2026-10-28 23:28:41 -04:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Projets/kanbante#60