Aller au contenu

AccessibilitĂ© et graphisme, les clefs 🔍

Illustration de présentation de l'article sur le graphisme accessible

Par dĂ©finition, le graphisme favorise l’accessibilitĂ©. Le travail du. de la graphiste est de rendre un message plus clair, plus assimilable grĂące Ă  des Ă©lĂ©ments visuels et de notions sĂ©mantiques prĂ©cises. 

Aujourd’hui, je vais vous parler de quelques techniques qui permettent de rendre un projet graphique accessible au plus grand nombre : personnes atteintes de dĂ©ficiences visuelles, auditives ou cognitives. En effet, chaque individu est en droit d’avoir accĂšs Ă  une expĂ©rience adaptĂ©e Ă  ses besoins.

AccessibilitĂ© et graphisme, OUI, c’est possible !

1- Bien structurer son projet graphique :

Exemple de mise en page et de structure permettant de créer une lecture instinctive. Hiérarchie, mise en avant, grille...
Exemple de lecture instinctive.

Utiliser une grille de mise en page pour structurer votre contenu.

Que ce soit sur un support imprimĂ© ou un support digital, utiliser une grille de mise en page (ensembles de repĂšres qui aident le. la graphiste / webdesigner dans son travail de composition), va permettre de crĂ©er une cohĂ©rence visuelle et une structure visuelle. Celle-ci va apporter du confort de lecture et de la facilitĂ© d’apprĂ©hension et de comprĂ©hension des informations.

Hiérarchiser vos éléments textuels et graphiques.

Chaque document, qu’il s’agisse d’un site web, d’un catalogue ou d’une simple lettre, doit contenir une hiĂ©rarchie. Quel Ă©lĂ©ment dois-je voir et lire en premier pour comprendre facilement le texte, ce que je dois faire, comment 
 ? GrĂące Ă  des principes de mise en page, tels que la lecture en Z (spontanĂ©itĂ© de lecture dans les pays occidentaux) et la mise en valeur des Ă©lĂ©ments importants (titres plus gros, blocs visuels, gris typographiques
), un chemin de lecture se dessinera automatiquement pour une comprĂ©hension optimale.

Jouer avec le vide, pour augmenter l’attrait vers le plein.

SpontanĂ©ment, votre Ɠil sera toujours attirĂ© par le vide, faĂźtes le test ! C’est pourquoi il est trĂšs important de savoir s’en servir Ă  bon escient. 

Une bonne utilisation du vide dans une mise en page graphique permettra d’amĂ©liorer encore une fois la comprĂ©hension du document. Ce vide permettra de crĂ©er des dĂ©marcations entre chaque Ă©lĂ©ment graphique ou textuel. Autre atout du vide, il permet d’apaiser l’esprit et d’augmenter la concentration et donc, la comprĂ©hension.

2- Une bonne perception des éléments graphiques :

Deux exemples de choix de couleurs : un avec les contrastes suffisants, un avec un contraste trop peu élevé, donc illisible.
Exemples de choix de couleurs et de contrastes.

Les jeux de couleurs et de contrastes.

Toutes les personnes ne voient pas les mĂȘmes couleurs, les mĂȘmes contrastes.

Le daltonisme est l’exemple parfait d’une anomalie de perception des couleurs qui peut entraĂźner de gros problĂšmes de lisibilitĂ© des documents. Le test d’Ishihara confirme Ă  lui seul, les difficultĂ©s que peuvent engendrer un mauvais choix de couleurs.

Le daltonisme n’est qu’un exemple, mais toutes les dĂ©ficiences visuelles peuvent plus ou moins toucher la lisibilitĂ© des documents.

C’est pourquoi le choix des couleurs et des contrastes est primordial. 

En rĂšgle gĂ©nĂ©rale, selon la norme d’accessibilitĂ© web WCAG, il faut Ă  minima un contraste de 45 % (pour la norme AA) tout en favorisant au maximum un contraste supĂ©rieur Ă  70 % (norme AAA). Outre les contrastes, le choix des couleurs peut aussi ĂȘtre adaptĂ© Ă  la vision daltonienne. L’outil sur l’accessibilitĂ© d’Adobe Color est d’ailleurs idĂ©al pour vĂ©rifier l’ensemble de ces paramĂštres.

Sans outil particulier il est nĂ©anmoins possible de ne pas/peu se tromper. On peut, par exemple, choisir des couleurs complĂ©mentaires (contraste maximal) et en passant son document en niveaux de gris (cf visuel ci-dessus) ; si des Ă©lĂ©ments disparaissent ou ne se voient plus convenablement, c’est que vos contrastes sont trop faibles.

Des caractĂšres lisibles.

Il ne suffit pas d’avoir de belles couleurs pour avoir un document lisible et comprĂ©hensible. Le choix et l’utilisation des typographies (ou polices d’écritures) sont Ă©galement Ă  prendre en compte. Une typographie manuscrite sera par exemple illisible dans le cas d’une toute petite taille et ça sans dĂ©ficience visuelle. Imaginez avec !

