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 page [1], ou tous les liens [2]. 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.
