Bienvenue sur cet article ! Je t’y parle de design inclusif : l’accessibilité dans le domaine de la création de contenu visuel. Qu’il s’agisse de visuels de réseaux sociaux, de ton site web ou d’un flyer, il y a trop souvent de grandes oubliées : les personnes handicapées / déficientes visuellement, ou souffrant d’autres troubles affectant la lecture. Je suis persuadée que ton contenu mérite d’être lu par le plus grand nombre, et encore plus persuadée que le rendre accessible à ces personnes devrait être un devoir. 

Maintenant que les bases sont posées, dans cet article, je te détaille ce qu’est le graphisme inclusif, pourquoi le mettre en place et surtout comment. Bonne lecture !

Qu’est-ce que le design inclusif ?

Définition du graphisme inclusif

Cela consiste à intégrer, dans son activité et ses visuels, des pratiques permettant d’inclure le plus de personnes possibles. Dans cet article, je vais parler spécifiquement de l’inclusion des personnes ayant un handicap ou déficience visuel(le), ou d’autres troubles nuisant à la lecture.

Sache que mettre en place ces bonnes pratiques va peut-être un peu bousculer ta façon de créer tes visuels. Cependant, c’est une question d’habitude et les bases que je te présente ci-dessous sont faciles à mettre en place ! J’ai essayé de les simplifier au maximum, mais d’autres articles bien plus spécifiques sont à venir si tu veux creuser le sujet 🙂

Quelques chiffres pour mieux réaliser

Selon l’Institut national de prévention et d’éducation pour la santé, en France, 1,7 millions de personnes souffrent de handicap / déficience visuel(le) (soit 2,5% de la population française).

En ce qui concerne les troubles de la vision, voici ce qu’expose l’expertise statistique publique en santé et social de la Drees. En France, 3 personnes sur 4 âgées de plus de 20 ans en souffrent (7 sur 10 portent des lunettes ou lentilles pour les corriger).

Ajoutons à ces chiffres les troubles neurovisuels et les troubles du langage écrit (la dyslexie par exemple), et les autres troubles affectant la lecture… On se retrouve avec énormément de personnes qui sont directement concernées par l’accessibilité des contenus et supports !

Mes documents de référence pour l’accessibilité des contenus

Ici, je vais m’appuyer principalement sur deux documents fondamentaux concernant l’accessibilité visuelle (tu peux retrouver toutes mes sources en bas d’article) :

• La “Web Content Accessibility Guidelines” (WCAG), qu’on peut traduire par “Les directives pour l’accessibilité du contenu Web”
• Les articles de l’association Valentin Haüy, qui défend les droits des personnes aveugles et malvoyantes

Les limites du design inclusif

Avant d’entrer dans le vif du sujet, il me faut te préciser ce point essentiel. Même en appliquant toutes les indications possibles pour rendre tes contenus accessibles, ils ne seront jamais accessibles à 100% de la population. Chaque personne, chaque handicap, chaque trouble est unique : ainsi, tu excluras forcément des personnes à un moment ou à un autre…

Dans cet article, je t’explique des bases très simples à mettre en place, pour en exclure le moins possible. Mais ces bases ont malheureusement leur limite – ce qui ne dispense pas de les appliquer 😉

Pourquoi rendre tes visuels et supports accessibles ?

Par respect pour les personnes handicapées / déficientes visuelles

Parce qu’elles sont bien trop souvent les grandes oubliées dans la création visuelle. Soit par méconnaissance du sujet (auquel cas c’est OK tant qu’on adapte ses supports une fois qu’on sait), soit pour prioriser le design sur les besoins de ces personnes (dans ce cas, autant te dire que ça me hérisse les poils)…

Avoir accès à tout contenu est un droit, et ton devoir est de le rendre accessible ! En tout cas, dans mon monde idéal… En plus, je suis sûre que tes supports sont plein de valeurs, et méritent d’être lus par le plus grand nombre 🙂

Parce que c’est simple de mettre les bases en place !

En fait, il s’agit surtout d’une habitude à prendre. Mais mettre en place des supports accessibles visuellement n’est pas aussi sorcier qu’on peut le penser. En réalité, c’est même simple pour peu que l’on connaisse les bonnes pratiques d’accessibilité de base 🙂

