Les objectifs
Bien qu’en apparence très basique, le travail du développeur web client requiert de s’assurer d’une multitude de choses (non, nous ne nous occupons pas que du rendu visuel). Pour de ne rien oublier, j’utilise une check-list qui répond aux besoins habituels.
Ce document (à adapter à fonction des besoins du projet) permet une bonne vision d’ensemble sur l’avancement et les éventuels oublis lors de la phase d’intégration.
Je la fournis aussi au format « Markdown » pour plusieurs raisons :
- ce format en texte brut est facilement compréhensible et modifiable par n’importe qui ;
- il peut être aisément convertit au format HTML et être placé à la racine du projet ;
- c’est un format que j’ai adopté dans mes processus avec lequel j’ai l’habitude de travailler.
En pratique, il s’agit au cours du développement d’annoter le document, et de compléter chaque ligne par un OK / NOK / N/A.
La première partie concernant des résultats attendus pour chaque page, elle servira aussi aisément d’index.
Comme précisé dans le document, je ne suis pas l’auteur de cette liste : je n’ai fait que reprendre et combiner plusieurs existants.
La checklist
Voici donc :
Si vous travaillez en PHP le code de transformation est simpliste :
<?php
include_once('markdown.php');
include_once('smartypants.php');
echo(SmartyPants(Markdown(file_get_contents('checklist.markdown'))));
?>
Et vous trouverez les sources nécessaires dans le lien donné plus haut.
Checklist
=========
Conformité et affichage {#conformite}
-------------------------------------
Maquette | Validation XHTML | Validation CSS | Safari | Fx | IE 6 | IE 7 | IE 8 | Opera | Chrome | Lynx [^1] | Impression | iPhone | YSlow
-----------------------------|---------------------------------|---------------------------------|--------|------|------|------|------|-------|--------|-----------|------------|--------|-------
[Accueil](accueil.html) | erreur(s), avertissement(s) | erreur(s), avertissement(s) | | | | | | | | | | |
[Contact](contact.html) | erreur(s), avertissement(s) | erreur(s), avertissement(s) | | | | | | | | | | |
[Rechercher](recherche.html) | erreur(s), avertissement(s) | erreur(s), avertissement(s) | | | | | | | | | | |
[...](#) | erreur(s), avertissement(s) | erreur(s), avertissement(s) | | | | | | | | | | |
[^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.
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](#conformite) |
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 |
[^2]: Fortement inspiré de
"[The Ultimate Website Launch Checklist](http://www.boxuk.com/blog/the-ultimate-website-launch-checklist)" et de
"[La checklist d’accessibilité que je m’étais juré de ne pas rédiger](http://www.pompage.net/pompe/checklistaccessibilite)".
*[vs]: Versus
*[IE]: Internet Explorer
*[Fx]: Firefox
*[JS]: JavaScript
*[etc]: Et cætera
*[NOK]: Non OK
*[N/A]: Non applicable
*[CSS]: Cascading Style Sheets
*[AJAX]: Asynchronous JavaScript and XML
*[ARIA]: Accessible Rich Internet Applications
*[XHTML]: eXtensible HyperText Markup Language