Parent : [[INDEX-WEB-UIUX]]
Vérification Lighthouse + axe
Problème
« Ça a l'air bien » n'est pas une preuve. Clients et users vivent perf réelle et clavier/screen reader.
Solution
Documenter des scores mesurables à chaque release UI significative.
Procédure
Lighthouse (Chrome)
npm run build && npm run start(ou preview prod)- F12 → Lighthouse → Mobile → Performance + Accessibility + SEO
- Noter les scores dans PR / commit / README
Seuils knowledge-core :
| Métrique | Bloquant | Cible |
|---|---|---|
| Accessibility | < 90 | ≥ 94 |
| Performance | < 80 | ≥ 85 |
| SEO (pages publiques) | < 85 | ≥ 90 |
axe DevTools
- Extension axe DevTools
- Scan page → corriger Critical et Serious avant ship
Test clavier manuel (2 min)
- Tab : ordre logique, focus visible
- Enter / Space : active les boutons
- Escape : ferme modals/dropdowns
- Pas de piège focus dans les modals
Exemple rapport minimal
## Quality gate — Home v2
- URL: /preview
- a11y: 96 | perf: 87 | SEO: 92
- axe: 0 critical
- keyboard: OK
- 375px / 1440px: OK
Quand ne PAS l'utiliser
- Composant isolé sans route — tester dans une page stub ou Storybook avec URL.
Source
- [[KNOW-PAT-143|KNOW-PAT-143]] gate — 2026-06-09
Liens connexes
- [[KNOW-PAT-142|KNOW-PAT-142]]
- [[KNOW-PAT-143|KNOW-PAT-143]]