Checklist finale
Objectif
Cette checklist regroupe tous les critères des phases précédentes. Utilisez-la pour valider votre projet avant la mise en ligne, puis comme référence pour le suivi post-lancement.
Comment l'utiliser
- Copiez cette checklist dans votre projet
- Cochez chaque élément au fur et à mesure
- Ne mettez pas en ligne tant que les éléments 🔴 ne sont pas tous validés
- Documentez les exceptions justifiées
| Symbole | Signification |
|---|---|
| 🔴 | Essentiel — bloquant pour la mise en ligne |
| 🟠 | Important — devrait être fait |
| 🟢 | Recommandé — améliore la qualité |
1. Clarification du projet
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Objectif défini en une phrase claire | ☐ |
| 🔴 | Public cible identifié (persona) | ☐ |
| 🔴 | Fonctionnalités priorisées (MoSCoW) | ☐ |
| 🟠 | Contraintes documentées (temps, budget, technique) | ☐ |
| 🟠 | Critères de succès SMART définis | ☐ |
2. Architecture de l'information
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Structure de navigation définie | ☐ |
| 🔴 | Menu de navigation logique et clair | ☐ |
| 🟠 | Card sorting effectué (≥ 3 personnes) | ☐ |
| 🟢 | Fil d'Ariane prévu (si site > 2 niveaux) | ☐ |
3. Design et identité visuelle
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Palette définie (3-4 couleurs max) | ☐ |
| 🔴 | Couleurs accessibles (contrastes validés) | ☐ |
| 🔴 | Maximum 2 familles de polices | ☐ |
| 🔴 | Taille de police ≥ 16px (corps de texte) | ☐ |
| 🟠 | Échelle typographique définie (h1-h3, p) | ☐ |
| 🟠 | Espacements standardisés (multiples de 8px) | ☐ |
| 🟠 | Charte graphique documentée | ☐ |
| 🟢 | Règle 60-30-10 appliquée | ☐ |
4. Ergonomie et UX
Contraste et lisibilité
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Contraste ≥ 4.5:1 (texte normal) | ☐ |
| 🔴 | Contraste ≥ 3:1 (grand texte ≥ 18px) | ☐ |
| 🔴 | Longueur des lignes 60-80 caractères | ☐ |
| 🟠 | Interligne ≥ 1.5 | ☐ |
| 🟠 | Texte aligné à gauche (pas justifié) | ☐ |
Interaction et navigation
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Zones cliquables ≥ 48×48px sur mobile | ☐ |
| 🔴 | Espacement suffisant entre éléments cliquables | ☐ |
| 🔴 | Feedback pour toutes les actions | ☐ |
| 🔴 | Logo cliquable vers l'accueil | ☐ |
| 🔴 | Menu visible et cohérent sur toutes les pages | ☐ |
| 🔴 | Indicateur de page active | ☐ |
| 🔴 | Messages d'erreur clairs et constructifs | ☐ |
| 🟠 | États hover/focus/active définis | ☐ |
| 🟠 | Indicateurs de chargement prévus | ☐ |
Formulaires
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Labels visibles pour tous les champs | ☐ |
| 🔴 | Champs obligatoires clairement indiqués | ☐ |
| 🔴 | Validation avec messages explicites | ☐ |
| 🟠 | Nombre de champs minimisé | ☐ |
| 🟠 | Types de champs appropriés (email, tel...) | ☐ |
| 🟢 | Autocomplétion activée où pertinent | ☐ |
5. Maquettes
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Maquettes créées avant le code | ☐ |
| 🟠 | Version mobile ET desktop maquettées | ☐ |
| 🟠 | Tests utilisateurs sur maquettes (5 secondes / premier clic) | ☐ |
| 🟠 | Retours intégrés et maquettes itérées | ☐ |
6. Accessibilité
Structure HTML
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | HTML sémantique (header, nav, main, footer) | ☐ |
| 🔴 | Hiérarchie des titres respectée (h1 → h2 → h3) | ☐ |
| 🔴 | Un seul <h1> par page | ☐ |
| 🔴 | Langue déclarée (<html lang="fr">) | ☐ |
Images et médias
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | alt descriptif sur toutes les images informatives | ☐ |
| 🔴 | alt="" sur les images décoratives | ☐ |
| 🟠 | Vidéos sous-titrées (si applicable) | ☐ |
Couleurs et daltonisme
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Information jamais transmise par la couleur seule | ☐ |
| 🔴 | Couleur + icône/texte/motif pour les états | ☐ |
| 🟠 | Test daltonisme effectué (Chrome DevTools) | ☐ |
Navigation clavier
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Tous les éléments interactifs accessibles au clavier | ☐ |
| 🔴 | Focus visible sur tous les éléments | ☐ |
| 🔴 | Ordre de tabulation logique | ☐ |
| 🟢 | Skip link vers le contenu principal | ☐ |
Formulaires accessibles
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | 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
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Temps de chargement < 3s | ☐ |
| 🔴 | Lighthouse Performance > 70 | ☐ |
| 🟠 | Images optimisées (compression, format moderne) | ☐ |
| 🟠 | Lazy loading pour les images hors écran | ☐ |
| 🟢 | Lighthouse Performance > 90 | ☐ |
| 🟢 | CSS/JS minifiés | ☐ |
8. Responsive design
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Site utilisable sur mobile (320px minimum) | ☐ |
| 🔴 | Pas de scroll horizontal | ☐ |
| 🔴 | Images responsives (max-width: 100%) | ☐ |
| 🔴 | Texte lisible sans zoom | ☐ |
| 🟠 | Breakpoints testés (mobile / tablette / desktop) | ☐ |
| 🟠 | Menu adapté au mobile (hamburger si nécessaire) | ☐ |
| 🟢 | Images srcset pour différentes résolutions | ☐ |
9. Tests sur appareils réels
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Testé sur au moins 1 iPhone | ☐ |
| 🔴 | Testé sur au moins 1 Android | ☐ |
| 🔴 | Testé sur ordinateur | ☐ |
| 🟠 | Testé en portrait ET paysage | ☐ |
| 🟠 | Bugs critiques corrigés | ☐ |
| 🟢 | Testé avec connexion lente (3G) | ☐ |
| 🟢 | Testé en conditions réelles (soleil, mobilité) | ☐ |
10. Validation technique
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | HTML valide (W3C Validator) | ☐ |
| 🟠 | CSS valide (W3C CSS Validator) | ☐ |
| 🟠 | Pas d'erreur JavaScript en console | ☐ |
| 🟠 | Lighthouse Accessibility > 90 | ☐ |
| 🟢 | WAVE sans erreurs | ☐ |
| 🟢 | Testé avec lecteur d'écran (NVDA / VoiceOver) | ☐ |
11. Contenu
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Pas de Lorem Ipsum en production | ☐ |
| 🔴 | Orthographe vérifiée | ☐ |
| 🔴 | Liens fonctionnels (pas de 404) | ☐ |
| 🟠 | Mentions légales présentes (si requis) | ☐ |
| 🟠 | Politique de confidentialité (si données collectées) | ☐ |
| 🟢 | Contenu à jour | ☐ |
12. Suivi après mise en ligne
| Priorité | Critère | Fait |
|---|---|---|
| 🟠 | Analytics installés — Plausible, Matomo ou équivalent souverain (Phase 7) | ☐ |
| 🟠 | Web Vitals surveillés — PageSpeed Insights mensuel | ☐ |
| 🟢 | Heatmap configurée — PostHog, Mouseflow ou Clarity (Phase 7) | ☐ |
| 🟢 | Sondage de satisfaction prévu après 2-4 semaines | ☐ |
| 🟢 | Plan de mise à jour défini (correctifs + évolutions) | ☐ |
Score minimum pour mise en ligne
| Priorité | Total | Cochés | % requis |
|---|---|---|---|
| 🔴 Essentiels | ~50 | ___ | 100% |
| 🟠 Importants | ~32 | ___ | 70%+ |
| 🟢 Recommandés | ~15 | ___ | au mieux |
Modèle de document de validation à copier
markdown
# Validation projet : [Nom du projet]
**Date** : ____/____/____
**Validé par** : ____________________
## Scores
| Catégorie | Score |
|-----------|:-----:|
| 🔴 Essentiels | __/50 (100% requis) |
| 🟠 Importants | __/32 (70% requis) |
| 🟢 Recommandés | __/15 |
## Éléments non conformes justifiés
| Élément | Justification |
|---------|---------------|
| | |
## Tests effectués
| Appareil | Navigateur | Résultat |
|----------|------------|:--------:|
| | | ✅/⚠️/❌ |
## Décision
- [ ] ✅ Prêt pour mise en ligne
- [ ] ⚠️ Mise en ligne avec réserves
- [ ] ❌ Corrections nécessairesFélicitations
Si vous avez complété cette checklist, votre projet est prêt pour une mise en ligne professionnelle. Retournez à l'introduction pour partager cette méthodologie.