Lorsque mon amie Cécile (consultante accessibilité, SEO et marketing engagé chez Comm’On Access) m’a sensibilisée à tout cet univers, j’avoue que je ne pensais pas que cela coulerait autant de source. Pourtant, aujourd’hui, ça me semble tellement naturel et logique que je ne sais même pas comment j’ai fait pour créer tout ce temps autrement !

La peur de perdre sa créativité

Si tu es graphiste et que tu lis cet article, ou bien que tu as une entreprise et que tu souhaites pouvoir créer librement… Sache que ces bonnes pratiques n’entraveront pas ta créativité : bien au contraire ! Appliquer des pratiques accessibles dans mes créations m’a permis d’y réfléchir autrement, les rendant encore plus uniques et bien plus cohérentes.

C’est une peur qui revient beaucoup quand je parle de ces pratiques à appliquer sur mes réseaux sociaux. Mais la liberté créative n’est absolument pas remise en cause par l’accessibilité. Il ne s’agit pas là d’injonctions, de règles, mais tout simplement de bonnes pratiques à mettre en place pour cesser d’exclure toutes ces belles personnes. 😉

Les couleurs dans le design inclusif

Les contrastes pour gagner en lisibilité

C’est une erreur que je vois très (trop) souvent, même chez des graphistes. Je l’ai moi-même faite pendant longtemps… Il s’agit de veiller au bon contraste des couleurs. J’entends par là, surtout, entre la couleur de tes textes et celle de tes fonds. On oublie le blanc sur fond clair, et le foncé sur fond foncé.

La WCAG a mis en place un système de niveaux des contrastes des couleurs pour vérifier cette accessibilité :

• Niveau A : niveau d’accessibilité minimale
• Niveau AA : niveau d’accessibilité amélioré, plus avancé
• Niveau AAA : niveau d’accessibilité spécifique à certains types de handicaps

Veiller à avoir une palette harmonieuse et éco-responsable

Et puis, il y a aussi la question des éco-couleurs dont le but premier est de réduire l’empreinte environnementale lors de l’impression. Pour ce sujet aussi, j’ai aussi créé un article qui pourra t’aider ! 🙂

Des polices d’écriture accessibles

Les familles de polices d’écriture à privilégier

Certaines familles de polices d’écriture ne sont pas du tout optimales en terme d’accessibilité. La pire en son genre est la famille manuscrite : elle est déjà difficilement lisible quand on a pas de souci visuel, alors imagine un peu quand c’est le cas.

Je te recommande de privilégier les polices Sans Serif (sans empattement) et Serif (avec empattement). Certaines polices Display (qui ne rentrent dans aucune autre famille) peuvent être OK aussi. Si tu ne vois pas de quoi je parle, je t’invite à lire mon article concernant les familles de polices d’écriture 🙂 Cependant, c’est à vérifier au cas par cas. On voit justement ça maintenant !

Les éléments auxquels faire attention lors du choix d’une police

Certains éléments peuvent t’aider à savoir si une police d’écriture est accessible ou non.

• La symétrie des lettres : pour certaines polices, quelques caractères sont parfaitement symétriques, ce qui gêne la lecture. C’est le cas de “q / p” ou “d / b” par exemple. Il faut veiller à ce qu’il y ait un petit élément distinctif pour chacune de ces lettres.
• La distinction nette entre certains caractères : certains caractères sont quasiment identiques pour certaines polices, ce qui, de nouveau, n’est pas accessible. Pour vérifier cela, tu peux comparer les caractères “a / o / O / 0” ou encore “i / L / 1”.
• L’épaisseur des traits : parfois des polices d’écriture sont très belles mais ont des parties beaucoup trop fines dans leurs caractères, veille bien à ce qu’il y ait assez d’épaisseur 🙂
• La largeur des caractères : mieux vaut éviter les polices d’écriture trop compactes ou, au contraire, trop larges. Un entre-deux, c’est l’idéal !
• Les “fioritures” et embellissements : certaines polices proposent des glyphes spéciaux avec des éléments décoratifs. Dans la mesure du possible, mieux vaut ne pas en abuser…

