Éducation, société et technologie

Une liste de contrôle pour les normes et standards Web

...bien plus que « des sites sans tableaux »
lundi 13 février 2006

L’expression « standards Web » peut signifier différentes choses à différentes personnes. Pour certains, il s’agit de « sites sans tableaux », pour d’autres « d’utiliser du code valide ». Toutefois, les standards sont beaucoup plus larges que cela. Un site développé selon les standards devrait adhérer aux normes (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG, etc.) et suivre les bonnes pratiques (code valide, accessible et sémantiquement correct, URL conviviaux, etc.).

En d’autres mots, un site conçu selon les standards devrait idéalement être léger, propre, conçu avec des feuilles de styles, accessible, utilisable, et convivial pour les moteurs de recherche.

 À propos de la liste de contrôle

Ce n’est pas une super exhaustive. Il y a probablement plusieurs éléments qui pourraient être ajoutés. De plus, elle ne devrait pas être vue comme une liste d’éléments qui doivent être évalués sur chacun des sites que vous développez. Il s’agit simplement d’un guide qui peut être utilisé :

  • pour montrer l’ampleur des standards Web ;
  • comme un outil pratique pour les développeurs lors de la production d’un site Web ;
  • comme une aide pour les développeurs intéressés à aller vers les standards Web.

 La liste de contrôle

1. Qualité du code

  1. Le Doctype est-il correct ?
    http://www.w3.org/QA/2002/04/valid-dtd-list.html
  2. Y a-t-il un encodage de caractères ?
    http://www.w3.org/International/O-charset.html
  3. Le (X)HTML est-il valide ?
    http://validator.w3.org/
  4. Le CSS est-il valide ?
    http://jigsaw.w3.org/css-validator/
  5. Y a-t-il des astuces (hacks) CSS ?
    http://css-discuss.incutio.com/?page=CssHack
  6. Y a-t-il des classes (class) ou des identifiants (id) inutiles ?
  7. Le code est-il bien structuré ?
    http://www.w3.org/2003/12/semantic-extractor.html
  8. Y a-t-il des liens brisés ?
    http://validator.w3.org/checklink
  9. Comment est le site en terme de vitesse et taille des pages ?
    http://www.websiteoptimization.com/services/analyze/
  10. Y a-t-il des erreurs deJavaScript ?

2. Degré de séparation entre le contenu et la présentation

  1. Les feuilles de styles sont-elles utilisées pour tous les aspects de la présentation (polices, couleurs, marges, bordures, etc.) ?
  2. Les images décoratives sont-elles dans les feuilles de styles ou dans le (X)HTML ?

3. Accessibilité pour les usagers

  1. L’attribut alt est-il utilisé pour toutes les images descriptives ou éditoriales ?
  2. La taille du texte est-elle définie avec des unités de mesure variables plutôt que fixes ?
  3. Certains éléments de mise en page sont-ils brisés si la taille du texte est augmentée ?
  4. Y a-t-il des sauts de menu visibles ?
  5. Les formulaires sont-ils accessibles ?
  6. Les tableaux sont-ils accessibles ?
  7. Les couleurs sont-elles suffisamment contrastées ?
  8. La couleur est-elle utilisée seule pour des informations critiques ?
  9. Y a-t-il un délai de réponse pour les menus déroulants (important pour les usagers qui ont des capacités motrices réduites) ?
  10. Tous les liens sont-ils descriptifs (important pour les usagers aveugles) ?

4. Accessibilité des dispositifs

  1. Le fonctionnement du site est-il acceptable autant sur les navigateurs modernes que sur les anciens navigateurs ?
  2. Le contenu est-il accessible lorsque les feuilles de styles sont désactivées ou ne sont pas supportées ?
  3. Le contenu est-il accessible lorsque les images sont désactivées ou ne sont pas supportées ?
  4. Le site fonctionne-t-il avec des navigateurs textes tels que Lynx ?
  5. Le site fonctionne-t-il correctement lorsqu’il est imprimé ?
  6. Le site fonctionne-t-il correctement sur des assistants numériques personnels ?
  7. Le site contient-il des métadonnées détaillées ?
  8. Le site fonctionne-t-il correctement dans diverses résolutions d’écran ?

