, De ces petites choses qui changent tout...
StéphaneLes cordonniers n’étant pas toujours les mieux chaussés, nous autres de pompage.net avions une page d’accueil dans laquelle les liens manquaient fort de clarté. Nous l’allons montrer à l’instant, et en profiter pour vous expliquer ce que nous avons amélioré. On ne recule devant rien.
Les cordonniers n’étant pas toujours les mieux chaussés, nous autres de pompage.net avions une page d’accueil dans laquelle les liens manquaient fort de clarté.
L’état initial : bouh les cornes !
Dans une synthèse vocale, la lecture cursive que nous avons naturellement avec les yeux est remplacée par quelques combinaisons de touches, qui permettent de lister, par exemple, tous les titres d’une page1, ou tous les liens2. C’est ce dernier cas qui nous intéresse ici.
Sur le site de pompage.net, pour bien faire du point de vue du design, il y avait des liens « Lire l’article », et la feuille de style permettait d’afficher un petit pictogramme représentant une flèche tournée vers la droite, ce qui est bel et bon pour un utilisateur valide : tout d’abord les liens étaient clairement identifiés, étaient explicites (je veux dire qu’on comprenait bien à quoi ils servaient, dans un contexte normal), et le pictogramme rendait la zone cliquable plus importante, ce qui n’est jamais mauvais d’un point de vue ergonomique.
Tous ces liens comportaient un title, ce qui est Une Bonne Chose... Sauf que Fangs (un émulateur de synthèse vocale pour Firefox) me restituait quelque chose comme ça :
- « Lire l’article »
- « Lire l’article »
- « Et aussi... »
- « Vers l’article »
- « Vers l’article »
- « Et aussi... »
Vous en conviendrez, ça manquait de clarté. Certaines synthèses vocales (JAWS notamment) peuvent être réglées pour lire le title plutôt que le texte du lien si le premier est plus long que le deuxième. Seulement je ne connais pas vos réglages, donc je ne peux pas préjuger que c’est ce que vous verrez : partant du principe que qui peut le plus peut le moins, et si nous mettions un lien directement sur le titre de l’article ?
La réparation : merci pompage !
Dans l’ordre, voilà ce que nous avons fait :
- Transformer le texte du titre en lien (facile, hein ?).
- Changer la feuille de style pour ne pas défigurer la page d’accueil (quand même).
Vous allez me dire, oui mais alors nous n’allons pas voir la différence, nous qui avons deux yeux ?
Hé bien si, tabulez de lien en lien dans la page ou passez votre souris sur un titre, et hop, magie... vous verrez un soulignement, et le texte devient plus contrasté (il passe de gris sombre à noir).
Ainsi le graphisme est sorti indemne, l’ergonomie a gagné, la « clicabilité »3 de la page aussi : au lieu d’un lien possible par article, en voilà deux ! On répond là à des usages différents : des utilisateurs novices ont tendance à chercher des liens « cliquez ici »4 ou « lire la suite », alors que des utilisateurs avancés (notamment rôdés à la lecture de blogs) iront chercher un lien sur le titre lui-même.
Et pour nos camarades aveugles et malvoyants, me demanderez-vous ? Car après tout mon premier souci venait d’eux, rappelons-nous.
Là encore notre problème est résolu, même si l’idéal n’est pas de ce monde. Une liste de liens sans réglages donnera :
- « Tables Vs. CSS - Un combat à mort »
- « Lire l’article »
- « CSS : on reprend tout à zéro ! (10ème épisode) »
- « Lire l’article »
- et ainsi de suite
Une synthèse vocale qui lira les titles plutôt que les liens, malheureusement, aura un petit effet de bégaiement pas forcément très heureux :
- « Tables Vs. CSS - Un combat à mort »
- « Tables Vs. CSS - Un combat à mort »
- « CSS : on reprend tout à zéro ! (10ème épisode) »
- « CSS : on reprend tout à zéro ! (10ème épisode) »
- et ainsi de suite
Mais que voulez-vous, je viens de le dire : l’idéal n’est pas de ce monde.
1. Nous cherchons de la structure dans une page, et le HTML fournit justement des balises de structure, les h1, h2 et consorts. C’est ce qu’une synthèse vocale identifie comme des titres, et vous me direz que ça tombe bien, puisque ce sont justement des balises de titres.
2. Autre forme de lecture cursive dans la page : l’oeil recherche ce qui correspond à un lien, surtout dans une page d’accueil, pour accéder le plus rapidement possible au contenu caché derrière.
3. Oui, « clicabilité ». Ça vous plaît ? Tenez, je vous en offre tout un paquet : clicabilité, clicabilité, clicabilité.
4. Ne riez pas, une enquête très sérieuse dont j’ai perdu les références indique que quand les gens lisent « cliquez ici », ils ont une tendance plus marquée à cliquer. L’injonction fonctionne. C’est terrible, je sais bien, allez...
