• Accueil
  • > Non classé
  • > De l’exploration au surf, ou de l’esthétique du web pour un aveugle

De l’exploration au surf, ou de l’esthétique du web pour un aveugle

L’une des questions les plus fréquentes qui surgit lorsque je fais des présentations ou des sessions de sensibilisation est : « comment faites-vous lorsque vous arrivez sur un site web que vous ne connaissez pas ? » Curieusement, je suis souvent pris au dépourvu pour décrire avec précision ce processus que j’opère pourtant quotidiennement, mais tellement naturellement que je ne m’interroge plus sur la manière dont je procède. C’est un peu comme de demander à un voyant de décomposer chacun de ses gestes lorsqu’il conduit, depuis l’instant où il monte dans sa voiture jusqu’à ce qu’il coupe le contact. C’est néanmoins ce que je vais tenter de faire. Alors, embarquement immédiat quai de la lecture linéaire et de la représentation en puzzle. Et vous verrez que, même lus par une synthèse vocale ou transcrits sur un afficheur Braille, il peut y avoir des sites moches, rebutants, âpres, et d’autres très agréables, plaisants, confortables. Oui, même quand on ne voit pas, il y a une esthétique du web.

Construction de la représentation

Voyons tout d’abord la différence fondamentale entre la manière dont une personne qui voit, même très peu, et celle qui ne voit pas appréhende une page web pour la première fois. Lorsqu’on a une perception visuelle, même faible, à l’ouverture d’une page, on a immédiatement une vision d’ensemble de son aspect esthétique. Les couleurs, la police, les blocs les plus importants sautent aux yeux. Ensuite, le cerveau analyse l’organisation de la page en opérant une sorte de hiérarchisation en fonction de la taille, la position ou les contrastes entre les différentes zones. Les éléments animés attirent également le regard. Puis, selon que l’on sait ce que l’on recherche ou pas, l’œil parcourt de façon plus ou moins rapide le contenu. Lorsqu’on est aveugle, le fait même d’avoir à écouter l’information ou à la lire sur un afficheur Braille qui comporte au maximum 80 caractères, oblige à une découverte séquentielle, ligne par ligne, élément par élément, bloc par bloc. Il n’existe encore pas sur le marché de surface tactile permettant de restituer le relief, ne serait-ce que de 2 ou 3 lignes d’une page web. Ce qui serait l’équivalent d’un écran en relief. Partant de là, je distingue trois situations qui vont donner lieu à autant de stratégies d’appropriation du contenu, car il s’agit bien de cela.

Situation 1 : terra incgnita

Dans la première situation, je ne sais pas exactement ce que je recherche sur le site, je n’ai même aucune idée des rubriques qu’il propose. Tout au plus sais-je en gros de quoi il parle. C’est par exemple un ami qui m’a parlé de ce site de cuisine qu’il aime bien et qu’il me suggère d’aller visiter. Compte tenu du sujet, j’imagine aisément un classement par type de plat, un moteur de recherche, et pourquoi pas, la recette du jour affichée en page d’accueil. La majorité des lecteurs d’écran vont par défaut lire automatiquement le contenu d’une page dès son ouverture, d’un bout à l’autre. Beaucoup d’utilisateurs, surtout lorsqu’ils débutent avec Internet ont tendance à laisser la synthèse vocale débiter son galimatias, avec quantité d’informations complémentaires. Pour ma part, je préfère passer manuellement de ligne en ligne à l’aide des flèches bas et haut, un doigt sur l’afficheur Braille, au cas où il y aurait un mot que je n’aurais pas compris, soit parce qu’il est mal écrit (absence de lettre accentuée, de changement de langue), soit parce qu’il est mal prononcé. Ainsi, je commence à me faire une idée de l’organisation de la page puisque la voix de synthèse énonce, pour chaque élément html rencontré, son type et les informations afférentes. Par exemple, s’’il s’agit d’un lien, elle annoncera « lien » suivi de l’intitulé du lien. Donc inutile d’ajouter le mot « lien » dans vos intitulés, de surcroît si le texte du lien est « liens utiles ». A la voix on entendra « lien lien liens utiles ». Ca confine au radotage. De même, devant un début de liste, ordonnée ou non, j’entendrai « liste de x éléments » ; x étant le nombre d’éléments contenus dans cette liste. Pour chaque élément de titrage, j’entendrai « titre de niveau n », suivi du texte qui compose ce titre. De cette façon, je vais commencer à identifier les diverses parties de la page, à ébaucher une représentation mais qui sera radicalement différente de celle que se fera un voyant.
D’une part, il s’agit d’une représentation que je qualifierais de verticale, ou à une dimension, ou encore, empilée, au sens où le lecteur d’écran lit les éléments dans l’ordre dans lequel ils apparaissent dans le code source de la page. D’ailleurs, je n’utilise que les flèches bas et haut pour la parcourir. Ce qui renforce encore cette construction mentale par empilement. Certes, Jaws propose par exemple un mode nommé « représentation comme à l’écran ». Personnellement, s’il m’est extrêmement utile en tant qu’expert en accessibilité lors des audits, il ne m’est pas d’une grande aide en tant qu’utilisateur. D’autre part, les trois lecteurs d’écran que je connais le mieux, c’est-à-dire Jaws, VoiceOver et NVDA n’annoncent pas l’entrée et la sortie d’une balise div, span, et même table lorsque celle-ci n’est pas codée comme un tableau de données. D’où, l’importance d’utiliser les marqueurs de zone (landmarks) de >ARIA. Par conséquent, les blocs ou les zones de page ne sont repérables que par les listes, les titres les paragraphes et, dans une moindre mesure, les champs de formulaire.
Ci-dessous, une comparaison entre une page restituée par Jaws et sa capture d’écran à partir de la page d’accueil du site www.lucernaire.fr (passer l’intro en Flash).


