|
Que l'on parle d'accessibilité,
d'ergonomie ou d'utilisabilité, le fait de rendre un site plus
facile à naviguer est souvent associé à:
- l'idée d'adapter son site à un public particulier
(les non-voyants, notamment). Ce n'est pas toujours le cas :
tout comme revoir la structure d'un site par rapport aux méthodes
Google peut tout autant bénéficier aux méthodes
des autres moteurs de recherche, rendre son site plus accessible peut
profiter à tous les visiteurs.
- la croyance que tout ne passe que par le design du site : emplacement
logique des boutons et formulaires, choix des couleurs... Certes,
mais pas seulement : un peu de programmation très simple permet
aussi de faire de grands pas en avant. C'est ce que nous allons voir
ici. Certains vous sembleront évidents (et tant mieux), nous
espérons que les autres vous seront utiles... La plupart requièrent
néanmoins des navigateurs modernes.
Notez que généralement, "accessibilité"
décrit la partie de l'utilisabilité dédiée
aux personnes souffrant de déficiences...
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.
|