ÿþ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