ESIG
Checklist finale
Phase 9 — Validation avant mise en ligne
Identification
Progression
0/49
Essentiels
0% (100% requis)
0/38
Importants
0% (70% requis)
0/15
Recommandés
optionnel
1. Clarification du projet
Objectif du site défini en une phrase claire
🔴Public cible identifié
🔴Persona créé
🟠Fonctionnalités listées et priorisées (MoSCoW)
🔴Contraintes documentées
🟠Critères de succès définis
🟠2. Architecture de l'information
Structure de navigation définie
🔴Card sorting effectué (3+ personnes)
🟠Menu logique et clair
🔴Fil d'Ariane prévu (si site > 2 niveaux)
🟢3. Design et identité visuelle
Palette de couleurs définie (3-4 couleurs max)
🔴Couleurs accessibles (contrastes validés)
🔴Maximum 2 familles de polices
🔴Taille de police ≥ 16px pour le corps de texte
🔴Échelle typographique définie
🟠Espacements standardisés (multiples de 8px)
🟠Charte graphique documentée
🟠Règle 60-30-10 appliquée aux couleurs
🟢4. Ergonomie et UX
Ratio de contraste ≥ 4.5:1 (texte normal)
🔴Ratio de contraste ≥ 3:1 (grand texte ≥18px)
🔴Longueur des lignes ≈ 65-80 caractères
🔴Interligne de 1.5 minimum
🟠Texte aligné à gauche
🟠Zones cliquables ≥ 48×48px sur mobile
🔴Espacement suffisant entre éléments cliquables
🔴Feedback pour toutes les actions utilisateur
🔴Messages d'erreur clairs et constructifs
🔴États hover/focus/active définis
🟠Indicateurs de chargement prévus
🟠Logo cliquable vers l'accueil
🔴Menu visible et cohérent sur toutes les pages
🔴Indicateur de page active
🔴Possibilité de revenir en arrière
🟠Labels visibles pour tous les champs
🔴Champs obligatoires clairement indiqués
🔴Validation avec messages explicites
🔴Nombre de champs minimisé
🟠Types de champs appropriés
🟠Autocomplétion activée où pertinent
🟢Placement des éléments clés suit le pattern Z (logo haut-gauche, CTA bas-droite)
🟠Éléments liés regroupés visuellement — loi de proximité
🟠Navigation limitée à 5-7 items principaux — loi de Miller
🟠5. Maquettes
Maquettes créées avant le code
🔴Version mobile ET desktop maquettées
🟠Tests utilisateurs effectués
🟠Retours intégrés et itérés
🟠Interactions documentées
🟢6. Accessibilité
HTML sémantique (header, nav, main, footer)
🔴Hiérarchie des titres respectée (h1 → h2 → h3)
🔴Un seul <h1> par page
🔴Langue de la page déclarée
🔴Landmarks ARIA correctement utilisés
🟠Alt text sur toutes les images informatives
🔴Alt="" sur les images décoratives
🔴Vidéos sous-titrées
🟠Transcriptions audio disponibles
🟢Information jamais transmise par la couleur seule
🔴Couleur + icône/texte/motif pour les états
🔴Test daltonisme effectué
🟠Palette compatible daltonisme
🟢Tous les éléments interactifs accessibles au clavier
🔴Focus visible sur tous les éléments
🔴Ordre de tabulation logique
🔴Pas de piège clavier
🟠Skip link vers le contenu principal
🟢Labels associés aux champs (for/id)
🔴Erreurs identifiées et décrites
🔴aria-describedby pour les instructions
🟠aria-invalid pour les champs en erreur
🟠7. Performance
Temps de chargement < 3 secondes
🔴Score Lighthouse Performance > 70
🔴Images optimisées
🟠Lazy loading pour les images hors écran
🟠Score Lighthouse Performance > 90
🟢CSS/JS minifiés
🟢8. Responsive design
Site utilisable sur mobile (320px minimum)
🔴Pas de scroll horizontal
🔴Images responsives (max-width: 100%)
🔴Texte lisible sans zoom
🔴Breakpoints testés
🟠Menu adapté au mobile
🟠Images srcset pour différentes résolutions
🟢9. Tests sur appareils réels
Testé sur au moins 1 smartphone iOS
🔴Testé sur au moins 1 smartphone Android
🔴Testé sur ordinateur
🔴Testé en orientation portrait ET paysage
🟠Testé sur tablette
🟠Bugs critiques corrigés
🟠Testé avec connexion lente (3G)
🟢Testé en conditions réelles
🟢10. Validation technique
HTML valide (W3C Validator)
🔴CSS valide
🟠Pas d'erreurs JavaScript en console
🟠Score Lighthouse Accessibility > 90
🟠Score WAVE sans erreurs
🟢Testé avec lecteur d'écran
🟢11. Contenu
Pas de Lorem Ipsum en production
🔴Orthographe vérifiée
🔴Liens fonctionnels
🔴Contenu à jour
🟠Mentions légales présentes
🟠Politique de confidentialité
🟢Validation finale
Voir le cours sur devjs.ch v1.8.0