Pour un paragraphe, il est important de choisir une police de caractĂšres oĂč le « plein » et le « vide » sont Ă©quilibrĂ©s. (On parle aussi de trait et contreforme.) Pour cela, on privilĂ©giera donc, un texte en “regular” plutĂŽt qu’un texte en “gras” ou en “light”.

Un autre facteur Ă  prendre en compte sera la hauteur d’x (rapport entre la taille des minuscules et des capitales d’une typographie). Plus la hauteur d’x est Ă©levĂ©e, plus la typographie sera lisible.

La lisibilité du texte.

Une fois notre typographie optimale trouvĂ©e, quelques rĂšgles de mise en page des textes sont Ă  privilĂ©gier pour ne pas annuler sa lisibilitĂ©. 

On va alors privilĂ©gier des colonnes, ni trop larges (au risque de fatiguer l’Ɠil trop rapidement), ni trop courtes (qui risqueraient de trop couper les phrases, les mots et de favoriser la difficultĂ© de lecture, ni trop longues (de trop gros paragraphes de textes peuvent ĂȘtre difficiles Ă  lire pour les personnes dyslexiques par exemples). 

Les divers Ă©quilibres d’espacements sont aussi trĂšs importants. Avec un interlignage trop serrĂ©, les jambages et hampes des caractĂšres “hauts” (p,j,f,l
) se chevaucheront et le texte sera peu lisible. Sur un interlettrage trop grand, les lettres “flotteront” et les mots seront moins facilement identifiables. 

Pour obtenir un paragraphe au summum de sa lisibilitĂ©, l’alignement des textes est Ă©galement important :

Le texte centrĂ© ou alignĂ© Ă  droite compliquent la lecture. L’Ɠil, a, en effet, besoin d’un “point de dĂ©part” pour chaque nouvelle ligne. En impression, on utilisera donc, plus largement, un texte justifiĂ© (Ă  condition qu’il soit bien “fait” et qu’il n’y ai pas de grands espaces entre les mots) ou un alignement Ă  gauche. En digital, l’alignement Ă  gauche, offre la meilleure option de lecture, grĂące Ă  sa barre visuelle en dĂ©but de colonne.

DerniĂšre chose, et non des moindres, on laissera le fond du paragraphe uni pour ne pas interfĂ©rer la lecture avec d’autres Ă©lĂ©ments graphiques.

3- L’accessibilitĂ© “autour” du graphisme : les indispensables :

Pour finir, je vais vous parler des “astuces” complĂ©mentaires au graphisme pour faciliter la comprĂ©hension et l’accessibilitĂ© de vos documents :

  • Remplir convenablement les balises “alt” de toutes vos images, c’est long, mais trĂšs utile pour que les personnes dĂ©ficientes visuelles, puissent dĂ©crypter vos images grĂące aux “lecteurs d’écrans”, et c’est bon pour le SEO.
  • Offrir une transcription textuelle (ou sous-titrages) de tous vos contenus audio / vidĂ©o pour les personnes malentendantes.
  • Utiliser du vocabulaire simple et/ou donner les dĂ©finitions des termes trop complexes.
  • Penser Ă  l’utilisabilitĂ© de votre support : 

Pour le digital, pensez Ă  intĂ©grer des boutons et des zones cliquables assez grosses pour ĂȘtre facilement activĂ©es par des personnes atteintes de dĂ©ficiences visuelles, neurologiques ou moteurs (DMLA, parkinson, SEP
). Au mĂȘme titre, toutes les fonctions d’un site web accessible doivent ĂȘtre utilisables Ă  l’aide d’un clavier. 

Pour les documents imprimĂ©s, le choix des supports est trĂšs important (cf visuel ci-dessous) : choisir un papier mat ou non couchĂ© et une teinte plus chaude limitera la surbrillance et facilitera la lecture des textes. Enfin, il ne faut pas omettre la façon dont va ĂȘtre tenu le document, un livret spirale, par exemple, pourra facilement ĂȘtre posĂ© Ă  plat au besoin.

Preuve par l'image, qu'un choix de papier peut ĂȘtre dĂ©terminant pour la lisibilitĂ©. Papier mat vs papier brillant.
Exemple de l’importance du choix du support : finition semi-mat VS finition brillant

Vous avez dĂ©couvert ou redĂ©couvert une liste non exhaustive des solutions pour inclure l’accessibilitĂ© dans vos documents. Bien Ă©videmment, chaque projet est unique et doit ĂȘtre rĂ©flĂ©chi en fonction de son but, de sa cible
 Comme dans chaque projet, la rĂ©flexion en amont sera le maĂźtre mot d’un projet graphique accessible.

Vous voyez, mixer accessibilitĂ© et graphisme, c’est pas si compliquĂ© !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.