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 CSS, accessible, utilisable, et convivial pour les moteurs de recherche.
Ce n'est pas une super liste. 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é :
"alt" est-il utilisé pour toutes les images descriptives ?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 :
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 :
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 :
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 :
À 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 :
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/
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 :
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 :
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/
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'.
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
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
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
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 :
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.
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&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 :
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 :
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 :
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 :
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 :
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.
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
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
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.
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.
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 :
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 :
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.
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 ».
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?
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
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
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
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
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
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
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.
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.
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
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
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/
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 :
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.
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 lignes sur la liste de diffusion Web Standards en mai 2004. Elle a été présentée au Web Standards Group de Sidney le 5 août 2004. Elle est aussi disponible en format PDF pour les développeurs (anglais seulement).
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.