Capture de la page d’acccueil Extrait du code source
Page d'accueil du théâtre du Lucernaire Le Lucernaire – Accueilsearch
Rechercher…
OKimg/menu_2
img/menu_3
img/menu_4
img/menu_5
img/menu_6
img/menu_7Accueil

> Accueil

> Le lucernaire

> Infos pratiques

> Espace pro

> Bar / Restaurant

> Calendrier

Retrouvez toutes les activités du Lucernaire le jour de votre choix

Tableau: 7 colonnes et 7 lignes.
<>
Lu
Ma
Me
Je
Ve
Sa
Di

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31
Fin du tableau.

> Newsletter

> RSS

Samedi 9 juin

1332518813_affiche scvb_300.jpg
Dédicace de JC Grumberg
à la librairie du Lucernaire après la représentation de Si ça va bravo

Réservez vos places pour le soir

Infos pratiques

Théâtre
Réservations 01 45 44 57 34
ou sur notre site Internet

Le restaurant et le bar
Réservations: 01 45 48 91 10


Notez que c’est un exercice très instructif que vous pouvez faire vous-mêmes en installant la version de démonstration de Jaws. Puis, après avoir ouvert une page, appuyez sur la touche ctrl pour faire taire la voix. Faites ctrl+A pour sélectionner le tout, puis un copier/coller dans votre éditeur de texte préféré.
J’ai dit précédemment qu’à la première lecture, j’avais une ébauche de représentation. En effet, bien que je le devine par expérience, je ne sais pas précisément où se situe la partie « contenu ». Ce n’est qu’en validant sur ce que je suppose être les liens du menu principal que je vais comprendre l’articulation entre ce qui est permanent et ce qui change, au prix d’un nouveau parcours de bout en bout. A moins bien sûr que je n’aie déjà repéré une structure claire à l’aide de titres et de marqueurs de section. Si ceux-ci n’existent pas ou sont utilisés à mauvais escient, je vais devoir trouver d’autres repères par moi-même et les mémoriser. Cela peut être, par exemple, le contenu semble changer juste après tel fin de liste ou tel champ de formulaire. Encore me faudra-t-il le confirmer par plusieurs essais. Ce qui souligne l’importance d’une bonne structuration. Sans quoi je dois procéder par hypothèses / expérimentations / déductions successives. Ce qui rend l’exploration pénible et dégrade l’expérience utilisateur.
Ensuite, à force de parcourir la page, je me familiarise avec et peux afficher la liste des liens pour trouver rapidement ce que je cherche. Si ces liens sont correctement nommés, je peux taper les premières lettres pour en isoler un de la liste et valider dessus. J’aime aussi me servir du moteur de recherche, en particulier lorsqu’il s’agit d’un site d’achat de livre, de matériel informatique ou de courses alimentaires. Si celui-ci est performant, c’est souvent bien plus rapide que de fouiller dans l’arborescence parfois complexe sur ce type de sites.

Situation 2 : vers un cap précis

La deuxième situation suppose que je sais ce que je cherche. Là, je me préoccupe moins de la structure de la page et, soit j’affiche la liste des liens en espérant qu’ils aient un intitulé explicite, soit je vais directement dans le moteur de recherche en cherchant un champ d’édition. Ce n’est que dans un second temps, en lisant la page des résultats et en passant commande que je vais parcourir la page pour être sûr de ne louper aucune étape et de ne pas me tromper. Mais là encore, je ne m’attarde pas nécessairement à comprendre la manière dont est organisée la page. Sauf éventuellement si je rencontre des difficultés dans mon processus de commande. Par exemple, s’il faut cocher des cases et qu’il n’y a pas de balise label reliant la case à son intitulé, je dois d’abord comprendre si la case correspondante se situe avant ou après l’étiquette de l’élément à cocher. Ou encore, s’il faut entrer une adresse de facturation et une adresse de livraison et que le formulaire est conçu de telle sorte qu’il est difficile de comprendre à quoi se rapporte tel champ.

Situation 3 : en terrain conquis