5. Convivialité de base

  1. Y a-t-il une hiérarchie visuelle claire ?
  2. Les niveaux d’en-tête se distinguent-ils facilement ?
  3. La navigation est-elle simple à comprendre ?
  4. La navigation est-elle consistante ?
  5. Le niveau de langage du site est-il consistant et approprié ?
  6. Y a-t-il une carte du site et une page de contact ? Sont-elles faciles à trouver ?
  7. Y a-t-il un outil de recherche pour les gros sites ?
  8. Y a-t-il un lien vers la page d’accueil sur toutes les pages du site ?
  9. Les liens sont-ils soulignés ?
  10. Les liens visités sont-ils clairement définis par une couleur unique ?

6. Gestion du site

  1. Y a-t-il une page d’erreur 404 simple et évocatrice qui fonctionne peu importe la profondeur du site ?
  2. Les URL du site sont-ils conviviaux ?
  3. Les URL du site fonctionnent-ils sans les « www » ?
  4. Y a-t-il une icône de favori (favicon) sur le site ?

 1. Qualité du code

1.1 Le Doctype est-il correct ?

Un Doctype (version courte de « déclaration de type de document ») renseigne le validateur au sujet de la version de (X)HTML que vous utilisez et doit apparaître en haut de chaque page Web. Les Doctypes sont des éléments clés d’une page conforme : votre balisage et vos CSS ne valideront pas sans eux. http://www.alistapart.com/articles/doctype/

Plus :

1.2 Y a-t’il un encodage de caractères ?

Si un agent utilisateur (c.-à-d. un navigateur) est incapable de détecter l’encodage de caractères utilisé dans un document, l’usager pourrait recevoir du texte illisible. Cette information est particulièrement important lorsque l’on maintien un site multilingue, mais il est toujours important de déclarer l’encodage de caractères lorsque l’on produit du XHTML/HTML des CSS. http://www.w3.org/International/tutorials/tutorial-char-enc/

Plus :

1.3 Le (X)HTML est-il valide ?

Le code valide est rendu plus rapidement que le code qui contient des erreurs. Le code valide sera mieux rendu que le code invalide. Les navigateurs respectent de plus en plus les normes et il devient de plus en plus important d’écrire du HTML valide et conforme aux normes. http://www.maxdesign.com.au/presentation/sit2003/06.htm

Plus :

1.4 Le CSS est-il valide ?

Vous devez vous assurer qu’il n’y a pas d’erreur ni dans votre HTML ni dans votre CSS, puisque des erreurs dans l’un ou l’autre peut donner un apparence négligée à vos documents. http://www.meyerweb.com/eric/articles/webrev/199904.html

Plus :

1.5 Y a-t-il des astuces (hacks) CSS ?

À la base, les astuces restent un choix personnel, la connaissance que vous avez des méthodes pour contourner un problème ainsi que de la mise en page que vous voulez obtenir. http://www.mail-archive.com/wsg@webstandardsgroup.org/msg05823.html

Plus :

1.6 Y a-t-il des classes (class) ou des identifiants (id) inutiles ?

J’ai remarqué que les développeurs apprenant de nouvelles techniques font souvent du bon CSS mais du mauvais XHTML. Précisément, le code HTML à tendance à être inutilement submergé de divs et ids. Résultat : du HTML ayant peu de sens et des feuilles de styles surchargées. http://www.clagnut.com/blog/228/

1.7 Le code est-il bien structuré ?

Un balisage sémantiquement correct utilise les éléments HTML à bon escient. Du HTML bien structuré a une signification sémantique pour un grand nombre d’agents utilisateurs (navigateurs sans feuilles de styles, navigateurs textes, assistants électroniques personnels, engins de recherche etc.) http://www.maxdesign.com.au/presentation/benefits/index04.htm

Plus :

1.8 Y a-t-il des liens brisés ?

Les liens brisés peuvent frustrer vos usagers et potentiellement envoyer vos clients ailleur. Les liens brisés peuvent aussi nuire à la bonne indexation de votre site par les engins de recherche.

Plus :

1.9 Comment est le site en terme de vitesse et taille des pages ?

Ne me faites pas attendre ! Tel est le message que nous transmet sondage après sondage. Même les usagers de la haute vitesse peuvent souffrir d’un long téléchargement. http://www.websiteoptimization.com/speed/

1.10 Y a-t-il des erruers de JavaScript ?

