Checklist

Conformité et affichage

Maquette Validation XHTML Validation CSS Safari Fx IE 6 IE 7 IE 8 Opera Chrome Lynx 1 Impression iPhone YSlow
Accueil erreur(s), avertissement(s) erreur(s), avertissement(s)
Contact erreur(s), avertissement(s) erreur(s), avertissement(s)
Rechercher erreur(s), avertissement(s) erreur(s), avertissement(s)
erreur(s), avertissement(s) erreur(s), avertissement(s)

Sur l’ensemble des maquettes 2

Contenu et style Validité
Vérifier la ponctuation : particulièrement les apostrophes, les guillemets, les marques de citations, les traits d’union et les tirets
Ne faire ni d’faute d’orthographe ni de grammaire
La capitalisation doit être uniforme et traitée par CSS
Proscrire les phrases passe-partout ou récurrentes (« En savoir plus… »)
Éviter les variations dans les mots (« email » vs « e-mail » vs « courriel »)
Traitement des listes (points, virgules, ou point-virgules à la chaque fin d’élément)
S’assurer qu’aucun contenu de test ne subsiste (« lorem ipsum… »)
Vérifier tous les textes cachés (les alt, retranscriptions, les textes dans les fonctions JS)
Visibilité moteur de recherche Validité
Les titres (title) des pages sont importants, s’assurer qu’ils aient un sens et soient représentatifs des mots clefs présents dans la page
Créer des metadata description pour les pages importantes
S’assurer que le marquage du contenu respecte la sémantique HTML (h1, p,…)
Vérifier le format des urls (urls simples à retenir pour les utilisateurs et les moteurs de recherche)
Conformité Validité
Voir tableau ci-dessus
Accessibilité Validité
Indiquer le langage humain principal du document en utilisant l’attribut lang au sein de la balise <html>
Indiquer les passages en langage secondaire dans d’autres balises encadrant le passage concerné
Proposer des liens de navigation dès le début du balisage lorsque les pages contiennent beaucoup de contenu avant le contenu principal
Indiquer des en-têtes dans les tableaux de données avec des balises <th>, et associer toutes les cellules de données à leurs en-têtes
S’assurer que l’ordre des tabulations est logique, en utilisant tabindex au besoin
S’assurer que la page fonctionne toujours quand les images sont désactivées
S’assurer que les pages restent utilisables quand les utilisateurs agrandissent le texte au double de sa taille originale
Vérifier que chaque élément de la page est accessible et manipulable au clavier
Rédiger des textes d’appel de liens qui puissent être compris hors contexte (pas de liens titrés « cliquez ici »)
Pour les daltoniens ou les malvoyants, s’assurer de proposer un contraste suffisant entre le contenu et le fond de la page
N’utiliser aucun contenu qui clignote plus de trois fois par seconde
Ne pas cacher l’indicateur de focus. Quand un utilisateur navigue au clavier, il doit toujours savoir où ces éléments se trouvent
Ne pas attendre des utilisateurs qu’ils perçoivent du sens grâce aux polices, aux couleurs ou à d’autres modifications de style
Être brefs dans les textes alternatifs, mais donner du détail dès lors qu’il y a du sens à transmettre
Fournir un script, des sous-titres, et/ou une traduction en langue des signes pour toutes les vidéos ou les sons contenant du discours
Fournir une version « descriptive » d’une vidéo lorsqu’il est essentiel d’en comprendre le contenu pour des utilisateurs non-voyants
S’assurer que toutes les vidéos, si elles ne se lancent pas automatiquement, offrent au minimum une touche de lecture accessible
Quand du texte peut être interprété visuellement par le navigateur aussi bien que s’il s’agissait d’une image, éviter d’utiliser des images
Éviter les CAPTCHAs (questionnaires de test visuels anti-robots)
Marquer tous les champs de formulaire avec la balise d’étiquetage <label>
Utiliser les regroupements de champs (<fieldset>) avec des balises de titrage (<legend>) pour associer des demandes de saisie
Recenser toutes les erreurs de saisie au format texte, et placer le message à côté du champ concerné ou à un emplacement bien repérable
Offrir des liens d’aide ou des instructions en ligne pour remplir les champs si nécessaire
Ne pas laisser les utilisateurs effectuer des actions importantes sans leur proposer une confirmation ou un moyen d’annuler
Tests fonctionnels Validité
Vérifier toutes les fonctionnalités complexes
Tester avec différentes configurations de résolutions d’écran
Tester tous les formulaires, incluant les filtres anti-spam, les réponses aux formulaires et emails, etc.
Tester sans JS, Flash et tous les autres plugins
Vérifier que tous les liens externes sont valides
Performances Validité
Vérifier l’optimisation des images
Vérifier et mettre en place le cache quand nécessaire
Vérifier le temps de chargement et le poids des pages
Minimiser/compresser les fichiers statiques une fois les développements terminés (JS/CSS)
Optimiser votre CSS : utiliser des chemins courts vers les images, utiliser la nature du CSS c’est à dire l’héritage, etc.
Touches finales Validité
Créer des pages d’erreur / 404
Créer un favicon

  1. L’affichage Lynx est proche de la restitution faite par un lecteur d’écran ou de ce qui est perçu par un moteur de recherche. 

  2. Fortement inspiré de « The Ultimate Website Launch Checklist » et de « La checklist d’accessibilité que je m’étais juré de ne pas rédiger ».