ACCESSIBILITE

Les clés d'un design accessible

Charlotte
 / Publié le 
March 15, 2022

Qu’est ce que le design accessible ?

Le travail d’un designer UX UI est de concrétiser, via une maquette, des idées dans le but d’apporter une solution à un problème défini. 

Le travail d’un UX (User eXperience) designer est de participer à la conception et l’adaptation d’une interface web ou mobile en gardant l’utilisateur au cœur de sa pratique. Il prend en compte la diversité des individus, comprenant leurs différents environnements et usages. (Fiche métier d’UX/UI Designer).

Le design pour les applications web ou mobile peut, de prime abord, être limitant pour les gens souffrant de certaines pathologies. Que leurs handicaps soient physiologiques ou psychiques, idéalement, chaque individu devrait être en mesure d'accéder au contenu qu’il souhaite. C’est là l’enjeu de l’accessibilité numérique. C’est une exigence qui devrait être prise en compte par chaque designer lors d’un projet.


Pourquoi le design accessible ?

Le design accessible vise une standardisation du design de sorte que l’accès à l’information soit clair pour le plus grand nombre d’utilisateurs.

Respectueux : il doit respecter la diversité des utilisateurs. Personne ne devrait se sentir marginalisé et tout le monde devrait pouvoir y accéder.

Sûr : il doit être exempt de risques pour tous les utilisateurs. Cela signifie que tous les éléments faisant partie d'un environnement doivent être conçus dans un souci de sécurité.

Sain : il ne doit pas constituer un risque pour la santé ou causer des problèmes à ceux qui souffrent de certaines maladies ou allergies. De plus, il doit favoriser une utilisation saine des espaces et des produits.

Fonctionnel : il doit être pensé de manière à pouvoir remplir la fonction pour laquelle il a été conçu sans aucune difficulté.

Compréhensible : tous les utilisateurs doivent pouvoir s'orienter sans difficulté dans un espace donné.

Des informations claires : utilisation d'icônes communes à différents pays, en évitant l'utilisation de mots ou d'abréviations de la langue locale pouvant prêter à confusion.

Répartition spatiale : elle doit être cohérente et fonctionnelle, évitant désorientation et confusion.

Durable : l'utilisation abusive des ressources naturelles doit être évitée afin de garantir que les générations futures auront les mêmes opportunités que nous pour préserver la planète.

Abordable : tout le monde devrait avoir la possibilité de profiter de ce qui est fourni.

Attrayant : le résultat doit être émotionnel et socialement acceptable, tout en gardant toujours à l'esprit les critères précédents.


Comment mettre en place un design accessible ?

Un design accessible ne permet pas toujours de répondre à tous les besoins avec une solution unique qui convient à tout le monde. Néanmoins, nous vous donnons ici quelques bonnes pratiques que l’on peut utiliser lors du design d’un projet.


  • Les contrastes

On connaît aux couleurs un langage qui leur est propre. Par exemple, le rouge retranscrit une erreur ou un danger, le vert la validation ou traduit une idée écologique. Cependant il ne faut pas oublier que pour certains utilisateurs, la perception de certaines couleurs est un processus imparfait.

👉 C’est pourquoi, lors de vos choix de couleurs sur votre interface, pensez à vérifier les contrastes. Que ce soit entre les textes (normaux ou larges) et leurs fonds, les icônes ou alors une typographie sur une image.

👉 N’oubliez pas que l’information ne doit pas être uniquement donnée avec la couleur de l’élément mais aussi grâce à un texte. Pour ce faire, vous pouvez utiliser Who can use, qui propose d’évaluer la colorimétrie de votre texte combinée à celle de votre fond. 


  • Les titres

👉 Utilisez des titres pour introduire un paragraphe pour créer une rupture entre les différents textes

👉 Gardez un déroulement logique entre les en-têtes

👉 Pensez à les contrôler pour vérifier que vous n’avez pas oublié ou mélangé une séquence de titres




  • Les formes

👉 Gardez au maximum une disposition simple et homogène

👉 Pensez à créer des interlignes plus larges pour favoriser le processus de lecture

👉 Faites en sorte que lorsqu’il y a un message d’erreur, ou “d’attention”, cela soit signalé avec de la couleur, mais aussi grâce à du texte. Vous pouvez travailler vos éléments en utilisant le straw test. Il consiste à créer une sorte de tunnel visuel pour vous assurer de concentrer les bonnes informations entre elles.

Simulation de la vision tubulaire due à un glaucome.


  • Médias

👉 Les images, les vidéos, les animations ou encore les contenus audios ne sont pas en reste. Pensez aussi à vérifier que les médias ajoutés dans votre interface ne soient pas en autoplay. 

👉 Concernant les vidéos ou les animations pour lesquelles cela est nécessaire, n’hésitez pas à rajouter des sous-titres. Vous pouvez faire de même avec certaines images importantes, trop complexes, en leur accolant des explications textuelles de disponibles.

👉 Éviter des images animées et les vidéos ayant des flashs lumineux trop importants


  • Langage clair

👉 Faites en sorte que le langage utilisé soit clair, éviter les métaphores trop complexes

👉 Utilisez une typographie qui ne pose pas de difficulté aux dyslexiques. En effet, il est conseillé d’utiliser des typographies plutôt classiques, un lettrage sans empattement ou sans fioritures. 





  • Navigation

👉 Mettez en place différents systèmes de navigation pour faciliter l'accès à l’information de l’utilisateur

👉 Vérifiez que le menu, les barres de navigation, l’ensemble des pages est toujours à la même place

👉 Faites attention à ce que les items redondants amènent toujours au même endroit sur le site

👉 Faites en sorte que l’on puisse naviguer sur l’application via des raccourcis clavier

👉 L’objectif est de garder une navigation fluide

🤜 Pour plus d’informations, contactez nos équipes !
Nous contacter

Estimation

Contact

Obtenez une estimation du coût de votre projet en quelques clics.

Parlez nous de votre projet et prenez rendez-vous avec l’un de nos spécialistes.

contact@hello-pomelo.com
contact@hello-pomelo.com
Conditions générales