Internet Explorer pour Windows permet d’activer un outil de débugage qui va ouvrir une nouvelle fenêtre pour vous indiquer les erreurs de JavaScript sur votre site. Allez sous ’Internet Options’ dans l’onglet ’Advanced’. Désactivez ’Disable script debugging’.

 2. Degré de séparation entre le contenu et la présentation

2.1 Les feuilles de styles sont-elles utilisées pour tous les aspects de la présentation (polices, couleurs, marges, bordures, etc) ?

Servez-vous de feuilles de style pour contrôler la mise en page et la présentation. http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-style-sheets

2.2 Les images décoratives sont-elles dans les feuilles de styles ou dans le (X)HTML ?

L’objectif des développeurs devrait être d’enlever toute présentation du code HTML, le laissant ainsi propre et sémantiquement correct. http://www.maxdesign.com.au/presentation/benefits/index07.htm

 3. Accessibilité pour les usagers

3.1 L’attribut « alt » est-il utilisé pour toutes les images descriptives ?

Fournissez un équivalent textuel pour tous les éléments non-textuels. http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-text-equivalent

3.2 Certains éléments de mise en page sont-ils brisés si la taille du texte est augmentée

Utilisez des unitées de mesure relatives plutôt qu’absolue dans vos attributs de balisage et dans les propriétés de vos feuilles de style. http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-relative-units

Plus :

3.3 Certains éléments de la mise en page sont-ils brisés si la taille du texte est augmentée ?

Faites ce simple test. Visitez votre site avec un navigateur qui supporte l’augmentation des tailles de polices. Maintenant, augmentez la taille de la police. Et encore. Et encore... Regardez votre site. Est-ce que la mise en page est encore correcte ? Il est dangereux pour les développeurs de supposer que tut le monde utilise la taille de police par défaut.

3.4 Y a-t-il des sautes de menu visibles ?

Il faut offrir une méthode qui permet aux usagers de sauter par dessuis la navigation répétitive. http://www.section508.gov/index.cfm?FuseAction=Content&amp ;ID=12
Groupez les liens relatifs, identifiez le groupe (pour les agents utilisateurs), et, jusqu’à ce que les agents utilisateurs le puissent, fournissez un moyen de sauter le groupe. http://www.la-grange.net/w3c/WAI-WEBCONTENT-TECHS/#tech-group-links
...les usagers aveugles ne sont pas les seuls qui peuvent être dérangés par de trop nombreux liens dans un espace de navigation. N’oubliez pas les gens à mobilité réduite qui ont de mauvaises technologies adaptative et qui risquent de devoir utilser la touche « tab » pour passer au travers de cette liste. http://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020

Plus :

3.5 Les formulaires sont-ils accessibles ?

Les formulaires ne sont pas les éléments les plus simples à utiliser pour les gens ayant des handicaps. Naviguer d’une page avec du contenu écrit à une autre est une chose, sauter d’un champs de formulaire à l’autre et y insérer de l’information en est une autre. http://www.htmldog.com/guides/htmladvanced/forms/

Plus :

3.6 Les tableaux sont-ils accessibles ?

Pour les tableaux de données, identifier les en-têtes de lignes et de colonnes. Par exemple, en HTML, utiliser TD pour signaler les cellules de données et TH pour signaler les en-têtes. http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-table-headers

Plus :

3.7 Les couleurs sont-elles suffisamment contrastées ?

S’assurer que la combinaison de couleurs entre le premier plan et l’arrière-plan utilise suffisamment de contraste lorsqu’elle est utilisée par des personnes souffrant d’un déficit de perception des couleurs ou sur un écran noir et blanc. http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-color-contrast

Plus :

3.8 La couleur est-elle utilisée seule pour des informations critiques ?

S’assurer que toute information convoyée par des couleurs est également accessible sans couleur, par exemple à partir du contexte ou de balises. http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-color-convey

Il y a trois types principaux de daltonisme : deuteranope (une forme de daltonisme rouge/vert), protanop (une autre forme de daltonisme rouge/vert) et tritanope (une forme de daltonisme bleu/jaune - très rare).

Plus :

3.9 Y a-t-il un délai de réponse pour les menus déroulants (important pour les usagers qui ont des capacités motrices réduites) ?

Les usagers ayant des capacités motrices réduite peuvent trouver les menus déroulants difficiles à utiliser si le temps de réponse est trop rapide.

3.10 Tous les liens sont-ils descriptifs (important pour les usagers aveugles) ?

