Nous avons souvent parlé d’accessibilité sans pour autant avoir mis des noms sur les différents handicaps qui doivent être pris en compte dans la création d’une expérience utilisateur (UX) universelle.
Nous verrons qu’est-ce que la neurodiversité et comment nous pouvons concrètement intégrer tous les utilisateurs dans nos interfaces.
La neurodiversité désigne la diversité cognitive existante chez l’Homme.
Elle rassemble des fonctionnements de pensée dits standards et d’autres, plus atypiques.
Ces fonctionnements atypiques sont qualifiés de neurodivergents et rassemblent plusieurs syndromes : Autisme, TDAH, dyslexie, dyspraxie, daltonisme…
En apprenant leurs modes de fonctionnement, nous devons revoir nos principes UX afin de proposer une expérience plus inclusive et garantir le même accès à l’information pour tous.
La mise à forme des informations est un indice supplémentaire pour vos visiteurs.
Par exemple, un numéro de carte bleu s’écrit sous une forme bien précise : 4 chiffres par 4 chiffres séparés par un espace vide.
En respectant cette mise en forme connue de tous, nous rassurons les utilisateurs sur le type de données attendues.
Ce principe est d’autant plus important si les chiffres sont mêlés à des lettres comme pour une plaque d’immatriculation par exemple. Il peut être compliqué de distinguer la lettre o du chiffre 0. Assurez-vous de respecter les espaces et d’utiliser une typographie qui facilitera la différenciation entre chiffre et lettre tout en restant facilement lisible.
Si vous utilisez des schémas pour représenter un chargement en cours ou une valeur de temps comme des barres de progression par exemple, il convient de ne pas la représenter seulement avec de la couleur. Pensez à toujours renseigner une valeur sous forme de texte (pourcentage de progression, nombre d’étapes à passer, temps en minutes,).
Si nous respectons ces principes d’accessibilité, nous faciliterons l’utilisation de notre site et dissiperons les doutes de nos utilisateurs, notamment pour les personnes atteintes de dyslexie ou dyscalculie.
La typographie est un élément fondamental de votre contenu. Elle doit être lisible par tous pour faciliter une lecture rapide de vos pages internet.
Nous distinguons deux grandes familles de police : La Sérif et Sans Sérif.
La Sérif est une typographie à empattement utilisée principalement dans la rédaction sur support papier (journal, magazine, …). Facilement lisible sur ces supports, elle l’est beaucoup moins sur un support numérique où la clarté et la lisibilité sont importantes.
La Sans Sérif est plus épurée et, quand elle est utilisée sur une page web, apporte plus de légèreté qu’une police Sérif. C’est pour cette raison qu’elle est traditionnellement utilisée dans les projets web.
Au sein de la police Sans Sérif existent des types de police particulières : Grotesque, Neo-grotesque, Géométrique, Humaniste).
Les polices de types humanistes sont à privilégier pour faciliter la lecture de vos contenus puisqu’elles reprennent les codes de la police manuscrite en affichant des lettres bien proportionnées et réalistes.
Pour aider vos utilisateurs à distinguer chaque partie de votre contenu, il est important de mettre en place une hiérarchie de l’information.
Vos niveaux de titres doivent êtres tous différents et logiques, du plus grand (h1) au plus petit (h6).
En général, la taille d’un titre doit être d’au moins 20% plus grande que celui du corps du texte.
Vous pouvez vous aider d’une graisse supérieure ou d’interligne plus importante pour accentuer cette hiérarchisation.
Le style doit cependant rester simple pour faciliter l’assimilation et le traitement de l’information.
Enfin, pensez à écrire suffisamment grand pour être lu par des personnes malvoyantes (au minimum 16px pour du texte).
Le choix des couleurs est certainement l’un des enjeux les plus importants dans la mise en place d’une accessibilité performante.
La norme internationale WCAG (Web Content Accessibility Guidelines) préconise au minimum un niveau de contraste AA, cependant, il est préférable d’adapter sa charte graphique avec des couleurs qui possèdent déjà un niveau AAA afin que n’importe quel visiteur puisse naviguer sur votre site sans soucis.
Si vous utilisez des couleurs sur un bouton, veillez à utiliser toujours ce même style sur les autres boutons afin de garder une logique dans votre contenu et ne pas perdre votre utilisateur dans l’intention que certaines couleurs pourraient renvoyer.
Des exceptions peuvent tout de même exister : par exemple, un bouton « supprimer » devrait toujours avoir des couleurs proches du rouge pour accentuer le côté critique et définitif du bouton.
La couleur est une composante importante à prendre en compte pour les neurotypes daltonien, dyslexique ou encore autiste.
Les boutons comme les liens doivent avoir des styles uniques permettant de les différencier du reste du contenu.
Un lien sera dans la plupart des cas surligné pour montrer qu’il est cliquable. Son style devra être différent s’il est survolé, actif, ou si le focus se porte sur lui afin de fournir un retour visuel à l’utilisateur.
Il en est de même pour les boutons qui peuvent également contenir des icônes pour faciliter encore davantage la compréhension.
Le label du bouton doit être concis et bien représenter l’action engendrée au clic dessus.
Ces efforts de conception seront bénéfiques aux personnes atteintes de dyslexie, dyspraxie et TDAH.
Besoin d’une optimisation UX pour votre site ?
Notre service de design UX vous aide à atteindre vos objectifs de conversion et de satisfaction client.
Pour éviter de perdre le visiteur dans une masse d’informations, nous devons organiser les pages de sorte à ce que les informations principales ressortent.
Cela passe par une disposition ordonnée de l’information.
Plutôt que de mettre des blocs de contenu différents les uns à côté des autres, placez-les dans le sens vertical. Ainsi, en arrivant sur votre page, le visiteur ne sera pas perdu dans une interface encombrée où toutes les informations se bousculent. L’utilisateur aura simplement à scroller vers le bas pour découvrir le reste des informations.
Pour différencier les différentes sections, vous pouvez vous appuyer sur la couleur de fond comme c’est le cas pour le site Périnat Normandie avec son menu latéral.
En organisant nos interfaces, nous simplifions la vie des personnes souffrant de troubles de l’attention.
Les animations ne sont pas toujours une mauvaise chose, à condition qu’elles soient utilisées convenablement.
Pour commencer, vous devez éviter les animations automatiques et répétitives qui ne peuvent pas être stoppées par l’utilisateur. Rien n’est plus désagréable que de voir des éléments s’agiter dans tous les sens sans avoir la main pour les figer.
Les personnes neurodivergentes supportent difficilement ce type d’animation et risquent de quitter votre site plus rapidement que vous ne le pensez.
Nous avons davantage recours à des animations pour créer des effets de transition vers du contenu comme l’ouverture d’une fenêtre contextuelle. La transition doit être légère, fluide et rapide sans pour autant perdre l’utilisateur.
En repensant nos interfaces pour s’adapter à la neurodiversité de notre monde, nous ne faisons pas que répondre à des besoins spécifiques, nous améliorons l’expérience utilisateur pour tous. Concevoir de manière inclusive, c’est reconnaître les différences cognitives et transformer cette diversité en force.
Et si demain, l’accessibilité devenait la norme plutôt qu’une exception ?
C’est en tout cas ce que pense l’Europe en mettant en place de nouvelles réglementations en juin 2025 pour étendre l’accessibilité à davantage de site.
