Principes à suivre pour un site web de qualité : Ergonomie, Compatibilité, Accessibilité

Pour être de qualité, un site doit être à la fois Utile (répondre à un besoin) et Utilisable (par tous). Les principes universels de qualité peuvent être regroupés dans trois grandes parties, s'appliquant pour tous les sites web quel que soit leur thème (ludique, sobre, académique, artistique), leur concept (professionnel, commercial, associatif, amateur,...), leur objectif et le public visé.

1. Règles d'ergonomie
2. Standards du web
3. Normes d'accessibilité

Règles d'ergonomie

L'ergonomie est la façon de rendre un site utilisable par le plus grand nombre de personnes avec un maximum de confort et d'efficacité. Cette définition est souvent peu respectée au profit des technologies propriétaires (Flash, scripts, balises IE,...) qui rendent l'utilisation des sites souvent difficile et d'une mauvaise utilisation des principes de base en design d'IHM.

Pour analyser en profondeur l'ergonomie d'un site, il est possible de faire des audits d'accessibilité et des test utilisateurs, mais il existe des principes de bases dont voici une liste (non exhaustive) :

Objectif du site

• Afficher le nom et le logo de l'entreprise en gros et bien en vue.
• Ajouter une signature / slogan qui résume explicitement l'activité du site.
• Mettre en valeur les fonctions principales pour que la page d'accueil remplisse pleinement son rôle de point d'orientation.

Présentation des informations

• Inclure dans la page d'accueil un lien Contactez-nous qui pointe sur une page contenant toutes les coordonnées de l'entreprise.
• Si le site contient des informations sur les clients, ajouter sur la page d'accueil un lien Clause de confidentialité.

Rédaction du contenu

• Privilégier un vocabulaire centré sur les clients (pas de termes internes, trop techniques ou jargon commercial).
• Eviter les redondances, même pour souligner leur importance.
• Veiller à la cohérence de la casse (majuscules/minuscules).
• Eviter les listes à puces contenant un seul élément.
• Décrire les actions à accomplir de façon claire, employer de préférence l'impératif ("découvrez ce CD" est plus accrocheur que "vous pouvez découvrir ce CD ici" par exemple).
• Développer la première occurence de chaque abréviation et de chaque sigle.
• Eviter les points d'exclamation !
• Ne pas abuser des majuscules.

Illustration du contenu du site par des exemples

• Afficher une vignette : ne pas se contenter de décrire
• Pour chaque exemple : proposer un lien direct vers l'article et non une page générique de catégorie.
• Placer un lien vers la catégorie à côté de l'exemple.

Liens

• Différencier les liens et les rendre facilement identifiables.
• Ne pas utiliser de terme générique, comme "cliquez ici".
• Attribuer une couleur différente aux liens visités et non-visités.

Navigation

• Installer la zone de navigation principale en un point stratégique, de préférence juste à côté du contenu principal de la page.
• Regrouper les contrôles de navigation similaires.
• Si le site propose une fonction de panier, insérer sur la page d'accueil un lien vers cette fonction.
• Utiliser des icônes de navigation seulement si elles sont claires.
• Donner aux internautes un accès direct aux fonctions principales du site (technique du "zéro clic").
• Ne pas proposer d'outils qui se contentent de dupliquer des fonctions du navigateur (ajout aux favoris, en page de démarrage,...).
• Ne pas mettre en place de page "tunnel" (qu'il faut passer avant d'arriver au contenu principal).

Recherche

• Proposer sur la page d'accueil une zone de saisie des critères de recherche (d'une taille suffisante et placée en haut de page). La recherche peut également être située visuellement en dessous du menu, à condition de rester sur le premier écran. Mais dans un tel cas, il faut veiller à rajouter un point d'accès en début de page.

Images et animations

• Se servir des images avant tout pour mettre en valeur le contenu plutôt que pour décorer simplement la page.
• Ajouter une légende aux images et aux photos si le contexte ne suffit pas à les rendre explicites.
• Ajuster les images à la taille d'affichage (plutôt rogner que rapetisser pour du JPG).
• Eviter les éléments graphiques en filigrane (images en arrière-plan et texte au premier plan).
• Ne pas utiliser d'animations en page d'accueil : déconseillées parce qu'elles n'apportent pas d'information et détournent l'utilisateur du contenu véritable.
• Pas d'animation pour les éléments essentiels (logo, titre, signature): c'est souvent assimilé à de la pub.

Conception graphique

• Utiliser avec modération les différentes polices de caractère et autres enrichissements typographiques.
  Au delà de 3 polices de caractère, la lecture peut s'en trouver perturbée.
• Rendre le texte lisible (contraste suffisant avec le fond de page) et taille raisonnable. Il convient de systématiquement indiquer la couleur du texte ET la couleur de fond.
• Eviter le défilement horizontal tant que possible.
• En basse résolution : les éléments les plus importants doivent être visibles d'entrée.
• Eviter l'abondance de menus déroulants, surtout s'ils sont peu explicites.

Barre de titre

