C'est quoi le handicap ? 🩼

Qu'est-ce qu'on entend par handicap ? En consultant ce bon vieux Larousse on a la définition suivante :

Limitation d'activité ou restriction de participation à la vie en société due à une altération des capacités sensorielles, physiques, mentales, cognitives ou psychiques

Concrètement ça veut dire quoi ? 

Concrètement, ça veut dire que sans un petit effort de ta part 18% de la population française ne pourra pas ou difficilement apprécier tes productions créatives. C'est dommage pour une bonne raison ♥️ et une mauvaise 🤢 :

• ♥️ Parce qu'on est des êtres humains bordel de nouilles ♥️. Personnellement, quand je fais une illustration, je veux la partager avec un maximum de monde. Je n'ai aucune envie de mettre des gens de côté. Pas toi ?

• 🤑 Parce que c'est une aberration économique. 🤑 Soyons clairs, dans un monde idéal, le premier point devrait convaincre tout le monde, mais si tu n'es pas "touché" par les problématiques liées au handicap, alors dis-toi que tu es en train de perdre bêtement des prospects…

Comment rendre tes illustrations plus accessibles ?

C'est bien beau tout ça, mais comment peux-tu faire pour rendre tes illustrations/créations plus accessibles 🧐 ? Essaye d’appliquer les 5 principes suivant dans la réalisation de tes productions créatives :

1. Teste tes visuels en simulant des handicaps

Les personnes malvoyantes ou atteintes de daltonisme ont besoin de contrastes forts pour distinguer les formes et les couleurs. Sans contraste, la personne qui regarde ton illustration ne pourra potentiellement rien voir.

Au final, le plus simple est de tester le rendu de ton illustration sur un outil comme Color Oracle. Ce petit outil open source et gratuit te permet de simuler différents handicaps visuels et de savoir si ta production reste lisible.

2. Utilise tant que faire se peut des palettes de couleur accessibles

Combien de fois j'ai fait cette erreur 😤… Lorsque la couleur d'un texte n'est pas assez contrastée avec la couleur de fond, on se retrouve rapidement avec des contenus illisibles. Imagine, tu fais une affiche de concert magnifique, mais tes contrastes sont si peu élevés que le lieu et la date du concert ne sont pas lisibles. Pas très pratique, non ?

Mon copain m'a fait découvrir un petit outil open source gratuit qui s'appelle Color Contrast Analyzer de WebAIM. Soyons honnêtes, l'interface n'est pas très léchée, mais par contre, c'est diablement efficace et pratique.

Tu as aussi des outils comme coolors qui permettent de générer des palettes de couleurs et d’en vérifier l’accessibilité.

3. Ajoute des alternatives textuelles sur tes images porteuses de sens

Une alternative textuelle (son petit nom c'est "alt" 😛) est une description textuelle d'une image ou d'un élément visuel qui permet aux personnes aveugles ou malvoyantes de comprendre le contenu d'une image.

La plupart des solutions web (WordPress, Wix, Instagram…) te permettent d'ajouter une alternative textuelle lorsque tu importes une image. Astreins-toi, lorsque ces dernières sont porteuses de sens, à ajouter une alternative. Ce n'est pas utile quand c'est purement décoratif, par contre 🥳

Tu as du mal à décrire ton image ? Des outils tels que Alt Text Generator de Accessible.org t'aident à générer automatiquement des alternatives textuelles. C'est en anglais, par contre, mais tu peux combiner avec deepl au besoin.

Pendant que j'y pense, les moteurs de recherche comme Google prennent de plus en plus en compte l'accessibilité. Dis-toi qu'en plus de favoriser l'inclusivité, tu favorises ton SEO.

4. Évite d'utiliser des animations complexes et rapides

Les animations trop rapides peuvent poser des problèmes aux personnes atteintes de troubles cognitifs. Attention, je ne dis pas que tu dois t'interdire les animations, mais il vaut mieux rester simple et avoir des animations lentes. En gros, évite de reproduire un spectacle son et lumière quand tu ajoutes des animations sur tes contenus 😛

5. Sélectionne des polices de textes lisibles et ne passe jamais en dessous de 14px

Les personnes atteintes de troubles cognitifs ou de dyslexie peuvent avoir des difficultés à lire certaines polices.

L'avantage, c'est qu'il y a plein de polices libres de droits qui sont lisibles par le plus grand nombre. Open Sans, Montserrat, Roboto, Lato, Source Sans Pro… À noter la pépite Lexend que j'ai découverte en refaisant mon site portfolio. Elle est lisible, adaptée au dyslexique et, par-dessus le marché, magnifique 😍 !

Dans tous les cas ne passe jamais en dessous de 16px minimum sur ordinateur et 14px sur mobile. En résumé, jamais en dessous de 14px c’est horrible de devoir zoomé tout le temps pour lire 🤓

6. Ajoute des sous-titres à tes vidéos

Sans sous-titre, les personnes sourdes et malentendantes vont avoir du mal à comprendre le contenu de ta vidéo. Même quand on a l'oreille fine, avoir des sous-titres peut être très pratique quand, pour une raison x ou y, on ne veut pas avoir le son.

Personnellement, j'use et j'abuse de la fonctionnalité de sous-titrage automatique de YouTube. Il suffit de télécharger la vidéo sur YouTube, d'activer l'option de sous-titrage automatique et YouTube se charge de créer des sous-titres. Ce n'est pas parfait, et il faut corriger certaines phrases, mais ça me fait gagner un temps fou.

À toi de jouer !

C’était un peu long mais j’espère que ça t’aura appris deux trois choses ☺️  

Je suis loin d'être une experte en accessibilité mais rien qu’en appliquant les principes ci-desus je me dis qu’on peut un peu mieux inclure les personnes ayant un handicap.

À bientôt 👋