.st0{fill:#FFFFFF;}

Le (web)design inclusif, l’outil pour un web accessible à tous

par  Philippine Dumas

Pour réussir et rendre les expériences utilisateurs fluides et positives, le design inclusif et le designer vont se tourner en priorité vers les utilisateurs. Parce que les produits ne sont pas fait pour les concepteurs qui les conçoivent, mais pour les utilisateurs qui les utilisent!

Il est primordial de ne pas l'oublier et de comprendre comment va être utiliser le service. Il faut s'interroger : par qui, à quel moment, dans quelles condition et pour quelle raison...

Un tas de questions que les designers, comme moi, vont justement se poser, pour anticiper, comprendre et intégrer dans la conception même du produit ou du service, pour bien interagir avec celui qui l'utilise.


Qu'est-ce-que le design inclusif : définition du concept

Le process du design inclusif s'intègre dès la conception de produits et services numériques afin de les rendre accessible à tous. L' humain dans toute sa dimension (capacités, besoins, aspirations) est pris en compte dans ce process de design inclusif. L'Humain est au centre dans le travail du design, et c'est pourquoi le design inclusif apporte de vraies solutions aux problématiques et notamment à la problématique de l'inclusion.

Le design inclusif a un rôle important à jouer, des erreurs venant du design peuvent être fatales. Le designer travaille le visuel, l'ergonomie et le graphisme des produits ou des services, mais pas seulement, il travaille aussi sur la dimension affective, émotionnelle et psychologique qui est engagée dans l'utilisation de ce produit ou de ce service, et sur l'expérience que l'utilisateur en fait en utilisant un produit.

Qui sont les références dans ce domaine ?

La référence reste Tim Berners LeeDirecteur du W3C et inventeur du World Wide Web

Time Berners est un chercheur britannique, qui a inventé le Web au CERN en 1989. A l'origine, le projet baptisé " World Wide Web", a été conçu et développé pour que des scientifiques travaillent dans des universités et instituts du monde entier puissent s'échanger des informations instantanément à travers le monde.


A qui s'adresse le design inclusif ?

En quelques chiffres :

Le saviez-vous? 15% de la population mondiale serait concernée par une forme de handicap dont 2 à 4 % avec des difficultés de fonctionnement majeures selon l'OMS. En France, cela représente pas moins de 6 millions de personnes. Le design inclusif s'adresse à différents types de handicap. Par exemple, une personne atteinte d'un handicap moteur ou bien une personne souffrant d'un trouble auditif. Ou encore d'un trouble visuel ou cognitif.

Une étude de 2016 révèle que la majorité des sites web des entreprises françaises tenaient peu ou pas compte des réalités des internautes en situation de handicap. Ignorer les problématiques d'accessibilité de ces personnes, c'est aussi balayer du revers de la main tous les contextes de vie dans lesquels les capacités des valides sont mises à l'épreuve : répondre à un appel avec un enfant dans les bras, utiliser des services nécessitant la reconnaissance vocale avec une extinction de voix, lire un message en plein soleil...

Plus d'un milliard de personnes dans le monde sont concernées par le handicap. Incorporer le design inclusif dans sa méthode UX rendra vos produits et services accessibles à un public plus large et par conséquent cela aura des répercussions sur le chiffre d'affaire.

Et nous mettons notre main à couper que vos clients actuels ne diront pas non à une interface plus simple et plus intuitive. C'est précisément là qu'intervient le design inclusif.


L'UX/UI au coeur du design inclusif : 5 bonnes pratiques 

L'UX a un rôle majeur dans le design inclusif. Le design inclusif est un moyen de conception qui fait partie intégrante de l'expérience utilisateur. Cela consiste à prendre en compte le plus grand nombre d'utilidateurs en portant son attention sur les diversités et particularités de chacun dès la phase de réflexion.

Pour être clair, le design inclusif comprend autant les personnes en situation de handicaps (troubles moteurs, auditifs,visuels,cognitifs). On parle dans ces cas d'accessibilité. Il faudra donc programmer vos sites de manière à ce que ces profils puissent utiliser vos services via un lecteur d'écran par exemple, mais cela ne s'arrête pas là.

Le design inclusif ajoute en plus les différentes cultures et croyances, la langue, le niveau d'éducation, l'accès matériel (connectivité), l'identité de genre ou encore la localisation et l'âge de vos utilisateurs.

personne_aveugle



Quelques exemples des bonnes pratiques de l'Inclusive Design 


1. Mettez-vous à la place de vos utilisateurs 

C'est là où intervient l'expérience utilisateur (UX, user experience). L'UX Design permet de prendre en compte le POURQUOI concernant les motivations des utilisateurs. Le COMMENT pour ce qui est des méthodes utilisées et le QUI (le fameux user persona!) pour le public à qui il s'adresse.

Pour optimiser l'expérience utilisateur, il ne faut pas être focus que sur l'aspect graphique, sur la rédaction, sur les animations, etc...Vous devez être centré en priorité sur l'utilisateur. Vous devez faire en sorte de donner à votre utilisateur ce qu'il recherche et cela de la meilleure façon possible.


2. Suivez les lignes directives de l'accessibilité web

Dans le domaine de l'accessibilité existe de nombreuses lignes directrices à suivre qui permet d'arriver au but. Il est important de les connaître et de les mettre en pratique, vous trouverez ci-dessous quelques références de base à ce sujet.

3. Un design adapté aux utilisateurs

Le design d'interface l'axe principal le plus utilisé pour rendre un site ou une application accessible pour tous.

Revenons donc sur les bases de structure, de couleurs et de formes :

  • L'architecture : le site doit être structuré de façon à respecter les standards du HTML5. Rappelez-vous que le hiérarchisation du texte à l'aide des balises notamment doit permettre à une personne lisant que les titres de comprendre le contenu de la page. Veillez à utiliser des positionnements d'images, de couleurs, pour cibler le contenu. N'oubliez pas d'intégrer un texte alternatif correspondant à chaque image. Veillez à un maximum de clarté et de cohérence dans la mise en page.
  • Les espacements : veillez également à prévoir suffisamment d'espaces  entre les différents éléments cliquables.
  • Les contrastes : n'oubliez pas de contraster suffisamment votre texte et son arrière plan. Cela peut sembler évident mais n'apposez pas du texte gris clair sur un fond blanc et, d'une manière générale, jouez sur les contrastes de façon raisonnée. Il serait dommageable que votre site ne soit pas lisible pour les personnes qui le visite. N'oubliez pas d'inclure des états de mise au point suffisamment lisibles afin d'aider les utilisateurs à naviguer sur le site et comprendre où ils se trouvent sur le site.
  • Les couleurs : veillez à ne pas utiliser côte à côte des couleurs similaires ou difficilement différenciables par les personnes atteintes de daltonisme. Ne pas utiliser la couleur comme seul moyen visuel de transmettre des informations. De même, n'essayez pas de véhiculer trop de sens par l'intermédiaire des couleurs. Vos efforts seront réduits à néant lors d'une simple consultation d'écran en plein soleil.
  • Les polices : privilégiez les polices classiques et lisibles. Pour régler la question de la taille, offrez la possibilité aux utilisateurs de la paramétrer eux-mêmes.
  • L'affordance : l'affordance, ou "capacité d'un objet à suggérer sa propre utilisation" est primordiale pour éviter les hésitations et frustrations. Faites en sorte que les éléments interactifs aient l'air...interactifs !


4. Utilisez les outils à votre disposition

Même si vous connaissez les bonnes pratiques théoriques du WCAG, leur mise en oeuvre n'a rien d'une évidence. Il existe de nombreux outils pour vous aider à rendre vos produits numériques plus accessibles.

Ces outils en ligne vous sont listés par The A11Y Project. Des aides qui vous seront utiles tout au long du cycle de développement de votre produit. Chrome propose une gamme d'extensions qui permet de vérifier l'accessibilité de votre site avec AXE et DevTools.

Que vous soyez consultant ou artisan, essayer de respecter ces règles pour votre site Internet par exemple avec l'aide de votre agence.


5. Testez votre accessibilité

La phase de test d'un site web ou d'une application est un passage obligé avant tout lancement.

Voici un article du codeur.com avec 10 outils pour tester l'accessibilité de votre site Internet. 


Le web design inclusif : à vous de jouer

Concevoir un bon design de site web passe par l'ouverture aux autres, la compréhension de leur vie et par la prise en compte de leurs contraintes. En dépassant nos pensées propres, nous accueillons un design plus accessible, bénéfique et utile. C'est une mine d'or d'inventivité pour les web designers et les développeurs qui imaginent le web de demain.

Le web design inclusif de demain permettra aux webdesigners et développeurs de mettre en place des dispositifs encore plus innovants et qui repousseront les limites du web encore plus loin et terme d'accessibilité.

Et pourquoi ne pas intégrer ces humains " hors-normes" dans nos équipes de développement afin de travailler main dans la main pour un web plus inclusif ?

Pour terminer, je vous invite à lire l'article d'Adrien sur la création de site Internet ou d'un blog en une journée.

Bonne lecture et à bientôt !

Ce article vous a-t-il aidé ?

Cliquez sur une étoile pour mettre une note

Note moyenne 4 / 5. Nombre de notes 4

Pas encore de vote. Soyez le premier à le noter.

Je suis désolé de l'apprendre

Aidez-moi à améliorer cet article

Dites moi comment je peux l'améliorer

Philippine Dumas


Designer Web et Print. Elle intègre Digital 64 en 2021.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Les Derniers articles

Que ce soit pour votre stratégie SEO ou tout simplement votre stratégie

Les responsables de PME ont bien compris la nécessité  de l’information pour

Vous travaillez dans le marketing et souhaitez vous perfectionner dans certaines facettes

risus sit mi, Donec quis, consectetur