Guide Concevoir pour les personnes déficientes visuelles

5. Rédiger clairement (UX Writing)

La clarté du texte est clé lorsque l'on navigue à l'oreille. Par conséquent la rédaction et l'UX Writing vont être au coeur de l'accessibilité.

a. Intitulé des boutons

Cohérence avec la page de destination

Pour tout changement de page, maintenir le plus de cohérence possible entre l'intitulé de l'action et le titre de la page de destination.

« Ce qui est bien c’est que quand je clique sur un lien, le H1 de la page a le même nom que le lien précédent. »

Utilisatrice aveugle

Champ lexical de la vision

En rédaction web, on utilise souvent les expressions comme "afficher plus", "voir la suite" ou "regarder la vidéo". Faut-il utiliser des substituts comme "charger plus" ou "accéder à la suite" ?

Les utilisateurs déficients visuels interrogés sur ce point n'ont pas exprimé de gêne avec les termes afficher, voir ou regarder, et les utilisent eux-mêmes. Vous pouvez donc continuer d'utiliser les expressions les plus claires et habituelles pour le comportement souhaité (changement de page, chargement progressif, lecture…).

Titres de carte

Les cartes peuvent être utiles aux personnes malvoyantes pour repérer des éléments cliquables de façon plus visuelle qu'une liste.

Comparaison entre une liste de liens et un groupe de cartes correspondant aux mêmes liens.
La liste de cartes est la version "habillée" de la liste de liens. Elle est lue de la même manière par les synthèses vocales.

Par défaut, étant cliquables, un groupe de cartes est lu comme une liste de liens par les lecteurs d'écran (si les images ont des textes alternatifs vides alt=" ")..

Comme vu en partie 1. Introduction sur les modes de navigation, certains utilisateurs préfèrent naviguer de titre en titre plutôt que de lien en lien. Cela risque d'invisibiliser pour eux la liste de liens lors de leur navigation. Alors faut-il mettre un niveau de titre sur leur intitulé ? Après tout ici, on peut aussi considérer que les libellés des cartes sont des titres de niveau 3.

Exemple
Groupe de 12 cartes correspondant aux genres cinématographiques

Excès de zèle sur une liste de cartes

Sur la première version de la page d'accueil du Portail de l'audiodescription, on trouvait une liste de 12 genres cinématographiques, chacun avec son illustration dans une carte cliquable. Les utilisateurs nous ont dit que la lecture des genres était très longue et fastidieuse car la synthèse vocale lisait "titre de niveau 3, lien, Nouveautés", "titre de niveau 3, lien, Films cultes", "titre de niveau 3, lien, Action", etc. Répété 12 fois, cela était très long et rébarbatif. Nous avons donc, à leur suggestion, retiré les niveaux de titre sur cette liste de liens.

La recommandation des utilisateurs est donc :

  • Si on a un titre et une description, alors mettre un niveau de titre sur le nom de la carte.
  • Si on a juste un titre, alors ne pas mettre de niveau de titre sur le nom de la carte.
Groupe de cartes avec titre et description ayant un niveau de titre sur la carte, et groupe de cartes avec titre seul sans niveau de titre sur la carte

A noter : les cartes cliquables riches sont complexes à comprendre au lecteur d'écran. Voir la partie 6. Wireframes, focus sur le composant carte.

b. Formulation des accès rapides

Les accès rapides sont des liens d'évitement permettant aux personnes avec un lecteur d'écran d'aller directement à certaines sections de la page (par exemple le contenu principal ou le pied de page)au contenu ou au pied de page. Ils n'apparaissant généralement qu'à l'utilisation de la navigation au clavier, ou sont visibles en haut de page.

A quoi cela sert-il ? Sans les accès rapides, cela signifie qu'à chaque changement de page, les personnes déficientes visuelles doivent réécouter et sauter toute la navigation principale, ce qui est vite un enfer. Cela veut aussi dire que si elles veulent atteindre le pied de page, elles doivent dérouler toute la page.

Accès rapides du Portail de l'audiodescription comprenant Contenu, Menu, Recherche et Pied de page.
Les accès rapides du Système de Design de l'Etat.

Entrées

Les entrées classiques des accès rapides sont :

  • Contenu
  • Menu
  • Recherche / Moteur de recherche
  • Pied-de-page / Plan du site

A vous de voir les formulations les plus pertinentes pour votre contexte.

Critère 12.6 du RGAA
Les zones d’en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche doivent pouvoir être atteintes ou évitées.
Voir le référentiel

Exemple
Comparaison entre 2 versions de l'accueil du portail de l'audiodescription, avec et sans moteur de recherche dans l'en-tête.

Redondance de liens

Initialement le moteur de recherche était présent dans les accès rapides, dans l'en-tête et dans le hero de l'accueil du site. La répétition du lien "recherche" à 3 endroits proches de la liste de liens créait de la confusion chez certains utilisateurs.
Il a donc été décidé de supprimer le moteur de recherche de l'en-tête pour le garder en haut ou bas de page selon les pages.

"Aller au contenu" ou juste "Contenu" ?

La recherche utilisateur effectuée n'a pas permis de trancher sur la formulation préférable. Nous recommandons donc de tester auprès de vos utilisateurs. En effet :

Certains préfèrent "Aller au contenu", "Aller à la recherche", "Aller à…" ou "Vers le contenu principal".

« Moi il me manque “Aller au”. Juste “Menu” je me suis demandé si ce n’était pas le menu. J’avais un doute. »

