Checklist QA de site web (gratuite, téléchargeable)

Qu'est-ce qu'une checklist QA de site web ?

Une checklist QA de site web est une liste systématique de vérifications qui garantit qu'un site web fonctionne correctement avant sa mise en ligne. Elle couvre tout, des liens cassés et de la compatibilité navigateur aux performances, à l'accessibilité et à l'exactitude du contenu.

Considérez-la comme le dernier contrôle qualité entre « terminé » et « en ligne ». Une bonne checklist QA de site web détecte les problèmes que les développeurs et les créateurs individuels manquent — parce qu'ils regardent la même page depuis des semaines et ne peuvent plus voir les problèmes.

Cet article fournit une checklist QA de site web gratuite et téléchargeable, organisée par catégorie, afin que vous puissiez l'utiliser telle quelle ou l'adapter à votre projet.

Checklist QA de site web (gratuite, téléchargeable)

1. Tests fonctionnels

  • Tous les liens internes fonctionnent (aucun lien cassé)
  • Tous les liens externes s'ouvrent correctement (vérifier le comportement de target="_blank")
  • Tous les formulaires s'envoient correctement (formulaire de contact, inscription, recherche)
  • La validation des formulaires fonctionne (champs obligatoires, format e-mail, règles de mot de passe)
  • Les messages d'erreur des formulaires sont utiles et visibles
  • Les boutons d'appel à l'action renvoient vers les bonnes pages
  • La fonctionnalité de recherche renvoie des résultats pertinents
  • La pagination fonctionne correctement (précédent/suivant, numéros de page)
  • Les téléchargements de fichiers se déclenchent correctement (PDF, images, documents)
  • Les lecteurs vidéo et audio se chargent et se lancent
  • Les fenêtres lightbox / modales s'ouvrent et se ferment correctement
  • La page 404 s'affiche correctement (pas la page serveur par défaut)
  • La page d'erreur 500 est stylée et conviviale
  • La fonctionnalité de déconnexion efface correctement la session
  • La gestion du délai d'expiration de session fonctionne comme prévu

