Les réseaux sociaux prennent une place de plus en plus importante au sein même de notre activité culturelle : nous les utilisons pour annoncer nos évènements, pour montrer la vie de notre structure...
Que ce soit par Twitter, Instagram ou encore LinkedIn, une partie de notre public se tient informée de notre programmation à travers ces réseaux.
Voici quelques conseils pour rendre le contenu de vos posts plus accessibles.

• Les hashtags #

Parmi les exemples suivants, quel hashtag est le plus facile à lire ?

• #lessciencescesttropgénial ?
• #LesSciencesCestTropGénial ?

Je parie que la lecture du second a été plus fluide !

Cette façon d'écrire est appelée Camel Case, en référence aux bosses des chameaux. Chaque mot commence par une majuscule afin de faciliter la lecture, aussi bien pour les personnes qui lisent le hashtag que pour les lecteurs d'écran.

Sans majuscule, l'interprétation de certains hashtags peut être différente : par exemple, le hashtag #blacklivesmatter est prononcé par les lecteurs d’écran “black live (le verbe) smatter”.
Bonne nouvelle pour le référencement : les majuscules n’impactent en rien l’indexation des hashtags !

• Les textes alternatifs des images

Imaginez... vous êtes sur les réseaux sociaux et vous tombez sur un post avec une image et le texte "INCROYABLE !!! Vous avez déjà vu quelque chose d'aussi fou ?". Vous trouvez également une tonne de commentaires en dessous, aussi ébahis qu'enthousiastes. Pourtant, vous, vous ne comprenez pas de quoi parlent toutes ces personnes, car à la place de l'image, vous ne voyez qu'un écran noir, complètement vide.
Même chose sur un autre post, où un·e artiste que vous suivez partage une image avec, en texte, "Lancement de notre tout nouvel évènement ! Qui vient ?". Vous avez très envie d'y aller, mais "visiblement", toutes les informations utiles comme le lieu, la date, etc... se trouvent dans l'image que vous ne pouvez pas voir.

Frustrant, n'est-ce pas ?

Et bien c'est ce que ressentent toutes les personnes qui n'ont pas accès aux images (car malvoyantes, aveugles...) quand elles tombent sur une image sans texte alternatif.

Le texte alternatif permet de rendre accessible une image aux personnes qui utilisent un lecteur d'écran. Il décrit le contenu textuel et visuel de l’image. Vous pouvez l'ajouter sur tous les réseaux sociaux (Twitter, Instagram...), mais également pour les images des sites internets, des newsletters, etc...
 

Quelques conseils pour rédiger votre texte alternatif :

• Privilégiez concision et précision : il faut se centrer sur les informations nécessaires à la bonne compréhension par une personne déficiente visuelle
• Si du texte est inclus dans l’image, ajoutez le texte dans la description
• Ne pas commencez la description par « image de » car l’image est détectée comme telle par les aides techniques
• Si une description d'image et une légende sont renseignées, évitez le plus possible les redondances
• Si l'image n'a qu'un but décoratif, indiquez-le dans le texte alternatif !

Pour ne pas oublier de mettre le texte alternatif, certains réseaux sociaux vous proposent différentes astuces :

• Twitter : vous pouvez activer une option pour recevoir une alerte à chaque fois que vous êtes sur le point de publier une image sans texte alternatif (plus d’informations sur ce lien)
• Instagram : vous pouvez ajouter un texte alternatif à un post déjà posté (exemple sur ce lien)

Exemple de texte alternatif :
Une petite fille souffle sur un moulin à vent qu'elle a fabriqué

A éviter : Enfant moulin vent

A ne pas faire : /

• Les images contenant du texte

Le texte alternatif, c'est pratique, mais ça ne fait pas tout ! Tout d'abord, tout le monde n'a pas forcément accès à un lecteur d'écran. Il y a également de nombreux paramètres qui peuvent rendre les images illisibles : contrastes insuffisants, typographies trop complexes, animations sur l'image qui déconcentre...
Bien entendu, il est toujours possible de mettre des images avec du texte. Il faut juste garder quelques points à l'esprit :

• Avoir un contraste suffisant : vous pouvez le vérifier sur des sites comme Adobe Color par exemple
• Mettre des typographies simples, sans empattement, type Open Sans, Roboto,...
• Éviter les textes soulignés (hors lien html), en italique ou tout en majuscules.

Exemple de l'outil Adobe Color pour le contraste : dans cet exemple, le contraste est suffisant pour des textes de 18pt ou plus et pour des icônes, mais insuffisant pour des textes de 17pt et moins.

Exemple de l'outil Adobe Color adapté à la vision daltonienne : dans cet exemple, deux des couleurs choisies ne sont pas différenciables pour les personnes daltoniennes de type deutéranopie (défaut de perception de la couleur verte).

Malgré une image qui a été conçue avec tous ces points de vigilance, elle peut ne pas être lisible pour d'autres raisons : problèmes de connexion qui empêchent le chargement correct de l'image, image détectée comme contenant du contenu sensible et qui est masquée par défaut...

La solution la plus efficace pour éviter ces problèmes d'images illisibles est d'utiliser la description du post : tous les éléments essentiels du texte présent sur l'image doivent se retrouver dans le post pour être sûr·e que tout le monde ait accès aux informations.
Il existe plusieurs façons de faire en fonction du post, mais aussi du réseau social sur lequel vous êtes :

