nota-bene.org > Sur le web > Rendons plus accessible la page d’accueil de pompage.net

Rendons plus accessible la page d’accueil de pompage.net

À propos de cet article

Un article de Stéphane

Publié le 8 décembre 2005

URL courte : http://nota-bene.org/76

5 commentaires

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é. 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 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 :

  1. Transformer le texte du titre en lien (facile, hein ?).
  2. 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).

Et hop, ni vu ni connu...

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.


Notes

[1Nous 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.

[2Autre 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.

[3Oui, « clicabilité ». Ça vous plaît ? Tenez, je vous en offre tout un paquet : clicabilité, clicabilité, clicabilité.

[4Ne 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...


Commentaires

    • 9 décembre 2005

    Hello,

    C’est drôle, je viens de m’occuper de ce même problème avec le blog Alsa, car Dotclear à la base n’affiche que des "lire la suite"... et c’est mal ! clin d'œil

    J’y suis allé à la manière forte : le lien est devenu : "lire *titre de l’article*".
    Au-moins on est sûr que, title ou non, ce sera accessible.

    Par contre, pour les non-spécialistes en PHP, c’est pas de la tarte, il faut modifier complètement une partie de fonctions.php
    (peut-être que la prochaine version de DC s’en chargera ?)

    Blog Alsacréations

    Répondre à Raphael

    • 9 décembre 2005
    • en réponse à Raphael

    Dotclear à la base n’affiche que des "lire la suite"...

    Tiens c’est rigolo, ces coïncidences. Il faudra qu’on en parle à Sam, à l’occasion.... sourire

    Répondre à Stéphane

    • 9 décembre 2005
    • en réponse à Raphael

    Par contre, pour les non-spécialistes en PHP, c’est pas de la tarte, il faut modifier complètement une partie de fonctions.php (peut-être que la prochaine version de DC s’en chargera ?)

    C’est exactement pour ça que j’aime SPIP. Ce n’est pas que je rechigne à faire du PHP (par exemple pour le système de gestion des contacts de pompage), mais je trouve tellement plus simple de manipuler directement du langage de modèle (ce qu’en spipien on appelle les « squelettes »). Voir, pour s’en convaincre, le squelette de sommaire.html de pompage.

    Répondre à Stéphane

    • 20 décembre 2005

    Du coup il y a deux fois plus d’éléments dans la liste de liens, pas franchement une amélioration pour les utilisateurs de synthèse vocale, d’après moi...

    C’est pour ça que, pour ma part, je conserve uniquement le lien sur le titre, tout le monde navigue de la même façon.

    J’allais dire qu’il n’y a que ça comme lien, et donc pas moyen de le louper, mais à la réflexion, il y a aussi un lien vers les commentaires, va falloir que j’y réfléchisse...

    Répondre à Nicolas Hoizey

  • il y a deux fois plus d’éléments dans la liste de liens, pas franchement une amélioration pour les utilisateurs de synthèse vocale, d’après moi...

    Oui mais on n’est jamais sûr que ce soit le title qui sera lu... Dans le cas où ce n’est pas le cas, on lira :

    1. titre de l’article
    2. lire la suite
    3. titre de l’article 2
    4. lire la suite

    Et là, dans le contexte les « lire la suite » se comprennent même hors de toute information topographique.

    Mais je suis d’accord avec toi, ce n’est pas idéal.

    C’est pour ça que, pour ma part, je conserve uniquement le lien sur le titre, tout le monde navigue de la même façon.

    Malheureusement un site destiné aux profanes doit aussi penser à eux, et on sait, comme je le disais, que l’utilisateur « naïf » clique plus facilement sur un lien « lire la suite » ou « cliquez ici ». Or sur pomapge.net on vise les profanes.

    On va vivre avec ça quelque temps, on verra sourire

    PS : ceci dit, tu as quand même assez raison... Si les liens dans les titres étaient très explicitement affichés comme des liens, la redondance ne serait pas aussi nécessaire. Mais je ne voulais pas non plus rompre la charte qui a un an et est bien établie...

    Répondre à Stéphane

Qui êtes-vous ?
Votre message
  • Pour créer des paragraphes, laissez simplement des lignes vides. Tous les liens sortants comporteront un attribut rel="nofollow". Merci de ne pas spammer.

Ceci est la version Bureau Afficher la version Mobile