D'autres préfèrent "Contenu", "Recherche", "..."

Comparaison entre les accès rapides de Orange.fr et du Portail de l'audiodescription
Orange formule ses accès rapides avec "aller au" tandis que le système de design de l’État non.

Et puis il y a même ceux qui ne savent pas ce que c'est et pour qui cela ajoute de la complexité à la page.

« Accès rapides je ne sais pas ce que ça veut dire. »

Pour aller plus loin :

c. Rédaction des textes

Casse des mots

Éviter au maximum les mots en majuscule car certains lecteurs d’écran comme Talkback (lecteur présent sur tous les smartphones Android) les épellent. Dans tous les cas leur lecture est plus difficile pour les personnes malvoyantes ou avec des difficultés de lecture.

« Celui-là “TITANICA”, comme c’est écrit en majuscule il me l’épelle ! »

Utilisatrice sous Androïd

Attention au “lorem ipsum”

Sur votre interface de prototype, retirer le Lorem ipsum. Incompréhensible à la lecture par synthèse vocale, il risque de perturber vos tests utilisateurs. Pour les pages de contenu, vous pouvez facilement le remplacer par du texte temporaire généré par intelligence artificielle.

Langage clair

Le langage clair est une façon de rédiger permettant à tous les publics, peu importe leur niveau d'éducation ou de maîtrise de la langue, de comprendre l'information et de l'utiliser. Il est défini par la Norme ISO 24495-1:2023 (payante). Le langage clair est différent du Facile À Lire et à Comprendre (FALC) qui lui est une version simplifiée du texte destinée à des personnes avec un handicap intellectuel ou cognitif.

Quoique le langage clair soit une bonne pratique d'accessibilité et d'inclusion qui dépasse la question du handicap visuel, il est particulièrement clé pour les personnes naviguant uniquement à l'écoute du texte. Des phrases longues lues par une synthèse vocale peuvent être extrêmement pénibles à écouter et difficiles à comprendre. 

Par ailleurs, 40% des personnes déficientes visuelles ont plus de 75 ans et 28% des personnes déficientes visuelles vivent sous le seuil de pauvreté, deux variables corrélées à l'éloignement numérique d'après le baromètre du numérique 2024.

Voici quelques bonnes pratiques de rédaction pour éviter l’exclusion des personnes déficientes visuelles (liste non exhaustive).

Pas de jargon web

Portail, pied-de-page, accès rapide, fil d'ariane, version beta… Autant de mots souvent incompris en tests utilisateurs.

« Alors Portail ça veut dire quoi ?” “Pied de page ça sert à quoi ça ? »

Utilisatrice aveugle

Retour d'expérience

Eviter le mot "newsletter"
Lors d'un questionnaire administré pour Amnesty International France, il était demandé aux personnes par quel canal elles arrivaient habituellement sur le site. Parmi les réponses proposées, il y avait Newsletter. Pourtant dans le champ de précision "autre", 103 personnes sur les 1692 ayant répondu à l'enquête ont écrit "e-mail", "courriel", "boîte mail", "infolettre" ou "lettre de diffusion", montrant bien que le terme "newsletter" est loin d'être compris par l'ensemble de la population française.

Alors comment faire ?

  • Orange a par exemple remplacé "Pied de page" par "Plan du site" (équivalent dans son contexte). 
  • Rennes Métropole a remplacé le mot "portail" par "site web".

Mots concrets

« Initiative ce n'est pas clair » « Un espace c'est très vague. » « Mobilité ça ne veut rien dire, on ne comprend pas du tout qu'il y a des transports derrière. » « Réseau, c'est les réseaux sociaux ? »

Phrases entendues en tests utilisateurs avec des citoyens

L'équivalent par lequel remplacer ces termes nécessite souvent de réécrire la phrase. N'hésitez pas à tester si possible vos textes sur des personnes éloignées du numérique ou dont le français n'est pas la langue maternelle.

Phrases courtes

Différents moyens permettent de rédiger de façon plus accessible en raccourcissant les phrases :

  • découper les phrases
  • faire des listes à puces
  • éviter les tournures alambiquées et pompeuses

« Les textes sont trop longs. Vraiment simplifier. Moi en braille j’ai une vision linéaire des choses. »

Utilisateur aveugle

Par ailleurs, certaines personnes malvoyantes ont un résidu visuel suffisant pour lire mais pour qui cela peut être très lent. Des phrases courtes et précises leur facilitent la vie.

« Quand il nous reste un petit potentiel visuel comme moi c’est bien de ne pas être assailli d’information. »

Utilisateur malvoyant

A savoir 💡: Les formations au FALC sont éligibles au CPF depuis 2024. De nombreux organismes proposent également des formations à la rédaction en langage clair.

Pas de point médian

En matière d'écriture inclusive, il a été remonté que les caractères spéciaux, notamment les points médians, peuvent faire planter les plages braille.

« Le point médian n’est pas connu par la plage braille donc elle se bloque. C’est un enfer pour en sortir. En tout cas dans la configuration actuelle. »

Utilisateur aveugle avec plage braille

 Il est donc recommandé d'écrire de façon inclusive sans point médian. Par exemple, "votre inscription a bien été prise en compte" plutôt que (attention point médian) "vous êtes bien inscrit·e".

A noter que certaines personnes aveugles utilisent le point médian spontanément donc la lecture en elle-même du point ne pose pas nécessairement problème.