2. Tests multi-navigateurs et multi-appareils

  • Chrome (2 dernières versions)
  • Firefox (2 dernières versions)
  • Safari (2 dernières versions, y compris macOS et iOS)
  • Edge (2 dernières versions)
  • Mobile Safari (iPhone, iPad — plusieurs tailles d'écran)
  • Chrome pour Android (plusieurs tailles d'écran)
  • Samsung Internet (si région à forte utilisation)
  • Mise en page réactive à 320 px, 768 px, 1024 px, 1440 px, 1920 px
  • Aucune barre de défilement horizontale à aucune largeur courante
  • Les zones cibles tactiles mesurent au moins 48 x 48 px (utilisabilité mobile)
  • Les tailles de police sont lisibles sur les petits écrans
  • Les images se redimensionnent correctement et ne débordent pas

3. Tests de performance

  • Temps de chargement de la page inférieur à 3 secondes (ou seuil cible)
  • Score de performance Lighthouse ≥ 80 (mobile)
  • Images optimisées (compressées, bon format, chargement paresseux)
  • CSS et JavaScript minifiés
  • Ressources bloquant le rendu minimisées
  • Core Web Vitals réussis (LCP < 2,5 s, FID < 100 ms, CLS < 0,1)
  • Temps de réponse du serveur (TTFB) inférieur à 600 ms
  • En-têtes de mise en cache configurés correctement
  • CDN configuré (si applicable)
  • Aucune fuite de mémoire dans les pages à longue durée de vie (SPA)

4. Tests SEO et métadonnées

  • Le titre de page (balise title) est défini et unique par page
  • La balise meta description est définie et convaincante
  • Les balises Open Graph (og:title, og:description, og:image) sont présentes
  • Les balises Twitter Card sont présentes
  • L'URL canonique est définie correctement
  • La balise h1 est présente et contient le mot-clé principal
  • La hiérarchie des titres est logique (h1 → h2 → h3)
  • Le texte alt est ajouté à toutes les images
  • Le sitemap XML est soumis aux moteurs de recherche
  • Robots.txt est configuré correctement
  • Les balises Noindex sont appliquées aux pages de préproduction/développement
  • Les données structurées / le balisage schema sont valides (test avec Google Rich Results)
  • Les URL sont propres et lisibles (pas de tirets bas, pas de bruit de paramètres)
  • Les redirections 301 sont en place pour les URL modifiées
  • Les erreurs 404 provenant d'anciennes URL redirigent vers des pages pertinentes

5. Tests d'accessibilité

  • La navigation au clavier fonctionne (Tab, Entrée, Échap, touches fléchées)
  • Les indicateurs de focus sont visibles (non supprimés via outline: none)
  • Le lien « passer au contenu » est présent et fonctionnel
  • Le contraste des couleurs respecte WCAG AA (4,5:1 pour le texte normal, 3:1 pour le grand texte)
  • Le lecteur d'écran peut parcourir la page logiquement
  • Les libellés ARIA sont utilisés lorsque nécessaire (contenu dynamique, contrôles personnalisés)
  • Les champs de formulaire ont des libellés associés
  • Les messages d'erreur sont annoncés par les lecteurs d'écran
  • Le contenu vidéo comporte des sous-titres ou des transcriptions
  • Les éléments interactifs sont accessibles via le clavier
  • Le zoom de page jusqu'à 200 % ne casse pas la mise en page
  • La préférence de mouvement réduit est respectée (prefers-reduced-motion)

6. Tests de contenu et de design

  • Aucune erreur d'orthographe ou de grammaire
  • La voix de la marque est cohérente sur toutes les pages
  • Le logo renvoie vers la page d'accueil (pas seulement une image statique)
  • Les informations de contact sont exactes (e-mail, téléphone, adresse)
  • Les pages légales sont à jour (politique de confidentialité, conditions d'utilisation)
  • L'année de copyright dans le pied de page est à jour
  • Les images ne sont ni pixélisées ni étirées
  • Le rendu des polices est cohérent entre les navigateurs
  • L'espacement et l'alignement sont cohérents (aucun artefact visuel)
  • Les animations sont fluides (60 ips) et ne provoquent pas de nausée
  • La feuille de style d'impression fonctionne (ou le contenu s'imprime proprement)

7. Tests de sécurité

  • HTTPS est appliqué (redirection HTTP vers HTTPS)
  • Le certificat SSL est valide (non expiré)
  • Les soumissions de formulaires utilisent POST (et non GET)
  • La validation des entrées prévient les failles XSS et l'injection SQL
  • Les pages d'authentification utilisent exclusivement HTTPS
  • Les cookies de session sont sécurisés et HttpOnly
  • Aucune donnée sensible dans le code source (clés API, mots de passe, jetons)
  • Les en-têtes de sécurité (CSP, HSTS, X-Frame-Options) sont configurés
  • Les URL d'administration ne sont pas accessibles publiquement
  • Les téléversements de fichiers sont restreints (type, taille) et analysés

Tests QA de site web : comment dérouler la checklist

Étape 1 : Choisissez vos outils

  • Tests manuels — parcourez la checklist page par page
  • Outils automatisés — Lighthouse, axe DevTools, WAVE, Screaming Frog
  • Outils de retour visuel — BugCapturer pour annoter les problèmes directement sur la page

Étape 2 : Allez page par page

N'essayez pas de tester tout le site d'un coup. Choisissez une page, parcourez toutes les catégories applicables, puis passez à la page suivante. Commencez par les pages à fort trafic et les flux de travail critiques (page d'accueil, paiement, connexion, recherche).

Étape 3 : Consignez les problèmes au fur et à mesure

Lorsque vous trouvez un bug, consignez-le immédiatement. Utilisez un outil comme BugCapturer pour :
  • Prendre une capture d'écran annotée avec des flèches et du texte pointant vers le problème
  • Capturer automatiquement l'URL, le navigateur, l'OS et la résolution d'écran
  • Enregistrer une courte vidéo si le bug implique une animation ou une interaction
  • Capturer automatiquement les erreurs de console et les pannes réseau

Étape 4 : Corrigez et retestez

Assignez les problèmes aux bons membres de l'équipe, définissez les priorités et retestez après les corrections. Chaque bug doit être vérifié avant la mise en ligne du site.

Checklist d'assurance qualité web : conseils de pro

Testez sur de vrais appareils, pas seulement des émulateurs — le mode réactif des DevTools du navigateur est utile, mais il ne peut pas remplacer un test sur un véritable iPhone ou téléphone Android.
  • Testez avec de vraies données — utilisez un contenu qui correspond au volume et à la variété de la production. Le texte « Lorem ipsum » masque les problèmes de mise en page.
  • Testez en mode navigation privée — les pages en cache et les extensions peuvent masquer les problèmes. Le mode navigation privée vous donne une vue propre.
  • Testez avec un réseau lent — la limitation 3G révèle des problèmes de performance que le Wi-Fi rapide masque.
  • Faites-vous aider par un second regard — après avoir testé la même page 10 fois, vous arrêtez de voir les problèmes. Échangez vos checklists avec un collègue.
  • Utilisez un outil de retour visuel — des outils comme BugCapturer rendent le signalement des bugs rapide et précis, en particulier pour les problèmes visuels difficiles à décrire par des mots.
  • Comment BugCapturer aide pour la QA de site web

    BugCapturer, une extension Chrome gratuite pour le signalement de bugs et le retour visuel, s'intègre directement dans le flux de travail QA :

    • Annotation de captures d'écran : faites glisser pour sélectionner la zone problématique, ajoutez des flèches, des rectangles et du texte. Aucun outil de capture d'écran séparé nécessaire.
    • Enregistrement d'écran : enregistrez l'onglet en cours sous forme de vidéo WebM, puis rognez et extrayez les images clés. Idéal pour les bugs impliquant une animation, des états au survol ou des interactions.
    • Métadonnées techniques automatiques : l'URL, le navigateur, l'OS, la résolution d'écran et la fenêtre d'affichage sont collectés automatiquement — aucune saisie manuelle.
    • Collecte de données de diagnostic : capture les journaux de console au niveau d'erreur et les requêtes réseau ayant échoué (statut HTTP ≥ 400). Les URL réseau sont automatiquement expurgées des paramètres sensibles.
    • E-mail en un clic : tout est regroupé dans un e-mail structuré, prêt à être envoyé au développeur.
    • Export Excel/TSV : copiez en un clic une ligne de rapport de bug structurée en 12 colonnes dans votre presse-papiers pour un suivi au niveau de l'équipe.

    Avec BugCapturer, dérouler une checklist QA de site web devient considérablement plus rapide. Chaque bug prend 30 secondes à signaler au lieu de 5 minutes.

    Téléchargement : checklist QA de site web

    Copiez la checklist ci-dessus dans le format de votre choix :

    • Google Sheets / Excel — créez une feuille de calcul avec des colonnes pour chaque catégorie et des cases à cocher
    • Notion / Trello — créez une carte checklist pour chaque catégorie
    • Markdown — conservez le texte brut dans votre dépôt ou votre wiki
    • Impression — utilisez-la comme checklist physique pour les sessions de tests manuels

    Le meilleur format est celui que votre équipe QA utilise réellement. Adaptez la checklist à votre projet — ajoutez des éléments spécifiques au projet, supprimez ceux qui ne sont pas pertinents et mettez-la à jour après chaque version.

    Arrêtez de décrire les bugs,
    montrez-les.
    Gratuit pour toujours, sans inscription. Installez en quelques secondes, envoyez votre premier rapport de bug aujourd'hui.
    Ajouter à Chrome — Gratuit