Aller au contenu principal

Accessibilité

Patrimo vise la conformité WCAG 2.1 niveau AA sur toutes les surfaces interactives. L'usage mono-utilisateur ne dispense pas de ces règles : l'auteur s'impose lui-même ces standards pour garantir une utilisation confortable à long terme et sur tous types d'écrans.

Contrastes​

Le fond quasi-noir (--color-bg: #050506) et le texte principal (--color-text: #EDEDEF) produisent un ratio de ~17:1, très au-dessus du seuil AAA (7:1).

Vérifications à effectuer pour toute nouvelle combinaison :

Texte sur fondRatio minimumCas d'usage
Texte normal4.5:1 (AA) / 7:1 (AAA)Corps, labels
Texte large (≥18pt bold, 24pt normal)3:1 (AA) / 4.5:1 (AAA)Titres, valeurs KPI
Composant UI / graphique3:1Borders, icônes, états actifs

Risque connu : --color-text-subtle (#5A5F6A) sur --color-bg = ratio ~4.2:1 — limite AA pour texte normal. À réserver aux metadata et labels de section (jamais pour du corps).

Outils recommandés : WebAIM Contrast Checker, DevTools Chrome (inspection d'éléments).

Focus visible​

Règle : aucun outline: none sans remplacement visible.

Le focus ring standard dans Patrimo :

outline: 2px solid var(--color-accent);
outline-offset: 2px;

Appliqué par défaut au :focus-visible global dans globals.css. Les inputs renforcent avec un ring ambre :

/* input:focus */
border-color: var(--color-accent);
box-shadow: 0 0 0 3px var(--color-accent-muted);
  • Tab : parcours linéaire de tous les éléments interactifs
  • Shift+Tab : parcours inverse
  • Enter / Espace : activation
  • Escape : ferme modales, dropdowns, autocomplétion
  • Flèches : navigation dans listes / menus (Radix UI gère cela nativement)

Tous les composants Radix utilisés respectent WAI-ARIA par défaut. Ne pas contourner leur comportement clavier.

ARIA​

  • Labels explicites sur les boutons icon-only (aria-label="Déconnexion")
  • aria-hidden="true" sur les icônes décoratives qui accompagnent un texte
  • role et aria-live pour les toasts et notifications (polite par défaut)
  • aria-current="page" sur l'item de navigation actif

Préférences utilisateur​

Respecter les media queries de préférence :

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Les blobs animés de la page login et autres animations doivent être désactivées en prefers-reduced-motion.

Tests​

  • Lighthouse (Chrome DevTools) : viser score a11y ≥ 95
  • axe DevTools : extension gratuite, zéro violation critique avant merge
  • Navigation 100 % clavier : parcourir login → dashboard → import sans souris

Voir aussi​