Les standards du Web - plus que des 'sites sans tableaux' : la Check-List

par Russ Weakley / Traduction ChristopheDucamp

mardi 17 août 2004

Le terme standards du Web peut signifier différentes choses à différentes personnes. Pour certains, ça ne consiste qu'en des 'sites-sans-tables', pour d'autres cela consiste à 'utiliser du code valide'. Cependant, les standards du Web vont beaucoup plus loin que cela. Un site construit selon les standards devrait adhérer aux standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) et suivre une ligne de conduite des meilleures pratiques (code valide, code accessible, code sémantiquement correct, URLs faciles pour l'utilisateur, etc).

En d'autre mots, un site construit selon les standards du Web devrait être idéalement épuré, propre, fondé sur les CSS, accessible, utilisable et favorablement disposé aux moteurs de recherche.

A propos de la check-list

Ce n'est pas une supra-check-list. Il existe probablement beaucoup d'items qui pourraient s'y ajouter. Mais le plus important est de ne pas la considérer comme une liste d'items qui  doivent être abordés sur chacun des sites que vous développez. C'est simplement un guide qui peut être utilisé :

La check-list

  1. Qualité du code
    1. Est-ce que le site utilise un Doctype correct ?
    2. Est-ce que le site utilise un encodage de caractères correct ?
    3. Est-ce que le site utilise du (X)HTML Valide ?
    4. Est-ce que le site est CSS Valide ?
    5. Est-ce que le site utilise quelques hacks CSS ?
    6. Est-ce que le site utilise des classes ou ids non indispensables ?
    7. Est-ce que le code est bien structuré ?
    8. Est-ce que le site a des liens rompus ?
    9. Comment se comporte le site en termes de vitesse/taille de page ?
    10. Le site comporte t'il des erreurs JavaScript ?
  2. Degré de séparation entre contenu et présentation
    1. Est-ce que le site utilise CSS pour tous les aspects de présentation (polices, couleur, marges, zones de remplissage, bordures, etc.) ?
    2. Est-ce que toutes les images de décoration sont dans la CSS, ou apparaissent t'elles dans le (X)HTML ?
  3. Accessibilité pour les utilisateurs
    1. Est-ce que tous les attributs "alt" sont utilisés pour tous les descriptifs d'images ?
    2. Est-ce que le site utilise des unités relatives plutôt que des unités absolues pour la taille du texte ?
    3. Est-ce que l'un des aspects de la mise en page se brise lorsque la taille de police est augmentée ?
    4. Est-ce que le site utilise des menus visibles faciles à outrepasser ?
    5. Est-ce que le site utilise des formulaires accessibles ?
    6. Est-ce que le site utilise des tables accessibles ?  
    7. Couleurs : La luminosité et les contrastes sont-ils suffisants ?
    8. Est-ce qu'une couleur unique est utilisée pour de l'information critique ?
    9. Y'a t'il un délai de réponse pour les menus déroulants ? (pour les utilisateurs à mobilité réduite )?
    10. Est-ce que tous les liens sont décrits (pour les utilisateurs aveugles) ?
  4. Accessibilité pour les terminaux
    1. Est-ce que le site fonctionne de façon acceptable à travers les navigateurs récents et plus anciens ?
    2. Est-ce que le contenu est accessible avec la CSS déconnectée ou non supportée ?
    3. Est-ce que le contenu est accessible avec les images déconnectées ?
    4. Est-ce que le site fonctionne dans des navigateurs comme Lynx ?
    5. Est-ce que le site fonctionne bien quand on l'imprime ?
    6. Est-ce que le site fonctionne bien avec des terminaux mobiles ?
    7. Est-ce que le site comprend des métadonnées détaillées ?
    8. Est-ce que le site fonctionne bien dans différentes tailles de fenêtres de navigateurs ?
  5. Ergonomie Basique (Utilisabilité)
    1. Y'a t'il une hiérarchie visuelle claire ?
    2. Les en-têtes (titres) sont-t'ils faciles à distinguer ?
    3. Est-ce que la navigation du site est facile à comprendre ?
    4. Est-ce que la navigation du site est cohérente ?
    5. Est-ce que le site utilise un langage cohérent et approprié ?
    6. Avez-vous une carte de site et une page contact ? Sont-elles faciles à trouver
    7. Pour les grands sites, y'a t'il un moteur de recherche ?
    8. Y'a t'il un lien vers la page d'accueil sur chaque page du site ?
    9. Est-ce que les liens sont soulignés ?
    10. Est-ce que les liens visités sont clairement définis avec une couleur unique ?
  6. Organisation du Site
    1. Est-ce que le site a une page erreur 404 ayant du sens et utile qui fonctionne quel que soit le niveau de profondeur du site ?
    2. Est-ce que le site utilise des URLs claires pour les utilisateurs ?
    3. Est-ce que vos URLs fonctionnent sans "www" ?
    4. Est-ce que le site a une favicon ?

1. Qualité du code

1. Est-ce que le site utilise un Doctype correct ?

Un doctype (raccourci de 'document type declaration') informe le validateur de la version du (X)HTML que vous utilisez. Il doit apparaître tout en haut de chacune des pages Web. Les Doctypes sont un composant-clé des pages Web standards : votre code et votre CSS ne valideront pas sans eux.
http://www.alistapart.com/articles/doctype/

Plus :

2. Est-ce que le site utilise un réglage d'encodage de caractères ?

Si l'agent utilisateur (par exemple un navigateur) est incapable de détecter l'encodage de caractère utilisé dans un document Web, l'utilisateur peut se retrouver confronté à un texte illisible. Cette information est particulièrement importante pour tous ceux qui maintiennent et font évoluer un site multilingue, mais le fait de déclarer l'encodage de caractère du document est important pour quiconque produit du XHTML/HTML ou du CSS.
http://www.w3.org/International/tutorials/tutorial-char-enc/

En savoir plus :

3. Est-ce que le site utilise du (X)HTML Valide ?

Le code valide assurera un rendu plus rapide que le code avec des erreurs. Le code valide assurera un meilleur rendu que du code invalide. Les navigateurs sont en train de devenir de plus en plus conformes aux standards et cela devient de plus en plus nécessaire d'écrire du HTML valide et conforme aux standards.
http://www.maxdesign.com.au/presentation/sit2003/06.htm

Plus :

4. Est-ce que le site est Valide CSS ?

Vous devez vous assurer qu'il n'y a plus quelque erreur dans soit votre HTML ou soit votre CSS, parce des erreurs dans l'un ces deux endroits peut donner un loupé sur l'apparence du document.
http://www.meyerweb.com/eric/articles/webrev/199904.html

Plus :

5. Est-ce que le site utilise des bidouillages de CSS ?

Fondamentalement, les hacks et bidouillages sont un choix personnel, provenant de toute la connaissance que vous avez pu accumuler de votre environnement et de la conception spécifique que vous essayez de réaliser.
http://www.mail-archive.com/wsg@webstandardsgroup.org/msg05823.html

Plus :

6. Est-ce que le site utilise des classes ou ids non indispensables ?

J'ai noté que les développeurs apprenant de nouvelles compétences parviennent souvent à un bon code CSS mais un XHTML pauvre. Plus précisément, le code HTML tend à être plein de divs et ids non nécessaires. Ceci donne un HTML vraiment sans aucun sens et des feuilles de style boursouflées.
http://www.clagnut.com/blog/228/

7. Est-ce que le code est bien structuré ?

Sémantiquement parlant, une syntaxe correct utilise des éléments HTML pour leur usages donnés. Le HTML bien structuré a un sens sémantique pour une larger gamme d'agents utilisateurs (navigateurs sans feuilles de style, navigateurs textes, PDA, moteurs de recherche, etc.)
http://www.maxdesign.com.au/presentation/benefits/index04.htm

Plus :

8. Est-ce que le site a des liens rompus ?

Les liens rompus peuvent frustrer les utilisateurs et faire fuir les clients. Les liens rompus peuvent aussi empêcher les moteurs d'indexer correctement votre site.

Plus :

9. Comment se comporte le site en termes de vitesse/taille de page ?

Ne me faites pas attendre... C'est les message que les utilisateurs nous donnent après une étude. Même les utilisateurs disposant d'une bonne bande passante peuvent souffrir d'un chargement lent.
http://www.websiteoptimization.com/speed/

10. Est-ce que le site a des erreurs JavaScript ?

Internet Explorer pour Windows vous permet de faire fonctionner un débogueur qui affichera en pop up une nouvelle fenêtre et vous fera connaître toutes les erreurs javascript sur votre site. Ceci est disponible sous l'onglet avancé 'Options Internet'. Décochez 'Désactiver le débogueur de script'.

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

1. Le site utilise t'il CSS pour tous les aspects de présentation (polices, couleur, zones de remplissage, bordures, etc.) ?

Utilisez les feuilles de style pour contrôler la mise en page et la présentation
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-style-sheets

2. Est-ce que toutes les images décoratives sont dans la CSS, ou apparaissent t'elles dans le  (X)HTML ?

Le but pour les développeurs Web est de retirer toute présentation du code html, pour le laisser propre et sémantiquement correct.
http://www.maxdesign.com.au/presentation/benefits/index07.htm

3. Accessibilité pour utilisateurs

1. Les attributs "alt" sont-ils utilisés pour tous les descriptifs d'images ?

Fournissez un texte équivalent pour chaque élément non texte
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalent

2. Le site utilise t'il des unités relatives plutôt que des unités absolues pour la taille du texte ?

Utilisez des unités relatives plutôt que des valeurs absolues dans le langage de description des attributs et pour les valeurs de propriétés dans la feuille de style
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units

Plus :

3. L'un des composants de la mise en page se brise t'il lorsque la taille de police est augmentée ?

Essayez ce test simple. Regardez votre site Web dans un navigateur qui supporte une incrémentation facile de la taille de police. Maintenant augmentez la taille de la police. A nouveau. Encore à nouveau.... Regardez votre site. Est-ce que la mise en page se tient toujours ? Il est dangereux pour les développeurs d'assumer que quiconque utilise les valeurs par défaut du navigateur.

4. Le site utilise t'il des menus visibles faciles à outrepasser ?

Une méthode sera fournie pour permettre aux utilisateurs d'outrepasser les liens de navigation répétitifs .
http://www.section508.gov/index.cfm?FuseAction=Content&ID=12
Les liens groupés en rapport identifient le groupe (pour les agents utilisateurs), et jusqu'à ce que les agents utilisateurs le fassent, fournissent un moyen d'outrepasser le groupe.
http://www.w3.org/TR/WCAG10-TECHS/#tech-group-links
...les visiteurs malvoyants ne sont pas les seuls gênés par un trop grand nombre de liens dans une aire de navigation. Souvenez-vous qu'une personne à mobilité réduite avec une technologie pauvrement adaptée peut être très gênée à naviguer à travers ce marais.
http://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020

Plus :

5. Le site utilise t'il des formulaires accessibles ?

Les formulaires ne sont pas les choses les plus faciles à utiliser pour les personnes présentant des invalidités. Naviguer autour dans une page avec du contenu écrit est une chose, zapper entre des champs de formulaires pour y entrer de l'information en est une autre.
http://www.htmldog.com/guides/htmladvanced/forms/

Plus :

6. Le site utilise t'il des tables accessibles ?

Pour les tables (tableaux) d'information, identifier les en-têtes de ligne et colonnes... Pour des tableaux de données qui ont deux ou plus niveaux logiques d'en-têtes de ligne ou de colonnes, utilisez un marquage pour associer les cellules de données et les cellules d'en-tête.
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-table-headers

Plus :

7. Couleurs : La luminosité et les contrastes sont-ils suffisants ?

Assurez-vous que les combinaisons de couleurs utilisées pou le premier-plan et l'arrière-plan fournissent suffisamment de contraste quand elles sont visualisées par quelqu'un ayant des déficits de couleurs.
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-contrast

Plus :

8. Utilisez-vous une couleur unique pour l'information critique ?

Assurez-vous que toute l'information portée avec de la couleur est aussi disponible sans couleur, par exemple à partir du contexte ou du balisage.
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-convey

Il existe fondamentalement 3 familles de déficiences de couleurs ; Deuteranope (déficit de couleur sur le rouge/vert), Protanope (une autre forme de déficit des couleurs rouge et verte) et le Tritanope (un déficit bleu/jaune - très rare).

Plus :

9. Y'a t'il un délai de réponse pour les menus déroulants ?

Les utilisateurs handicapés moteurs peuvent trouver les menus déroulants difficiles à utiliser si le taux de réponse est réglé trop rapidement.

10. Tous liens sont t'ils décrits (pour les personnes aveugles ?)

Le fait de lier le texte devrait avoir suffisamment de sens quand on le lit hors contexte - soit tout seul soit en tant que section d'une séquence de liens. Le texte du lien devrait être aussi élégant et précis. http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-links

4. Accessibilité pour terminaux

1. Le site fonctionne t'il de façon acceptable à travers les navigateurs récents et plus anciens ?

Avant de commencer à construire un gabarit fondé sur CSS, vous devriez décider quels navigateurs vous souhaitez supporter et jusqu'à quel niveau vous avez l'intention de les supporter.
http://www.maxdesign.com.au/presentation/process/index_step01.cfm

2. Est-ce que le contenu est accessible avec la CSS déconnectée (ou non supportée) ?

Certaines personnes peuvent visiter votre site avec soit un navigateur qui ne supporte pas CSS ou navigateur qui déconnecte CSS. Si le contenu est bien structuré, cela ne posera pas de problème.

3. Est-ce que le contenu est accessible avec les images déconnectées ?

Certaines personnes naviguent sur les sites Web avec les images déconnectées - particulièrement les personnes disposant de connexions très lentes (NDT ou sur des terminaux mobiles comme les PDA où la connexion reste coûteuse). Le contenu devrait être accessible pour ces personnes.

4. Le site fonctionne t'il dans des navigateurs comme Lynx ?

Semblable à une combinaison d'images et de CSS déconnectées. Un navigateur fondé sur le texte supportera un contenu bien structuré pour fournir du sens.

Plus :

5. Le site fonctionne t'il bien quand on l'imprime ?

Vous pouvez prendre n'importe quel document  (X)HTML et le styler simplement pour l'impression, sans avoir à toucher le code.
http://www.alistapart.com/articles/goingtoprint/

Plus :

6. Le site fonctionne t'il bien avec des terminaux mobiles ?

Item difficile à tenir jusqu'à ce que le terminaux mobiles puissent supporter de manière cohérente les types de média. Cependant, certains gabarits fonctionnent bien dans les terminaux mobiles actuels. L'importance de supporter les terminaux mobiles dépendra essentiellement de votre audience-cible.

7. Est-ce que le site comprend des métadonnées détaillées ?

La métadonnée est une information compréhensible par une machine pour le Web http://www.w3.org/Metadata/

La métadonnée est de l'information structurée créée spécialement pour décrire une autre ressource. En d'autres mots, les métadonnées sont de 'l'information à propos de l'information'.

8. Le site fonctionne t'il bien dans différentes tailles de fenêtres de navigateurs ?

C'est une assertion commune chez les développeurs que de croire que les tailles moyennes des écrans augmentent. Certains développeurs assument que la taille moyenne d'un écran est désormais de 1024px en largeur. Mais qu'en est t'il des utilisateurs disposant d'écrans plus petits et des utilisateurs de terminaux mobiles ? Font-ils part de votre audience-cible ou sont t'ils désavantagés ?

5. Ergonomie Basique

1. Y'a t'il une hiérarchie visuelle claire ?

Organiser et donner priorité aux contenus d'une page en utilisant taille, proéminence et relations entre contenus
http://www.great-web-design-tips.com/web-site-design/165.html

2. Les niveaux de titres sont t'ils faciles à distinguer ?

Utilisez des éléments d'en-têtes pour porter la structure du document et utilisez-les en fonction de leurs spécifications :
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headings

3. Est-ce que la navigation du site est facile à comprendre ?

Votre système de navigation devrait donner au visiteur un indice pour savoir sur quelle page du site il est actuellement et où il peut ensuite se diriger.
http://www.1stsitefree.com/design_nav.htm

4. Est-ce que la navigation du site est cohérente ?

Si chaque page de votre site a un style de présentation cohérent, les visiteurs trouveront plus faciles de naviguer entre les pages et d'y trouver de l'information
http://www.juicystudio.com/tutorial/accessibility/navigation.asp

5. Est-ce que le site utilise un langage cohérent et approprié ?

L'utilisation d'un langage clair et simple valorise l'efficacité de la communication. Le fait d'essayer de comprendre les articulations peut être aussi difficile à lire qu'une grammaire déficiente, et ce particulièrement si la langue utilisée n'est pas la langue maternelle du visiteur.
http://www.juicystudio.com/tutorial/accessibility/clear.asp

6. Est-ce que le site dispose d'une page avec un plan du site et une page contact ? Sont-elles faciles à trouver ?

La plupart des cartes de sites échouent à vouloir porter de multiples niveaux de l'architecture du site. Dans les tests d'utilisabilité, les utilisateurs jettent souvent un oeil sur le plan du site ou ne peuvent pas le trouver. La complexité est aussi un problème : une carte devrait être une carte, pas un défi de navigation en soi-même.
http://www.useit.com/alertbox/20020106.html

7. Pour les grands sites, y'a t'il un outil de recherche ?

Alors que les outils de recherche ne sont pas nécessaires sur les petits sites, et parce que les personnes ne l'utiliseront pas, les outils de recherche spécifiques offrent aux utilisateurs un choix d'options de navigations.

8. Y'a t'il un lien vers la page d'accueil sur chaque page du site ?

Quelques utilisateurs aiment revenir en arrière vers une page d'accueil d'un site après avoir navigué dans son contenu. La page d'accueil devient le camp de base pour ces utilisateurs, leur permettant de regrouper avant d'explorer de nouveaux contenus.

9. Est-ce que les liens sont soulignés ?

Pour maximiser l'affordance perçue de la cliquabilité, coloriez et soulignez les liens texte. Les utilisateurs n'ont pas à deviner ou briquer la page pour trouver où ils peuvent cliquer.
http://www.useit.com/alertbox/20040510.html

10. Est-ce que liens visités sont clairement définis ?

Le plus important, la fait de savoir quelles pages ont déjà été visitées libère l'utilisateur de revisiter sans le vouloir les mêmes pages encore et encore.
http://www.useit.com/alertbox/20040503.html

6. Organisation du Site

1. Est-ce que le site a une page erreur 404 ayant du sens et utile qui fonctionne quel que soit le niveau de profondeur du site ?  

Vous avez demandé une page - soit en saisissant une URL directement dans la barre d'adresse ou en cliquant sur un lien erroné et vous vous retrouvez confronté à ce stade perdu au milieu du cyberespace. Un site Web bien pensé pour l'utilisateur vous tendra une main pendant que bon nombre d'autres ne feront tout simplement rien, faisant confiance dans la capacité du navigateur à expliquer quel est le problème.
http://www.alistapart.com/articles/perfect404/

2. Est-ce que le site utilise des URLs claires

La plupart des moteurs de recherche (avec quelques exceptions - pour ne pas le citer Google) n'indexeront pas les pages portant un point d'interrogation ou tout autre caractère (comme un signe & ou égal) dans l'URL... Quelle peut être la qualité d'un site si personne ne peut le trouver ?
http://www.sitepoint.com/article/search-engine-friendly-urls

Plus :

3. Est-ce que l'URL du site fonctionne sans "www"?

Même si ce point n'est pas critique et dans certains cas il n'est même simplement pas possible, il est toujours bon de donner aux personnes le choix des deux options. Si un utilisateur saisit votre nom de domaine sans le www et n'obtient pas le site, ceci pourrait porter un préjudice tant à vous qu'à l'utilisateur.

4. Est-ce que le site a une Favicon ?

Une Favicon est une image en multi résolution incluse sur presque tous les sites professionnels. La Favicon permet au webmaster de promouvoir son site et de créer une apparence personnalisée à l'intérieur du navigateur du visiteur.
http://www.favicon.com/

Les Favicons ne sont vraiment pas un item critique. Cependant, si elles sont absentes, elles peuvent provoquer des erreurs 404 dans vos logs (les statistiques du site). Les navigateurs comme IE les exigeront de la part du serveur quand un site est placé en signet. Si la favicon n'est pas disponible, une erreur 404 peut être généré. De ce fait, le fait d'avoir une favicon pourrait permettre d'éviter les erreurs spécifiques 404 de favicon. La même chose est avérée d'un fichier 'robots.txt'e.

Pour en savoir plus à propos de cette liste

Cette check-list a d'abord été pensée et publiée dans un idéateur sous forme brute sur la liste de diffusion Web Standards en Mai 2004. Elle a été présentée au Groupe Web Standards de Sydney le 5 août 2004. Elle est aussi disponible en français sous forme de check-list téléchargeable pdf pour les développeurs.

La présentation est aussi disponible en :

Un grand merci à Rose pour sa relecture professionnelle et Lea de Groot pour ses suggestions de check-list pour développeurs.

Russ Weakley
13-août-2004

Pour en savoir plus sur les Web Standards ?
Regardez Web Essentials 04.
Web Essentials 04  

XHTML 1.0 Validé CSS Validée ?

Sauf mentions contraires, tous les contenus de ce site web appartiennent à leurs auteurs et sont placés sous la licence Art Libre. Contact Christophe Ducamp

Fait avec CityDesk  Voir les statistiques de SiteMeter