Identifier clairement la cible de chaque lien. Les liens textes evraient être suffisemment explicites pour être compréhensibles même lorsque on les lit en dehors de leur contexte - de manière isolée ou parmi d’autres liens. Les liens textes doivent également être concis. http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-meaningful-links

  4. Accessiblité des dispositifs

4.1 Le fonctionnement du site est-il acceptable autant sur les navigateurs modernes que sur les anciens navigateurs ?

Avant de commencer à construire votre mise en page CSS, vous devez décider les navigateurs à supporter et à quel niveau vous voulez les supporter. http://www.maxdesign.com.au/presentation/process/index_step01.cfm

4.2 Le contenu est-il accessible lorsque les feuilles de styles sont désactivées ou ne sont pas supportées ?

Certaines personnes peuvent visiter votre site avec un navigateur qui ne supporte pas les feuilles de styles ou encore un navigateur avec les feuilles de styles désactivées. Si le contenu est correctement structuré, ce ne sera pas un problème.

4.3 Le contenu est-il accessible lorsque les images sont désactivées ou ne sont pas supportées ?

Certaines personnes naviguent avec les images désactivées - en particulier les gens qui on de lentes connections. Le contenu doit encore être accessible à ces gens.

4.4 Le site fonctionne-t-il avec des navigateurs textes tels que Lynx ?

Ceci est similaire à une combinaise des images et des feuilles de style désactivées. Un navigateur texte va se fier à du contenu correctement structuré pour fournir du sens.

Plus :

4.5 Le site fonctionne-t-il correctement lorsqu’il est imprimé ?

Vous pouvez prendre n’importe quel document (X)HTML et créer un style assez simple pour l’impression, sans avoir à modifier le balisage. http://www.alistapart.com/articles/goingtoprint/

Plus :

4.6 Le site fonctionne-t-il correctement sur des assistants numériques personnels ?

C’est assez difficile à gérer tant que les assistants numériques personnels ne supportent pas leur type de média. Toutefois, certaines mises en pages fonctionnent mieux avec les

asn

actuels. Le support des asn sera dicté par le public cible.

4.7 Le site contient-il des métadonnées détaillées ?

Les métadonnées sont de l’information compréhensible par des ordinateurs. http://www.w3.org/Metadata/

Les métadonnées sont de l’information structurée qui est spécifiquement créée pour décrire une resource. En d’autre mots, les métadonnées sont des « données sur les données ».

4.8 Le site fonctionne-t-il correctement dans diverses tailles de fenêtres ?

Les développeurs supposent souvent que les tailles moyennes des écrans augmentent. Certains développeurs supposent que la moyenne est de 1024 pixels de large. Mais que faire avec les usagers ayant des plus petits écrans et les usagers ayant des assistants personnels ? Font-ils partie de votre public cible et sont-ils désavantagés ?

 5. Convivialité de base

5.1 Y a-t-il une hiérarchie visuelle claire ?

Organisez et priorisez le contenu d’une page en utilisant la taille, la proéminance et les relations entre le contenu http://www.great-web-design-tips.com/web-site-design/165.html

5.2 Les niveaux d’en-tête se distinguent-ils facilement ?

Utiliser les éléments d’en-tête pour convoyer la structure du document, et les utiliser en conformité avec les spécifications http://www.la-grange.net/w3c/wcag1/wai-pageauth.html#tech-logical-headings

5.3 La navigation est-elle simple à comprendre ?

Votre système de navigation devrait donner à vos visiteurs une indications de l’endroit où ils se trouvent et où ils peuvent aller. http://www.1stsitefree.com/design_nav.htm

5.4 La navigation est-elle consistante ?

Si chaque page de votre site a une présentation consistante, les visiteurs trouveront plus facile de naviguer d’une page à l’autre et de trouver de l’information http://www.juicystudio.com/tutorial/accessibility/navigation.asp

5.5 Le niveau de langage du site est-il consistant et approprié ?

Pour communiquer efficacement, il faut utiliser un language simple et clair. Comprendre un texte avec une mauvaise grammaire peut-être difficile, en particulier si la langue n’est pas la langue maternelle du visiteur. http://www.juicystudio.com/tutorial/accessibility/clear.asp

5.6 Y a-t-il une carte du site et une page de contact ? Sont-elles faciles à trouver ?