Dans la troisième situation, je connais déjà le site, ou alors celui-ci est tellement simple qu’il est immédiatement intelligible. Là, je me sers des listes de liens, de titres et autres champs de formulaire que j’ai mémorisés. J’enclenche quasiment le pilote automatique. Je n’explore plus, je surfe. Pour moi, un très bon de page bien faite et qui glisse toute seule est le formulaire d’enlèvement des encombrants de la ville de Paris clair logique et simplissime.

Une esthétique vocale du web

Parmi les facteurs qui qualifient une expérience utilisateur vis-à-vis d’un site web, il y a le ressenti face à son esthétique. Si cette notion est évidente visuellement, quoique subjective, sachez qu’elle existe aussi à l’écoute ou à la lecture en Braille. Visuellement, nous n’aimons pas ce qui déborde, ne serait-ce que d’un pixel, nous n’aimons pas les tâches, nous n’aimons pas ce qui pollue et ralentit la lecture comme un espace trop grand entre les mots, une ponctuation mal placée, ou des éléments redondants. Et bien c’est la même chose lorsqu’on écoute une page. Les liens sans intitulé ou avec des intitulés bizarres comme « # » ou « img/picto_vert », les images sans alternative textuelle, ou celles avec une alternative du genre « spacer », les listes vides, les éléments qui ne se voient pas à l’écran mais sont présents dans le code et détectés par le lecteur d’écran et sans utilité pour la page présente, sont autant de fioritures qui parasitent la lecture donc la compréhension, donc la mémorisation et au final, laissent une désagréable impression de pas fini, de pas propre, voire de j’m’en-foutisme. Et je ne parle pas des balisent mal fermées qui peuvent mettre un bazar monstrueux. Reprenons le comparatif présenté plus haut. On voit :

  • Dès le début de code un intitulé de champ « search ». A la synthèse vocale on entend « sirche ». Est-ce si difficile d’écrire « Recherche »?
  • Plusieurs images-liens sans alternative qui semblent pourtant former le menu principal.
  • Ensuite, de nombreux liens commencent par le signe supérieur <, ce qui rend impossible la sélection par les première lettres.
  • Tout au long de la page, on rencontre des images sans texte alternatif comme 1332518813_affiche scvb_300.jpg.
  • Les doubles chevrons permettant de choisir un mois dans le calendrier ne sont pas des liens explicites

Ce sont pour beaucoup, de petits détails. Mais pourquoi accorde-t-on parfois plusieurs jours/homme à fignoler les détails visuels et ne prend-on pas le même soin, ne serait-ce qu’à passer un coup de validateur de code ou vérifier si les images ont une alternative ? La qualité du code n’est seulement utile pour l’accessibilité. Elle facilite la maintenance, le référencement et, notion ringarde aujourd’hui, mais j’assume, la satisfaction du bel ouvrage. J’irais même plus loin. De manière générale, nous aimons des pages claires, dont on distingue très bien chaque zone, sur lesquelles on trouve rapidement ce que l’on cherche. Il en en va de même quand on ne voit pas. Je dirais même que c’est encore plus crucial compte tenu du temps que l’on perd déjà à cause de cette représentation linéaire et morcelée que nous avons de la page. Il est donc capital de prêter autant d’attention à la structuration et à la logique du contenu disposé linéairement qu’à sa structure et sa logique visuelle. Quoi de plus pénible, par exemple, que de valider sur un lien et d’avoir à aller chercher quelque part en fin de page le résultat de ce clic ! C’est exactement ce qui se passe quand on souhaite retweetter sur Twitter. Comme un voyant se forge rapidement une idée, une impression générale d’une page dès les premières secondes de découverte, un aveugle le fait en l’écoutant ou en la lisant en Braille.
J’espère que cette explication, bien qu’un peu technique, vous a fait sentir la différence de perception qu’un aveugle peut avoir d’une page web. J’espère aussi avoir pu vous convaincre qu’il existe une esthétique vocale, un sens du propre, voire du beau, même quand on ne voit pas.

Mots-clefs : , , ,

2 Réponses à “De l’exploration au surf, ou de l’esthétique du web pour un aveugle”

  1. Wilfried dit :

    Billet passionnant. je suis moi-même aveugle et aurait été incapable d’exprimer cela avec autant de précision.
    Je me suis permi de recommander ton billet à Xavier Delaporte; journaliste et producteur de l’émission « Place de la toile » sur France Culture.
    Je pense qu’un billet de cette qualité te devrait de participer à cette émission. Je le souhaite vivement en tout cas car tes explications sont bien plus précises et abouties que les conneries qui sont dites par les reportages sur les ordinateurs des aveugles et autres fadèse.
    Donc ne m’en veut pas si Xavier Delaporte où un de ces collaborateurs te contactait.
    Et pour le reste, félicitation pour ce blog qui est super bien écrit et qui mêle expérience perso, humour et un vrai sens pédagogique. Bravo encore Tanguy.

    • tanguyreve dit :

      Bonjour et merci. J’écoute souvent Place de la Toile, mais je ne sais pas si j’y ai vraiment ma place compte tenu du haut niveau des intervenants.

Laisser un commentaire