À garder en tête : aucune police n’est à 100% parfaite

Aucune police d’écriture ne pourra contenter 100% des personnes malvoyantes ou ayant un quelconque trouble affectant la lecture. Par exemple, une personne dyslexique n’aura pas les mêmes besoin qu’une personne souffrant de cécité. Le but ici est de trouver non pas la meilleure police d’écriture, mais la moins pire. Opter pour une police plus accessible est déjà un grand pas en avant vers l’inclusivité !

La mise en page de visuels pour un design inclusif

La hiérarchie d’un contenu inclusif

La toute première chose importante en matière d’accessibilité mais aussi en design tout court, c’est de soigner la hiérarchisation de son contenu. Tout contenu doit être logique, avec un titre, éventuellement un sous-titre, et le corps du texte. Ton titre doit être prioritaire sur ton sous-titre, et ce dernier prioritaire sur ton corps de texte. Pour bien les distinguer voici une petite liste de ce que tu peux mettre en place :

• Utiliser des polices d’écriture différentes
• Des couleurs différentes
• Des tailles distinctes
• Et/ou des graisses différentes (épaisseur de ta police de caractères : gras, medium, regular…)
• Toujours veiller à espacer les blocs de texte : un bloc titre/sous-titre/corps de texte ne devra pas être collé à un autre bloc de ce type, il faudra de l’espace entre pour aérer

L’alignement du texte

Ton corps de texte doit toujours être aligné à gauche. Pas centré, pas aligné à droite et pas justifié – sauf s’il s’agit d’un support imprimé, mais pour le web la justification du texte gêne beaucoup trop la lecture. En effet, lorsque le texte est centré, justifié ou aligné à droite, le regard n’a pas de point d’accroche stable pour passer d’une ligne à l’autre. Je sais qu’il est tentant de déroger à ce conseil car on peut ne pas trouver ça harmonieux, mais je t’assure qu’il s’agit juste d’une question d’habitude.

Dans le passé, lorsque je n’avais pas connaissance de toutes ces bonnes pratiques, j’étais une fervente adoratrice du texte centré ou justifié. Quand je suis passée à des textes alignés à gauche, il m’a fallu un bon mois pour m’y habituer ! Mais maintenant, quand je vois des textes qui sont alignés autrement, je grince des dents. Comme quoi, il fallait juste franchir le pas pour me rendre compte de mes erreurs 🙂

L’interlignage et la taille du texte

Concernant la taille de tes textes, veille à ce que ces derniers ne soient pas trop petits. Je te recommande 14px minimum pour une utilisation sur ordinateur, 13px pour une tablette et 12px pour un téléphone. Par exemple, dans cet article, mon corps de texte est à 16px 🙂

Également, un interlignage (espace entre les lignes) trop petit ou au contraire trop grand, dérange respectivement la bonne lecture des textes ou la concentration lors de la lecture. Je te recommande un interligne de 1,5 à 1,8 fois la hauteur de ta ligne (tu as l’option dans tous les logiciels quels qu’ils soient). Cela permettra d’aérer ton texte et de le rendre bien plus inclusif – et lisible !

La casse (majuscules, minuscules), l’italique…

Je vois beaucoup, beaucoup trop souvent, des titres ou sous-titres en majuscules ou en italiques. Je suis désolée de te l’apprendre si c’est ton cas, mais ça ne fait pas partie des bonnes pratiques d’accessibilité…

Les majuscules ont toutes la même hauteur ce qui n’est pas bien lisible pour beaucoup de personnes. L’italique déforme les lettres en les penchant : même conséquence. Je te recommande sincèrement de rester sur des styles de polices droites, avec une casse normale. Un peu comme dans cet article !

La superposition d’éléments

La dernière chose que je pense importante que tu connaisses en terme de mise en page : la superposition de ton texte sur une photo, un motif, des illustrations… est plutôt déconseillée. En tout cas, si tu ne maîtrises pas le graphisme et/ou l’accessibilité, je te conseille de rester sur des fonds unis lorsque ton contenu comporte des textes.