7. UI Design ou prototyper en haute-fidélité
L’étape du prototype haute fidélité est enfin le moment de spécifier certaines choses comme l’iconographie, le choix des couleurs, ou la présence d’un mode sombre. Ces thématiques nécessitent certaines précautions pour concevoir une UI adaptée aux personnes déficientes visuelles.
a. Schémas de navigation ou "patterns"
« Une interface utilisateur, c'est comme une blague. Si vous avez besoin de l'expliquer, c'est qu'elle n'est pas si bonne. »
Nous naviguons tous, sans nous en rendre compte, selon les schémas de navigation que nous avons appris. C'est pour cela que l'on peut construire des parcours uniquement avec ce type de cartes "flowchart" (voir sur Figma Community) et que l'on reconnaîtra de quoi il s'agit.
En ergonomie comme en accessibilité, les experts sont formels : il ne faut pas s'éloigner des schémas de navigation classiques ! C'est créer de la confusion inutile. Gardons les menus en haut, les effets de survol pour les éléments cliquables, et changements de couleur de fond pour les changements de section. Et oublions les sites Awwwards qui sont des démonstrations de créativité mais ont avant tout oublié que le web avait été pensé avec l'accessibilité à son cœur.
« Le pouvoir du Web est dans son universalité.
L’accès pour tous, quel que soit le handicap, est un aspect essentiel. »
Pour que la page soit comprise en un clin d'œil par les personnes malvoyantes, il est donc important de faire comprendre les schémas de navigation par des repères visuels : cartes, images, boutons, titres distincts, fonds qui changent de couleur au changement de section… A noter que les boutons de type secondaire ne seront pas suffisants et que seuls les boutons en "plein" seront vus par certaines personnes.
« J’y comprends rien. Si j’ai pas le texte je ne comprends rien. »
b. Iconographie
Les personnes malvoyantes qui ne peuvent pas lire les textes ou avec beaucoup d'effort peuvent s'appuyer sur les icônes pour trouver du sens dans l'interface.
« Alors du coup il doit y avoir une loupe. Elle est à droite. »
« Il y a une loupe pour rechercher, c’est très bien. »
Conserver une iconographie classique.
c. Couleurs
Le choix des couleurs peut être décisif pour les personnes malvoyantes :
- Elles ne doivent pas perturber la lecture.
- Elles doivent avoir des contrastes suffisants.
- Elles permettent de mettre en avant facilement des informations : fonds de champs de formulaire, boutons de niveau 1…
« Je l’aime bien. En plus elle n’a pas plein de trucs avec des couleurs qui peuvent perturber la lecture. J’aime bien en fond blanc. »
d. Mode sombre
De nombreux usagers malvoyants naviguent systématiquement en mode sombre, notamment en forçant une inversion des couleurs dans leurs paramètres d'accessibilité sur leur appareil.
« Moi je suis en mode sombre par défaut car c’est moins agressif pour les yeux. »
« Sur l’aspect visuel je suis photophobe donc pour moi c’est dur. »
Recommandations
- Proposer un mode sombre en plus du mode clair
- Activer par défaut le mode correspondant aux préférences de l'appareil de l'utilisateur
- Permettre de passer de l'un à l'autre dans des paramètres en en-tête ou pied-de-page.
e. Pourquoi pas un plugin Accessibilité pour les préférences d'affichage ?
Les plugins de ce type dits "surcouche d'accessibilité" posent de nombreux problèmes :
- mal installés sur le site
- cachés donc introuvables
- difficiles à naviguer (des dizaines de clics avant d'arriver à un résultat)
- fonctionnement variable d'un plugin à l'autre
- erreurs d'accessibilité dans le plugin lui-même.
Il est donc fortement déconseillé d'utiliser ces plugins de surcouche d'accessibilité.
Des sites non accessibles avec plugin inefficace
Sur VivaTech, il faut faire 13 clics sur Tab avant d'arriver sur le bouton Facil'ITI, qui est lu en anglais "Adapt your display". Quand on est enfin dessus et que l'on a compris que c'était là que l'on pouvait agir sur les paramètres, le bouton est cassé : impossible de cliquer dessus. (31/07/2025).
Sur Showroomprive.com, le service Facil'ITI n'est pas activé sur la page de connexion correspondant à l'url générale du service. "Nous sommes désolés, mais le service FACIL'iti n’est pas activé sur cette page."
Sur Lacoste, les "Options d'accessibilité" se trouvent dans les accès rapides. Dommage qu'elles n'amènent non pas aux options en elles-mêmes mais à une page verbeuse qui emmène elle-même sur une autre page "Utiliser Facil'ITI" qui oblige elle-même à créer un profil en 3 étapes. En réalité, le plugin se cache dans le pied-de-page qui lui n'a pas d'accès rapide. Une fois ouvert, 19 clics plus tard, on peut cocher une case "Malvoyance" et obtenir un site modifié avec notamment un menu au contraste de 1.38 de ratio.
Ces exemples n'ont pas été choisis pour leurs défauts extraordinaires : ce sont les 3 premières références affichées par Facil'ITI sur leur site.
Pour aller plus loin :
- Les outils de surcouche d’accessibilité web : mensonges et boules de gomme - La lutine du web
- Overlay Fact Sheet (en français)
- Overlays, la Commission européenne en remet une (sur)couche - DesignGouv, 3 avril 2025
6. Wireframes ou prototyper en basse-fidélité