• La plus rapide : copier/coller le texte des visuels et l'utiliser sans modification comme description. On peut introduire ce texte par [transcription].
• Reformuler le texte présent sur les visuels tout en gardant le sens exact, mais on peut simplifier avec des listes à puce, expliciter des diagrammes...
• Ajouter une description en fin de post, introduit par [Description d’image : slide 1 “texte”...]
• Ajouter le texte des visuels en commentaires, en précisant dans le post [Description dans les commentaires]. Cela peut notamment être utile pour les carrousels longs.

Le plus important est qu’il n’y ait pas de perte d’informations entre le visuel et la description.

• Les emojis

Vous êtes-vous déjà demandé·e quelle est la traduction vocale des émojis ?

Par exemple, ce smiley est lu “visage avec un large sourire et les yeux rieurs avec une goutte de sueur”.

Autant vous dire que cela coupe légèrement la lecture si ces emojis sont nombreux et situés en plein milieu du texte !

Même chose pour les emojis qui remplacent les tirets en début de phrase : ça peut avoir un aspect esthétique, mais côté pratique... Dans le post suivant, la synthèse vocale va prononcer trois fois « main avec index pointant à droite » à chaque début de phrase : la lecture est tout de suite plus "fluide", n'est-ce pas ?

Les emojis sont très bien pour dynamiser des textes. Pour autant, ils peuvent casser le rythme et complexifier la lecture, car ils viennent parfois capter l'attention au détriment du texte.

L’objectif n’est pas de les éliminer, mais de les utiliser avec parcimonie pour accrocher le regard sur des informations réellement utiles et à retenir. "En fin de ligne" est l'emplacement le plus sûr, suivi de près par "au niveau des informations les plus importantes".

• Rédaction des textes

Pour la justification du texte, rien ne vaut le traditionnel alignement à gauche. Classique, mais efficace ! Grâce à lui :

• toutes les lignes commencent au même endroit (contrairement à la justification centrée),
• les écarts entre les mots restent le même (à l'inverse du justifié).

Bien sûr, on peut varier cette justification pour des titres ou des phrases très courtes, mais dès que le texte dépasse les 3-4 lignes, une justification à gauche sera beaucoup plus agréable et facile à lire. C'est bénéfique pour tout le monde, mais encore plus aux personnes qui ont des difficultés à lire, comme les personnes dyslexiques par exemple.

Toujours dans cet esprit de "simple, mais efficace", les textes soulignés (sauf pour les liens html), en italique ou tout en majuscules sont à éviter le plus possible.
Et pour faciliter la lecture, aussi bien par une personne que par un lecteur d'écran, les accents sur les majuscules sont très importants ! Sur la plupart des mobiles, il suffit de maintenir le doigt sur la lettre à accentuer pour pouvoir mettre le bon caractère.

• Les vidéos

Le dernier conseil peut sembler enfoncer des portes ouvertes, mais il reste essentiel: toutes les vidéos doivent avoir des sous-titres et si possible une transcription.
Ces sous-titres sont de plus en plus utilisés, notamment par des personnes qui regardent les vidéos sans le son dans des transports en commun, des salles d'attentes... et bien évidemment, par les personnes malentendantes et sourdes.

Pour faciliter l'écriture de ces sous-titres, voici deux astuces :

• YouTube permet de générer automatiquement des sous-titres : il suffit ensuite de télécharger le document ".SRT" via YouTube.
• Pour les réseaux sociaux ne générant pas de sous-titres automatiques, il existe des outils comme MixCaptions (AppStore) ou AutoCap (GooglePlay).

Cette génération automatique de sous-titres fait gagner beaucoup de temps, mais une relecture reste indispensable pour corriger les fautes et les mécompréhensions du logiciel !

Si vous souhaitez plus d'informations à ce sujet, je vous invite à consulter les sources de ce billet :

• Penser le numérique pour le handicap : les bonnes pratiques : https://www.numerama.com/politique/205841-penser-le-numerique-pour-le-handicap-les-bonnes-pratiques.html
• Newsletter Résonnance : https://bleurenardstudio.notion.site/4-Am-liorer-l-accessibilit-et-l-inclusivit-de-tes-contenus-en-11-actions-efficaces-08fd1b0e3e874e5899ef744142428063
• Association Valentin Haüy : https://www.avh.asso.fr/fr/favoriser-laccessibilite/accessibilite-numerique/accessibilite-internet/reseaux-sociaux
• Accessibilité numérique Orange : https://a11y-guidelines.orange.com/fr/contenu-et-communication/reseaux-sociaux/
• Tech-Lab Ineat : https://blog.ineat-group.com/2021/11/laccessibilite-web-et-les-reseaux-sociaux

Alors, prêt·e à rendre le net plus accessible ?
 D'ici là, je vous souhaite une belle journée curieuse !

Merci beaucoup d'avoir lu ce premier billet sur la thématique de l'inclusion ! J'espère que cela vous a plu/intéressé.

Connaissez-vous d'autres astuces ou outils pour rendre les réseaux sociaux plus accessibles ?