4. Hiérarchiser l'information
a. Ordre de l'information
Quand on conçoit pour les personnes déficientes visuelles, il est recommandé de débuter par l'UX Writing, plutôt que de commencer par une étape de zoning. En effet la hiérarchie de l'information ne sera pas visuelle mais auditive : les informations seront lues dans l'ordre peu importe l'importance accordée par le graphisme aux éléments.
Un fil d'ariane gênant
En ergonomie, il est recommandé d'afficher un fil d'ariane en haut de page. Or sur le Portail de l'audiodescription, les tests utilisateurs ont révélé qu'il pouvait créer de la confusion chez les personnes déficientes visuelles peu à l'aise avec le numérique.
« C’est pas la peine d’avoir les deux. C’est confusant en fait. L’idée d’avoir les 2 listes d’onglets, c’est plus perturbant qu’autre chose. »
A l'oreille, les accès rapides, les éléments cliquables de l'en-tête, la navigation principale et le fil d'ariane cumulent des entrées cliquables, parfois redondantes (recherche, accueil).
La profondeur du site n'excédant jamais 3 pages, il va donc être testé de le remplacer par un bouton "revenir à l'accueil" ou "revenir à la liste des films".
Pour aller plus loin :
- How to document the screen reader user experience (en anglais) - Github BBC
b. Niveaux de titres
On peut donc commencer son travail d'UX par écrire tout le contenu de la page et le hiérarchiser par des titres bien structurés. On entend notamment par là :
- pas de titre manquant : toute section de la page porte un titre.
- pas de saut de titre : on ne passe pas d'un titre de niveau 2 à un titre de niveau 4
Titre manquant dans la page
Il est fréquent que le design de la page indique un changement de section uniquement par une alternance de couleur de fond ou une image décorative pleine largeur servant de séparateur par exemple.
Or ce sont des éléments qui ne seront pas lus par le lecteur d'écran et seront sautés par la navigation par titre.
Un plugin pour vous aider
Le plugin HeadingsMap vous permet en un clic de visualiser la hiérarchie des titres de la page.
Idée 💡: Une fois votre page construite en traitement de texte, vous pouvez la lire à voix haute à un ou une collègue qui sans voir, pourra vous donner un premier retour sur l'intelligibilité de votre structure.
L'ordre primordial des éléments sur la page met en avant le fait que les bandeaux d'information doivent se situer sous la navigation et non au-dessus de l'en-tête.
« Le site s’appelle Version Beta ? Le nom du site n’est pas en haut à gauche. Version beta, je sais pas ce que ça veut dire. »
c. Formulation des titres
Titre de page
Il est important que toute page ait un titre : c'est la première chose qui sera lue par le lecteur d'écran à l'arrivée sur une nouvelle page. Ce titre doit être explicite et distinct des autres pages du site.
« Une page qui n’a pas de titre 1 c’est l’enfer. On ne sait pas. »
Contrairement à ce à quoi on pourrait s'attendre, et bien que ce soit une bonne pratique de qualité web ancienne, ce n'est pas si systématique, à tel point que nombreux sont les utilisateurs en test s'exclamant d'en trouver un :
« Déjà ce que je trouve bien c’est que la page porte un titre ! »
Page web sans titre
La page de désinscription à l'infolettre ajoutée automatiquement par Brevo à toute campagne envoyée via cette solution n'a aucun titre dans la page, comme le montre ici le plugin Wave.
A noter que le Portail de l'audiodescription a par conséquent codé sa propre page de désinscription accessible.
Attention aux verbes d'action
Il est recommandé de ne pas commencer un titre par un verbe d'action si cela peut laisser penser que c'est un élément cliquable. Limiter l'usage des verbes d'action comme "voir, lire, afficher, regarder, aller, trouver…" aux boutons et liens.
Titre avec verbe générant de la confusion
La synthèse vocale indique à l'utilisateur si l'élément survolé est un lien ou un bouton, ce qui lui permet de distinguer un titre "regarder ce film en version audiodécrite" d'un bouton "regarder ce film en version audiodécrite".
Or les tests utilisateurs sur le Portail de l'audiodescription ont révélé que :
- Tous les utilisateurs ne sont pas à l'aise avec une synthèse vocale et ne savent pas ce qui est cliquable ou non.
« Vous voyez il dit “france puce tv” et “voir sur france tv” et je sais pas sur lequel cliquer. J’arrive pas à faire la différence sur s’il faut cliquer ou pas. C’est parce que je suis débutante. » - Naviguer uniquement à l'oreille du soir au matin est fatigant et génère des moments d'inattention faisant manquer cette information
- Naviguer à l'oreille est chronophage et les utilisateurs sautent souvent d'un élément à l'autre sans attendre que la synthèse vocale ait tout lu. Or c'est à la fin d'un élément qu'elle précise "lien" par exemple, ce qui peut faire sauter cette information.
Pensez donc à relire votre structure de page en ayant cela en tête. Vous pouvez reformuler par exemple de la façon suivante :
- "regarder ce film en version audiodécrite" en "où regarder ce film en version audiodécrite ?"
- "trouver un cinéma équipé" en "liste des cinémas équipés"
Pour en apprendre plus sur la rédaction pour les personnes déficientes visuelles, voir la partie 5. Rédiger clairement (UX Writing).
3. Mener la recherche utilisateur