Explorer
KNOW-PAT-236

Socle de qualité web production : accessibilité, performance et robustesse

Domaine
web-uiux
Type
pattern
Priorité
P0

Socle de qualité web production

Gate obligatoire

Sémantique et accessibilité

  • Un h1 principal et une structure de titres sans niveaux choisis pour leur apparence.
  • Régions header, nav, main et footer lorsque pertinentes.
  • Navigation intégrale au clavier, focus visible et ordre logique.
  • Contraste WCAG AA ; l'information ne dépend jamais uniquement de la couleur.
  • Cibles d'au moins 24 × 24 CSS px, avec 44 × 44 recommandé pour les actions importantes tactiles.
  • Zoom à 200 %, reflow, lecteur d'écran de contrôle et textes alternatifs utiles.
  • prefers-reduced-motion respecté ; aucun mouvement indispensable à la compréhension.

Interaction

  • États définis : hover, focus, active, disabled, loading, empty, success et error.
  • Liens et boutons employés selon leur fonction native.
  • Le scroll fluide ne casse ni ancres, ni historique, ni clavier.
  • Un curseur personnalisé ne remplace jamais le pointeur natif sans solution de repli.
  • Toute animation doit expliquer une relation, donner un feedback ou guider l'attention.

Performance

  • Core Web Vitals au 75e percentile : LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1.
  • Images dimensionnées, responsives, compressées et différées sous la ligne de flottaison.
  • Ressource LCP prioritaire et polices limitées/subset quand possible.
  • Éviter JavaScript client, dépendances et animations coûteuses sans bénéfice mesurable.

Robustesse et production

  • Lint, typecheck, tests pertinents et build de production sans erreur.
  • Aucune erreur console ou requête répétée inutile.
  • Pages 404/erreur, métadonnées, canonical, robots et sitemap vérifiés.
  • Aucun secret dans le client, le dépôt ou les logs.
  • En-têtes de sécurité, TLS, sauvegarde, restauration et procédure de déploiement documentés.
  • Liens, formulaires, clavier et responsive testés sur plusieurs moteurs de navigateur.

Preuve attendue

Un rapport bref contient les résultats du build, les mesures réelles, les viewports contrôlés, les tests clavier et les problèmes acceptés avec justification.

Références

  • W3C — WCAG 2.2 et WAI Authoring Practices
  • web.dev — Core Web Vitals