La majeure partie des cartes de sites ne transmettent pas correctement les multiples niveaux d’un site. Dans des tests d’utilisabilité, les usagers n’utilisent pas les cartes de site ou ne peuvent pas les trouver. La complexité est aussi un problème : une carte devrait être une carte, pas une épreuve de navigation. http://www.useit.com/alertbox/20020106.html

5.7 Y a-t-il un outil de recherche pour les gros sites ?

Bien que des outils de recherche ne soient pas nécessaire sur des petits sites et que certaines personnes ne s’en serviront jamais, des outils de recherche spécifiques à un site peuvent permettre aux usagers de choisir parmis différentes options de navigation.

5.8 Y a-t-il un lien vers la page d’accueil sur toutes les pages du site ?

Certains usagers aiment repasser par la page d’accueil d’un site après avoir navigué vers le contenu d’un site. La page d’accueil devient un camp de base pour ces usagers, leur permettant de regrouper l’information avant d’explorer d’autres parties du site.

5.9 Les liens sont-ils soulignés ?

Pour maximiser la valeur perçu des possibilités de cliquers, soulignez et colorez les liens. Les usagers ne devraient pas avoir à deviner où ils peuvent cliquer. http://www.useit.com/alertbox/20040510.html

5.10 Les liens visités sont-ils clairement définis par une couleur unique ?

Savoir quelles pages ils ont déjà visitées empêchent les visiteurs de revoir encore et encore les même pages. http://www.useit.com/alertbox/20040503.html

 6. Gestion du site

6.1 Y a-t-il une page d’erreur 404 simple et évocatrice qui fonctionne peu importe la profondeur du site ?

Vous avez demandé une page - soit en tappant un URL directement dans la barre d’adresse, soit en cliquant un lien désuet et vous vous retrouvez nulle part en plein milieu du cyberespace. Un site convivial va vous aider alors que beaucoup d’autre ne feront rien, se fiant au capacités du navigateur de vous expliquer quel est le problème. http://www.alistapart.com/articles/perfect404/

6.2 Les URL du site sont-ils conviviaux ?

La majorité des moteurs de recherche (à quelques exceptions près - comme Google) ne vont pas indexer les pages qui ont des points d’interogation ou d’autres caractères (comme l’éperluette ou le signe d’égalité) dans l’URL... à quoi sert un site que personne ne peut trouver ? http://www.sitepoint.com/article/search-engine-friendly-urls
Un des pires éléments du web du point de vue de l’usager est l’URL. Par contre, s’ils sont courts, logiques et qu’ils se corrigent eux-même, les URLs peuvent être relativement utilisables. http://www.merges.net/theory/20010305.html

Plus :

6.3 Les URL du site fonctionnent-ils sans les « www » ?

Bien que ce nesoit pas critique et dans certains cas, c’est impossible, c’est toujours bon d’offrir aux usagers le choix. Si un usager entre votre nom de domaine sans www et n’obtient pas de site, vous et l’usager pourraient être désavantagés.

6.4 Y a-t-il une icône de favori (favicon) sur le site ?

Un « favicon » est une image utilisée dans presque tout les sites professionnels. Ce dernier permet au webmestre de faire la promotion de son site et de créer une apparence encore plus personnalisée dans le navigateur du visiteur. http://www.favicon.com/

Les « favicon » ne sont pas critiques. Par contre, lorsqu’ils sont absents, ils peuvent causer des erreur 404 dans vos logs (statistiques du site). Des navigateurs comme IE vont en faire la demande au serveur si le site est dans les favoris. Si le « favicon » n’est pas disponible, une page d’erreur 404 pourrait être générée. Ainsi, avoir un « favicon » pourrait limiter les erreurs 404 directement liées au favicon. Il en va de même pour le fichier « robots.txt ».

Cette liste a d’abord
été élaborée dans ses grandes lignessur la liste de diffusion Web Standards
en mai 2004. Elle a été présentéeau Web Standards Group de Sidney le 5 août 2004. Elle est aussi disponible en format PDF pour les développeurs anglophones et francophones. Également disponible sous forme de diaporama.

Cette liste est aussi disponible en :

Comme toujours, merci à

Rose

pour la relecture et à

Lea de Groot

pour les suggestions de la liste pour les développeurs.

Russ Weakley, 13 août 04

Traduction québécoise (française) par

Chantal Ide

pour

W3Québec
.

Relecture par

Normand Lamoureux

et

Denis Boudreau
.


Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 9093 / 1819965

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web statiques  Suivre la vie du site Normes et standards   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 3