Discutez en sur les forums

1) Une feuille de style par média
Notre récent article "Utiliser une feuille de style spécifique à l'impression" nous a permit d'aborder le sujet des médias au sein de la spécification CSS-2. De nombreux sites majeurs ont compris que la bonne utilisation des feuilles de style était préférable à des sites lourds en tableaux HTML (quelques exemples), mais tous ne leur associent pas de CSS par média. Il est pourtant simple de rendre son site plus facile à imprimer, à lire sur un PDA, à lire en braille etc., avec seulement quelques lignes de CSS en plus.

2) Faire usage des "access keys"
Méconnues car rarement utilisées, et le plus souvent sans que le visiteur le sache, les "touches d'accès" permettent cependant à ce dernier de naviguer de manière très rapide entre les différentes sections d'un site. Pour le webmaster, leur mise en place nécessite un minimum d'effort :

<a href="index.cfm" accesskey="1">Accueil</a>
<a href="index.cfm" accesskey="2">Actualités</a>
<a href="index.cfm" accesskey="3">Articles</a>
<a href="index.cfm" accesskey="4">A propos</a>

Ainsi, les visiteurs utilisant un navigateur reconnaissant les accesskeys (c'est-à-dire, la plupart des navigateurs modernes) pourront dans cet exemple naviguer parmi les pages principales du site en faisant Alt-1/2/3/4 (ou Alt-Shift et les chiffres du haut du clavier, non ceux du pavé numérique). Les lecteurs des non-voyants mentionnent d'ailleurs ces accesskeys lors de la lecture d'une page.

Problème : comment tenir le visiteur au courant de leur existence sans mettre un rappel sur chaque page ? La solution est de travailler comme pour les applications Windows : marquer la lettre qui correspond à l'accesskey (dans le cas d'accesskey en chiffres, il faudra indiquer le chiffre...) :

<a href="index.cfm" accesskey="a"><em>A</em>ccueil</a>
<a href="index.cfm" accesskey="p"><em>P</em>roduits</a>
<a href="index.cfm" accesskey="e"><em>E</em>quipe</a>
<a href="index.cfm" accesskey="r"><em>R</em>ecrutement</a>
<a href="index.cfm" accesskey="s">Notre <em>S</em>ociété</a>

3) Indiquer la signification des acronymes
HTML regorge de petites balises qui sont loin d'être aussi inutiles que <blink>. <acronym> est l'une d'entre elles : elle permet de taper une acronyme et sa signification, et de n'avoir la signification ne s'afficher que pour ceux qui le souhaitent, via un survol de la souris.
Exemples : CSS, HTML et JDNetDev. Si lorsque vous passer la souris sur l'un de ces acronymes, leur signification apparaît, c'est que votre navigateur reconnaît cette balise.

<acronym title="Cascading Style Sheet">CSS</acronym>
<acronym title="HyperText Markup Language">HTML</acronym>
<acronym title="Journal du Net Développeurs">JDNetDev</acronym>

Les lecteurs des non-voyants utilisent cette balise à bon escient, tout comme les moteurs de recherche, qui enregistreront donc votre page avec les deux versions du terme...

4) Indexer le champ des formulaires
Les utilisateurs ont pris l'habitude d'utiliser la touche Tab pour passer d'un champ à l'autre. Pour les longs formulaires avec des champs côte à côte, il est préférable de préciser l'ordre de passage, grâce à l'attribut tabindex... Voici un exemple extrême :

<input type="text" name="t1" tabindex="1" value="Un" size="10">
<input type="button" name="rien" tabindex="4" value="Quatre">
<input type="text" name="t3" tabindex="3" value="Trois" size="10">
<input type="text" name="t2" tabindex="2" value="Deux" size="10">

5) Prendre soin de ses liens
Le lien est la base de l'Internet : il permet de relier les sites entre eux et les informations entre elles, plutôt que de garder chacun dans sa tour d'ivoire. Prendre soin des liens d'un site ne signifie pas d'en mettre autant que possible, mais de les y mettre de la manière la plus pratique possible. Pour cela, plusieurs choses:

- évitez de mettre les liens sur des éléments graphiques : tant pour les non-voyants que les moteurs de recherche, ces liens sont peu pratiques.

- mettez vos liens sur les bons mots : préférez "Lisez notre article sur la reproduction des loutres" plutôt que "Cliquez ici pour lire notre article sur la reproduction des loutres", voire pire, "Lisez notre article sur la reproduction des loutres ici".

Le lien étant le plus souvent souligné, le regard est d'abord attiré par ce soulignement (comme vous pouvez le constater avec la phrase précédente) : le message du lien doit donc transparaître dans son texte.
Dans le deuxième cas, le regard est attiré par "cliquez ici" avant tout. Le lien perd de son importance s'il est mis à l'opposé du texte qui le caractérise. Par ailleurs, plusieurs liens "cliquez ici" les uns à la suite des autres perdent d'autant plus de sens au regard du visiteur. Les moteurs de recherche font de leur coté grand usage du texte des liens : faites une recherche sur "click here" dans Google pour vous en convaincre...
Le troisième cas combine le problème du deuxième avec un souci majeur : le texte est trop petit, le clic doit être précis sur le lien. A éviter.

- évitez d'activer vos liens via JavaScript. De nombreux utilisateurs le coupent dans l'espoir de voir disparaître les publicités en popup, et votre lien devient inutile pour les moteurs de recherche.

Le sujet de l'utilisabilité est vaste, nous aurons l'occasion d'y revenir lors d'un prochain article.