UI et accessibilité : comment éviter les erreurs de base ?

Comme dirait si bien l’oncle Ben à Peter Parker “Un grand pouvoir implique de grandes responsabilités”. La mission première d’un designer web est de créer et de penser des interfaces répondant aux besoins et aux attentes de tous les utilisateurs finaux. Dans cette logique, les personnes naviguant sur l’interface doivent y avoir accès de manière équitable, quelle que soit leur situation. Or, les tendances graphiques UI et l’accessibilité ne font pas toujours bon ménage. Vous pouvez jeter un coup d'oeil à cet article : Neumorphisme - Et si on faisait une étude de cas ?.

En tant que designer, on oublie trop souvent de respecter les normes d’accessibilité, il est pourtant de notre responsabilité d’y penser. Voici quelques conseils et cas pratiques qui vous aideront, vous et vos utilisateurs, à y voir plus clair.

‍

Hiérarchie textuelle et taille du texte les atouts pour un contenu plus lisible

Afin de pouvoir se repérer sur une interface, il est nécessaire que le contenu soit construit avec des titres et des sous-titres. Une page structurée et une hiérarchie textuelle efficace facilitent la navigation et permettent d'augmenter la lisibilité du contenu. 

Pourquoi est-ce si important ? Savez-vous que les personnes atteintes de certains troubles cognitifs ont du mal à suivre le texte quand les lignes sont trop rapprochées ? (coucou les hyperactifs 👋)  Fournir un espace supplémentaire entre les lignes et entre les paragraphes améliore leur expérience de lecture. Cela les aide à aller à la ligne suivante et à reconnaître la fin d'un paragraphe.

Certains outils peuvent vous aider à mettre en place cette hiérarchie textuelle en fonction de la police que vous avez choisie tel que Type Scale : Il s’agit d’un outil permettant de créer une hiérarchie typographique grâce à une progression des tailles de police. Il propose différentes tailles, allant du plus petit au plus grand de manière équilibrée et harmonieuse.

‍

‍

A savoir ! Il est conseillé que le texte de paragraphe soit au moins de 16 pixels. C’est d’ailleurs souvent la taille de base que propose l’outil Type Scale. Cependant, cette taille peut varier en fonction de la police choisie.

‍

Contrastes, élément central de l’accessibilité

Avoir des contrastes suffisants est un point majeur sur lequel doivent se pencher les UI designer. Pour vous illustrer le propos, j’ai réalisé la maquette d’une marque de vêtements fictive. Quelques petits réglages sont nécessaires pour la rendre accessible. En premier lieu, les textes ne sont pas suffisamment contrastés. Rendant donc l’interface inadaptée aux personnes malvoyantes.

Mais à chaque problème sa solution : en tant que designer, si vous utilisez Figma, il est possible de vérifier, en un claquement de doigts, l'efficacité des contrastes entre vos textes et leur arrière-plan. Effectivement, il existe différents plugins mis à votre disposition par la communauté (ils sont sympas). 

Voici 3 outils pouvant être employés dans cette situation : 

• Contrast
• Stark
• A11y : Color Contrast Checker

‍

La couleur ne suffit pas ‍

‍

On l’aura compris, l’objectif est de permettre au plus grand nombre d’avoir accès à l’information. Or l’exercice se transforme rapidement en un vrai casse-tête pour les personnes ne pouvant pas visualiser ou différencier les couleurs. Il est ainsi nécessaire de fournir un complément à la couleur comme par exemple : modifier l’épaisseur du texte, le souligner, ajouter du texte, ajouter un pictogramme, en bref ajouter un élément permettant de comprendre le changement d’état et, de manière générale, la signification de l’élément.

Pour revenir à notre exemple : Vous l’aurez peut-être remarqué mais les contrastes n’étaient pas le seul problème d’accessibilité. En effet, pour les personnes ne parvenant pas à distinguer les couleurs, il est impossible de différencier la page active des autres.

‍

‍

Voici une potentielle solution que je vous propose, il en existe évidemment bien d’autres. L’imagination est la seule limite :

Les images au service de l’information

Souvent utilisées dans un but décoratif ou bien afin de présenter des produits aux utilisateurs, les images, illustrations et photographies sont bien pratiques. En plus d'asseoir un univers, elles permettent aux utilisateurs de se projeter, d’encourager à l’achat, de trouver l’information recherchée ou bien de se divertir. 

Il arrive cependant que des éléments d’informations présents sur une image soient illisibles. 

Dans notre exemple la phrase "Découvrir nos collections” est difficile à lire pour le commun des mortels, alors qu’en est-il des personnes ayant une vision diminuée ? La réponse est simple, c’est illisible. Cette phrase représente pourtant une information centrale sur cette page. L’image est, ici, une barrière à l’information alors que son rôle est de servir l’information.

Voici une solution possible, parmi tant d’autres, pour rendre cette interface plus accessible :

Alternative textuelle ? Oui mais pas toujours ! 

Une interface est souvent composée de multitudes d’éléments graphiques. Mais comment font les malvoyants et les aveugles pour se repérer?  Ils utilisent un logiciel de lecture d’écran leur décrivant à haute voix les éléments composants la page. Cet outil, bien que très utile, lit l’ensemble des informations indiquées par les balises ALT. Si vous avez spécifié un texte alternatif pour chaque image décorative, il sera toujours lu (Eh oui ça reste un robot 🤖). Et cela peut très vite devenir ennuyeux si le lecteur répète sans arrêt les mêmes informations surtout si leur but n’est que décoratif.

La règle est simple. Si l'image est décorative et n’est pas porteuse d’informations, ne rédigez pas d’alternative textuelle.

‍

Animations, un savant dosage

Aujourd’hui nous avons le pouvoir de réaliser toutes sortes d’animations : loader, slider, rebonds, survol, et j’en passe et des meilleurs. Ces interactions, en plus de faire transpirer les développeurs, peuvent rendre la navigation sur l’interface plus compliquée, et donc moins accessible (Eh oui Jamy! 👨‍🏫). Un savant dosage est donc nécessaire pour rendre le site attractif via certaines animations tout en permettant une navigation fluide et efficace. Vous voulez connaître le secret d’une interface réussie ? Laissez la liberté aux visiteurs de naviguer comme bon leur semble. Il est frustrant de se sentir contraint dans ses actions.

‍

Tester ! 

Il peut être maladroit de se mettre à la place de quelqu’un. Vous souhaitez aller plus loin et proposer une interface réellement accessible ? Rien de mieux que d’impliquer les principaux concernés, c’est-à-dire les utilisateurs souffrant d’une déficience cognitive ou physique. On vous a concocté un super article qui vous explique comment bien préparer un test utilisateur ! Suivez le guide !

‍

J’espère que ces astuces vous aideront à construire des interfaces pouvant être utilisées par le plus grand nombre. Il est vrai que l’accessibilité est un domaine complexe et nous n’avons jamais fini de progresser. Pourtant de petites attentions contribuent à renforcer l’accès à tous les types d’utilisateurs facilement.

‍

Jeu de l’accessibilité

Combien comptez-vous d'erreurs d’accessibilité sur cette maquette ? Laissez votre réponse en commentaire 😉.