Design inclusif : définition et guide pour ta création de visuels

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

    Tu l’auras compris, l’idéal est de viser le niveau AAA. Le niveau AA est le minimum à appliquer : il s’agit du niveau légal dans le numérique. Pour t’aider à calculer ce niveau de contraste d’accessibilité, il existe l’outil en ligne color.review qui le fait pour toi, simplement en renseignant tes codes couleurs 🙂

    Veiller à avoir une palette harmonieuse et éco-responsable

    Ne perds pas de vue que ta palette de couleurs doit être pensée pour son accessibilité, mais aussi pour son harmonie. Créer une palette de couleurs est tout un art – dont les graphistes sont spécialistes. Si tu n’as pas les moyens de faire appel à une graphiste, je t’ai rédigé un article recensant 15 outils pour créer ta palette.

    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.

        Pour résumer…

        Voici la checklist que tu peux t’écrire de côté : 

        • Le contraste des couleurs entre le fond et le texte doit au minimum avoir le niveau AA
        • Une famille de police d’écriture Sans Serif est l’idéal, mais les Serif peuvent convenir dans certains cas
        • Les lettres ne doivent pas être parfaitement symétriques (”q / p” ou “d / b”)
        • Les caractères doivent être bien distincts les uns des autres (”a / o / O / 0” ou “i / L / 1”)
        • Les textes doivent être alignés à gauche, pas centrés, ni justifiés (sauf pour l’impression), ni alignés à droite
        • La taille de ton texte doit idéalement être de 14px minimum sur ordinateur, 13px sur tablette et 12px sur téléphone
        • L’interlignage doit être de 1,5 fois la hauteur des lignes minimum, je recommande jusqu’à 1,8 fois
        • Idéalement, il faut éviter les majuscules à chaque lettre et l’italique trop récurrent
        • Le contenu doit avoir une hiérarchie claire : titre, sous-titre et corps de texte (à adapter selon le cas) bien distincts
        • Mieux vaut éviter de superposer du texte sur des images, motifs ou illustrations au risque de compromettre la lisibilité

         

        Si tu appliques ces pratiques, tu feras déjà un énorme pas en avant vers l’accessibilité de tes contenus. Bien plus grand que 10% des contenus en ligne, par exemple, qui eux ne le sont pas !

        Si le cœur t’en dit, écris-moi en commentaire si tu comptes adapter tes visuels / supports suite à la lecture de cet article ! 🙂

        J’espère que cet article t’aura été utile et t’aura permis de découvrir le design inclusif, l’accessibilité visuelle, et les bonnes pratiques à mettre en place.

        Tu aimerais échanger avec moi à propos de ton projet, de mes services d’identité visuelle ?

        L’article t’a plu ? Épingle-le sur Pinterest !

        Épingle Pinterest pour l'article de blog "L'importance des symboliques dans ton identité visuelle"

        Les sources et les liens pour aller plus loin

        1. Quelques chiffres sur la déficience visuelle (Fédération des Aveugles de France) – Article en ligne
        2. Informer les personnes aveugles ou malvoyantes – Partage d’expériences (Institut national de prévention et d’éducation pour la santé, sous la direction de Cécile Allaire) – Document PDF à télécharger
        3. Troubles de la vision : sept adultes sur dix portent des lunettes (expertise statistique publique en santé et social de la Drees) – Article en ligne
        4. Règles pour l’accessibilité des contenus Web (WCAG) (W3C Web Accessibility Initiative (WAI)) – Page en ligne
        5. A Simple Guide to the Expected Outcomes of WCAG 2.0 (accessibility-services.co.uk) – Article en ligne
        6. Guide des recommandations pour documents accessibles (Ville de Niort – Mission accessibilité-inclusion et Université de Poitiers) – Document PDF à télécharger
        7. Accessibilité des documents texte (Association Valentin Haüy) – Article en ligne
        8. Accessibilité & Adaptabilité des Ressources Numériques pour l’École (A2RNE) – Recommandations (Ministère de l’Éducation Nationale) – Document PDF à télécharger
        9. Typographie et accessibilité (CoLibre – Licence Pro Métiers de la Communication) – Article en ligne
        10. Lisible : Comprendre la règle 3.1 (W3C Web Accessibility Initiative (WAI)) – Page en ligne

        Jade

        Je suis graphiste spécialiste en identité visuelle. Je travaille avec des entreprises et associations au service des Animaux, de la Nature et de l’Humain. Je propose également des formations en ligne pour les graphistes travaillant avec passion !

        Demande ton accès à la bibliothèque de ressources

        Reçois gratuitement ton guide pour découvrir ce que sont les éco-couleurs et comment les utiliser, à partir d’un nuancier entièrement créé par mes soins. Tu retrouveras également l’accès à un espace Notion contenant plus de 100 ressources régulièrement mises à jour, en lien avec l’identité visuelle, l’éco-conception graphique et l’accessibilité visuelle.

        En t’inscrivant à la newsletter, tu recevras (sans spam, promis !) des conseils, ressources, et contenus en avant-première.

        0 commentaires

        Soumettre un commentaire

        Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

        Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

        Dear Sunflower

        Studio graphique engagé

        Moi, c’est Jade ! Je travaille avec les marques souhaitant apporter une différence en notre monde, dans le respect de la faune et de la flore.

        Mon approche est polyvalente (identité visuelle, supports de communication, packaging…) et trouve ses racines dans l’éco-conception, l’inclusion et la co-création.