Bienvenue sur cet article ! Je vous 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 votre 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 ou l'apprentissage. Je suis persuadée que votre 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 vous détaille ce qu’est le graphisme inclusif, pourquoi le mettre en place et surtout comment. Bonne lecture !

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 liés à la lecture ou l'apprentissage.

Mettre en place ces bonnes pratiques va peut-être un peu bousculer votre façon de créer vos visuels. Cependant, c’est une question d’habitude et les bases que je vous 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 vous voulez creuser le sujet.

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 et l'apprentissage... On se retrouve avec énormément de personnes qui sont directement concernées par l'accessibilité des contenus et supports !

Ici, je vais m’appuyer principalement sur deux documents fondamentaux concernant l’accessibilité visuelle (vous retrouverez 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

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

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

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 vous dire que ça me hérisse les poils)…

Avoir accès à tout contenu est un droit, et votre devoir est de le rendre accessible ! De plus, je suis sûre que vos supports sont pleins de valeurs, et méritent d’être lus par le plus grand nombre 🙂

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 à ce sujet, 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 !

Si vous êtes graphiste et que vous lisez cet article, ou bien que vous avez une entreprise et que vous souhaitez pouvoir créer librement… Sachez que ces bonnes pratiques n’entraveront pas votre 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 ou dans ma newsletter. 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 rendre sa communication plus responsable et humaine.

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 des textes et celle des fonds. On oublie donc le texte blanc sur fond clair, et le texte foncé sur fond foncé.

Le W3C (World Wide Web Consortium) a créé les WCAG (Web Content Accessibility Guidelines). C'est un ensemble de règles ayant pour but d'aider à rendre les contenus plus accessibles. Parmi elles, on retrouve les règles concernant le niveau de contraste entre deux couleurs, régies selon trois niveaux :

• Niveau A : niveau de conformité le plus bas (déconseillé)
• Niveau AA : niveau de conformité moyen (minimum recommandé)
• Niveau AAA : niveau de conformité le plus élevé (conseillé)

Vous l'aurez compris, l’idéal est de viser le niveau AAA. Le niveau AA est le minimum à appliquer : il s’agit du niveau minimum conseillé pour une utilisation web. Pour calculer ce niveau de conformité, il existe l’outil en ligne Color.review (il faut simplement renseigner les codes couleurs).

Votre palette de couleurs doit être pensée pour son accessibilité, mais aussi pour son harmonie et avec stratégie. Créer une palette de couleurs est tout un art - dont les graphistes sont spécialistes. 

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, j’ai rédigé un article de blog qui pourra vous aider : "Design écologique : une communication responsable avec les éco-couleurs" !

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 n'a pas de souci visuel, et c'est bien pire lorsque c'est le cas.

Je vous 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 vous ne voyez pas de quoi je parle, je vous invite à lire mon article concernant les familles de polices d'écriture. Cependant, c'est à vérifier au cas par cas. On voit justement ça dès à présent !

Certains éléments peuvent vous 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, vous pouvez 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, veillez 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…

Aucune police d’écriture ne pourra être adaptée à 100% des personnes malvoyantes ou ayant un trouble affectant la lecture, l'apprentissage... 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 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. Le titre doit être prioritaire sur le sous-titre, et ce dernier prioritaire sur le corps de texte. Pour bien les distinguer voici une petite liste de ce qu'il est possible de 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 la 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 chacun pour aérer et bien séparer les sections pour plus de clarté

Le 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 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 vous 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 🙂

Concernant la taille de tes textes, veillez à ce que ces derniers ne soient pas trop petits. Je vous 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 vous recommande un interligne de 1,5 à 1,8 fois la hauteur de la ligne (vous pouvez retrouver cette option dans tous les logiciels, quels qu’ils soient). Cela permettra d’aérer votre texte et de le rendre bien plus inclusif - et lisible !

Je vois beaucoup, beaucoup trop souvent, des titres ou sous-titres en majuscules ou en italiques. Ça ne fait pas partie des bonnes pratiques d’accessibilité…

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

Enfin, la superposition de texte sur une photo, un motif, des illustrations… est plutôt déconseillée. En tout cas, si vous ne maîtrisez pas le graphisme et/ou l’accessibilité, je vous conseille de rester sur des fonds unis lorsque votre contenu comporte des textes.