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.
Comment utiliser cette checklist
- Copiez cette checklist dans votre projet
- Cochez chaque élément au fur et à mesure
- Ne mettez pas en ligne tant que les éléments essentiels ne sont pas validés
- Documentez les exceptions justifiées
Légende
| 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 du site défini en une phrase claire | ☐ |
| 🔴 | Public cible identifié | ☐ |
| 🟠 | Persona créé | ☐ |
| 🔴 | Fonctionnalités listées et priorisées (MoSCoW) | ☐ |
| 🟠 | Contraintes documentées (temps, budget, technique) | ☐ |
| 🟠 | Critères de succès définis | ☐ |
2. Architecture de l'information
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Structure de navigation définie | ☐ |
| 🟠 | Card sorting effectué avec au moins 3 personnes | ☐ |
| 🟠 | Résultats du card sorting analysés | ☐ |
| 🔴 | Menu de navigation logique et clair | ☐ |
| 🟢 | Fil d'Ariane prévu (si site > 2 niveaux) | ☐ |
3. Design et identité visuelle
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | 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 (h1, h2, h3, p) | ☐ |
| 🟠 | Espacements standardisés (multiples de 8px) | ☐ |
| 🟠 | Charte graphique documentée | ☐ |
| 🟢 | Règle 60-30-10 appliquée aux couleurs | ☐ |
4. Ergonomie et UX
Contraste et lisibilité
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | 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 (pas justifié) | ☐ |
Interaction
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | 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 | ☐ |
Navigation
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Logo cliquable vers l'accueil | ☐ |
| 🔴 | Menu visible et cohérent sur toutes les pages | ☐ |
| 🔴 | Indicateur de page active | ☐ |
| 🟠 | Possibilité de revenir en arrière | ☐ |
| 🟢 | Fil d'Ariane sur les sites profonds | ☐ |
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, etc.) | ☐ |
| 🟢 | 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 effectués sur maquettes | ☐ |
| 🟠 | Retours intégrés et maquettes itérées | ☐ |
| 🟢 | Interactions documentées | ☐ |
6. Accessibilité
Structure HTML
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | HTML sémantique utilisé (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 (<html lang="fr">) | ☐ |
| 🟠 | Landmarks ARIA correctement utilisés | ☐ |
Images et médias
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Alt text sur toutes les images informatives | ☐ |
| 🔴 | Alt="" sur les images décoratives | ☐ |
| 🟠 | Vidéos sous-titrées (si applicable) | ☐ |
| 🟢 | Transcriptions audio disponibles | ☐ |
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é | ☐ |
| 🟢 | Palette compatible daltonisme | ☐ |
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 | ☐ |
| 🟠 | Pas de piège clavier | ☐ |
| 🟢 | 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 < 3 secondes | ☐ |
| 🔴 | Score Lighthouse Performance > 70 | ☐ |
| 🟠 | Images optimisées (compression, format moderne) | ☐ |
| 🟠 | Lazy loading pour les images hors écran | ☐ |
| 🟢 | Score 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 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 (soleil, mobilité) | ☐ |
10. Validation technique
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | HTML valide (W3C Validator) | ☐ |
| 🟠 | CSS valide (W3C CSS Validator) | ☐ |
| 🟠 | Pas d'erreurs JavaScript en console | ☐ |
| 🟠 | Score Lighthouse Accessibility > 90 | ☐ |
| 🟢 | Score WAVE sans erreurs | ☐ |
| 🟢 | Testé avec lecteur d'écran | ☐ |
11. Contenu
| Priorité | Critère | Fait |
|---|---|---|
| 🔴 | Pas de Lorem Ipsum en production | ☐ |
| 🔴 | Orthographe vérifiée | ☐ |
| 🔴 | Liens fonctionnels (pas de 404) | ☐ |
| 🟠 | Contenu à jour | ☐ |
| 🟠 | Mentions légales présentes (si requis) | ☐ |
| 🟢 | Politique de confidentialité (si données collectées) | ☐ |
Résumé par score
Score minimum pour mise en ligne
Comptez vos éléments cochés :
| Priorité | Total | Cochés | Pourcentage |
|---|---|---|---|
| 🔴 Essentiels | 45 | ___ | ___% |
| 🟠 Importants | 32 | ___ | ___% |
| 🟢 Recommandés | 14 | ___ | ___% |
Critères de mise en ligne :
- 🔴 100% des éléments essentiels cochés
- 🟠 70%+ des éléments importants cochés
Modèle de document de validation
markdown
# Validation projet : [Nom du projet]
**Date** : ____/____/____
**Validé par** : ____________________
## Scores
| Catégorie | Score |
|-----------|:-----:|
| 🔴 Essentiels | __/45 (100% requis) |
| 🟠 Importants | __/32 (70% requis) |
| 🟢 Recommandés | __/14 |
## Éléments non conformes justifiés
| Élément | Justification |
|---------|---------------|
| | |
## Bugs connus acceptés
| Bug | Impact | Justification |
|-----|--------|---------------|
| | | |
## Tests effectués
| Appareil | Navigateur | Résultat |
|----------|------------|:--------:|
| | | ✅/⚠️/❌ |
## Décision
- [ ] ✅ Prêt pour mise en ligne
- [ ] ⚠️ Mise en ligne avec réserves
- [ ] ❌ Corrections nécessaires
**Signature** : ____________________Références
Cette checklist s'appuie sur les références suivantes :
| Source | Domaine |
|---|---|
| WCAG 2.2 (W3C) | Accessibilité |
| Nielsen Norman Group | Utilisabilité |
| Steve Krug — Don't Make Me Think | Ergonomie |
| Material Design (Google) | Design |
| Luke Wroblewski — Mobile First | Responsive |
| Web.dev (Google) | Performance |
Félicitations !
Si vous avez complété cette checklist, votre projet est prêt pour une mise en ligne professionnelle.
Retournez à l'introduction pour revoir les concepts ou partagez cette checklist avec vos collègues.