• Commencer le titre de la page par le terme le plus informatif (nom de l'entreprise).
• Ne pas mettre le nom de domaine, sauf s'il fait partie du nom de l'entreprise.
• Inclure un bref descriptif du site.
• Limiter le nombre de mots à 7 ou 8 au total.

Standards du web

Les langages du web (HTML, XHTML, XML, CSS,...) reposent sur des normes et des Standards. Les organisations de normalisation, comme le W3C, créent un consensus à travers ces groupes et ces experts pour maintenir et développer des principes architecturaux cohérents. Utiliser une norme permet la compatibilité du langage, de bénéficier des dernières innovations mais aussi de s'assurer de la pérennité des documents dans le futur.

Les normes actuelles sont HTML 4.01, XHTML 1.0, XHTML 1.1 et HTML5 (le W3C a arrêté ses travaux sur XHTML2 et les a recentrés sur HTML5), chacune de ces versions étant tout à fait utilisable à l'heure actuelle.

De ces normes découlent plusieurs avantages importants :

• Utiliser les dernières technologies standard vous assure un site web fait pour durer, tout au long de l'évolution des langages et des navigateurs
• La norme est universelle et votre site sera compatible avec tous les navigateurs respectant cette norme. Fini les codes propriétaires qui ne fonctionnent que sous certains navigateurs ou systèmes d'exploitation !
• Des coûts et du temps de maintenance réduits. en effet, la rigueur du XHTML permettent une lecture facile du code et une mise à jour très simple du design et de la mise en forme, celle-ci étant séparée du contenu.
• Un design accessible. L'accessibilité aux divers handicaps (visuels, moteurs, auditifs, ...) a été intégrée dans un nombre important de normes. Un site doit pouvoir être disponible pour des utilisateurs aux demandes toujours plus importantes (voir partie suivante)
• Allègement du code et accélération des pages avec la séparation du contenu (HTML) et de la présentation (CSS).

Le XHTML repose sur le HTML (il ne lui rajoute rien mais lui retire certaines balises et attributs) ni plus, ni moins. La grande différence du XHTML avec son jumeau HTML est que sa syntaxe ne souffre d'aucune souplesse.
Pourquoi alors avoir créé le XHTML si c'est pareil à du HTML ? Pour habituer les webdesigners à la rigidité syntaxique du XML. Mais le XHTML n'est pas uniquement destiné à servir de transition, il reste un langage à part qui suit lui-aussi des évolutions. HTML5 est reparti sur les bases de HTML avec un peu plus de souplesse et de simplicité dans la syntaxe.

La sémantique

La sémantique d'un objet, c'est son sens, ce pour quoi il est fait. Pour des questions d'Accessibilité (aux handicaps par exemple) et de maintenance , il est recommandé d'utiliser chaque balise de façon sémantiquement correcte.

Exemple imagé : Quand vous buvez une soupe, vous utilisez une cuillère à soupe. Après, si vous tombez à cours, vous pouvez toujours vous rattraper en utilisant une cuillère à café. Ca sera moins pratique mais vous arriverez quand même à boire votre soupe. Le problème, c'est qu'elle risque d'être froide avant que vous l'ayez terminée. Pour le (X)HTML, c'est pareil. Pour définir un titre, on utiilise la balise <h1>, mais on pourrait arriver au même résultat VISUEL avec un <p font-face=7><b>. Seulement, c'est plus long à écrire, cela ne signifie pas la même chose dans la structure du document, et lorsque vous aurez à changer tous vos titres, vous mettrez nettement plus de temps que si vous aviez simplement à modifier UNE feuille de style.

Dans le respect des règles, il y a non seulement l'aspect syntaxique, déjà souvent rapelé par divers sites, mais également l'aspect sémantique, trop souvent oublié. Il est tout a fait possible de faire un site rempli de tableaux pour la mise en page qui passera sans problème au validateur. Or un tableau est conçu initialement pour afficher des données... tabulaires (un forum par exemple) et non pour faire la présentation de sa page.

Feuilles de styles

L'idéal est d'abandonner toute balise de mise en forme pour n'utiliser que les les éléments porteurs de sens ( h1, p, nav, footer, etc.). Ainsi, fini les <font>, <center> et autres aberrations !
Evidemment, ces balises devront être associées à des feuilles de style pour pouvoir mettre en forme les pages.
Exemple : <div style="font-family:verdana,arial; font-weight:bold; color:red;"> ou mieux : <div class="erreur">.
Note : Les balises <div> sont des balises neutres servant de conteneurs, de blocs. Ils désignent une boite rectangulaire invisible.
Généralement, la balise <div> est assimilée au concept de "calque" (surtout sur les éditeurs html comme Dreamweaver).
Un calque est un <div> qui a été positionné avec la propriété position:absolute, position:relative ou position:fixed.
Mais rien ne nous oblige à imposer cette propriété de position, on peut souvent s'en passer en plaçant les <div> les uns par rapport aux autres grâce à la propriété margin.

Pourquoi valider le code HTML ?

Le HTML 2 date de 1994 et la version 3.2 de 1996. Elles ont évolué peu à peu vers HTML 4 et XHTML 1.x qui sont des standards du web pour ne pas aller à l'encontre des principes d'Internet (libre accès aux données, interopérabilité). Le W3C a ainsi publié plusieurs spécifications que tout un chacun se doit de respecter pour rester au maximum dans le cadre de ces standards, qui garantissent d'être compris par les navigateurs.

Faire un site aux normes, revient à prendre en compte deux points :

• Dire quelle version de HTML ou de XHTML on utilise (On doit pour cela déclarer au début du document HTML un doctype)
• Se conformer à cette norme : on peut pour cela utiliser les Validateurs du W3C, en sachant que le Validateurs ne font pas tout : un document peut être valide sans pour autant être propre sémantiquement parlant.
  Le validateur (X)HTML : http://validator.w3.org/ et http://validator.nu/
  Le validateur CSS : http://jigsaw.w3.org/css-validator/

Bien entendu, rien n'oblige un développeur à se conformer à une norme, mais cela présente plusieurs avantages : assurance que le site ne sera pas dégradé dans le futur, affichage correct sur un plus large panel de navigateurs, meilleure accessibilité...

Normes d'Accessibilité

Chaque individu est différent et internet doit être adapté à tout le monde, quel que soit son handicap (physique, auditif, visuel,...).
C'est pour cela qu'il existe également des standards et des normes d'Accessibilité du Web (WCAG)

Pour info : l'agence fédérale américaine pour le handicap considère que l'obligation d'accessibilité aux lieux publics s'applique aussi à tous les sites Web. Rappelons que la Section 508 oblige déjà les sites gouvernementaux (ainsi que ceux qui sont financés en partie par le gouvernement, dont les fournisseurs du gouvernement) à être accessible.

Un mot sur l'Accessibilité

Les handicaps affectant l'accès au web peuvent être regroupés en quatre catégories :

• Les déficiences visuelles. L'utilisateur peut être aveugle, avoir une vision très faible, ne pas reconnaître les couleurs ou tout simplement porter des verres correcteurs. Les objets graphiques qui n'ont pas d'intitulé ou de descriptif, des caractères trop petits ou des couleurs peu contrastées sont autant de barrières pour accéder à l'information.
• Les déficiences auditives. Le manque d'explications ou de transcription des éléments sonores peut priver les personnes malentendantes de certaines informations
• Les handicaps physiques. Certains utilisateurs peuvent avoir du mal à manipuler le clavier ou la souris. S'il existe des périphériques optiques ou manuels mieux adaptés, il n'en demeure pas moins que des caractères trop petits, notamment au niveau des liens, ne permettront pas à certains utilisateurs de pointer ou de sélectionner convenablement, ce qui les privera d'un accès complet au site. Il en est de même pour certains scripts ou menu qui exigent la souris et qui sont inutilisables pour cette catégorie de personnes.
• Les déficiences mentales ou neurologiques. Le manque de repères clairs et précis ainsi qu'un système de navigation non intuitif peuvent troubler de nombreux utilisateurs. L'utilisation excessive de certains jargons dans des sites grand public peut fortement réduire l'intérêt ou la compréhension. L'abus d'effets visuels de type clignotement ou d'animations dont la fréquence est trop élevée peut avoir de sérieuses conséquences sur des sujets sensibles ou épileptiques.

On estime que de 10 à 20% des individus présentent telle ou telle déficience dans la plupart des pays dits développés. Certaines de ces déficiences ne sont pas un obstacle pour accéder au web, mais n'oublions pas que nous serons tous plus ou moins affectés un jour ou l'autre par le vieillissement.

Le W3C a donc lancé une Initiative pour l'Accessibilité au Web (WAI) en 1997 qui se donne pour objectif de s'assurer que les nouvelles technologies prennent en charge les questions d'accessibilité.

C'est dans cette optique qu'à été créé le WCAG (Web Content Authoring Guidelines).
Il s'agit de 14 directives qui décrivent les principes généraux du concept d'Accessibilité.
Des points spécifiques sont proposés pour chacune des directives et donnent des applications pratiques pour chaque principe.
Ces points de contrôle ont trois niveaux de priorité :

• niveau 1 : le point DOIT être satisfait
• niveau 2 : le point DEVRAIT être satisfait
• niveau 3 : le point POURRAIT être satisfait

La conformité à ces trois niveaux est codée de la manière suivante :

• "A" lorsqu'un site répond à toutes les exigences d'un point de contrôle
• "AA" lorsque le site répond à deux points de contrôle.
• "AAA" lorsque le site répond à toutes les exigences.

A l'heure actuelle la plupart des sites internet, même professionnels ou soi-disant Grand Public, ne sont pas accessibles au handicaps. C'est pourtant la moindre des choses à faire, surtout lorsque ça ne nécessite pas de gros travail pour le mettre en oeuvre. Dans la vie "réelle", les choses bougent petit à petit pour les handicapés : places de parking, accès reservés, toilettes, accès spéciaux aux lieux publics... La prise en compte du handicap est devenu une évidence dans tous les cahiers des charges des travaux publics ou en architecture.

Pourquoi le web devrait-il laisser cette population à l'écart ? La proportion de sites institutionnels ou gouvernementaux qui ne respectent ni les Standards ni l'Accessibilité est considérable.