Comment rendre les supports multimédias accessibles à tous ?

Emmanuelle ABOAF

Eqal – 26 juillet 2022

Sous-titrage des vidéos

Pour qui ?

  • 6 millions de personnes sourdes et malentendantes
  • Personnes âgées
  • Et le reste de la population !

Ce qu'il ne faut pas voir...

Sous-titrage noir avec un diaporama contenant des textes en arrière plan : les sous-titres et le texte du diaporama se superposent
Sous-titrage blanc avec un arrière-plan blanc : on ne voit pas les sous-titres
Sous-titrage bleu sur un tee-shirt bleu et gris : on ne voit pas les sous-titres
Sous-titrage rouge en majuscule : on voit à peine les sous-titres et on a l'impression de se faire crier dessus
Sous-titrage blanc avec une taille de police très petite : on ne peut pas lire les sous-titres
Sous-titrage blanc avec un fond transparent noir sur 4 lignes et qui remplit la moitié de l'écran : on ne voit pas le diaporama derrière et on n'a pas le temps de tout lire
Sous-titrage bleu avec un fond bleu sur 4 lignes : on n'a pas le temps de tout lire
Sous-titrage blanc avec un fond rouge flashy sur 3 lignes : on n'arrive pas à lire tellement la couleur rouge flashy fait mal aux yeux
Sous-titrage vert avec un fond blanc flashy : on n'arrive pas à lire tellement la couleur blanche flashy fait mal aux yeux

Une solution de format

Un sous-titrage blanc avec un fond noir ou un fond noir transparent avec une opacité minimum à 30% :

  • donne une meilleure visibilité pour tous
  • convient à tout contenu de vidéo
  • est adapté aux personnes sourdes ushers ou aux personnes daltoniennes
image contenant pleins de nuages blancs avec un sous-titre blanc avec un fond transparent noir pour mieux voir

Un exemple de vidéo avec
le sous-titrage automatique

Vous pouvez corriger le sous-titrage automatique s'il s'agit de votre vidéo. Il existe également une fonctionnalité de YouTube, Subtitle Editor (EN), qui permet de donner des droits aux utilisateurs que vous avez choisis qu’ils puissent vous aider à sous-titrer vos vidéos.

Trois solutions
pour sous-titrer une vidéo

Faire sous-titrer

On peut demander à des professionnels de sous-titrage (comme Authôt par exemple) de réaliser le sous-titrage de sa vidéo. Evidemment, c'est payant mais la qualité est là.

Sous-titrer soi-même

On est toujours mieux servi que par soi-même pour sous-titrer une vidéo. Des logiciels de sous-titrage existent : Workshop Subtitles, Aegisub ou autre logiciel.
Seul incovénient : cela prend du temps car il faut sous-titrer ET ensuite synchroniser les sous-titres.

Machine + Humain

On peut utiliser le sous-titrage automatique de l'IA et ensuite le corriger soi-même.
L'avantage est que la synchronisation des sous-titres est faite.
Exemple : Youtube.

En résumé

pour que les sous-titres soient parfaits

  • Sous-titrer soi-même.
  • Ne pas utiliser uniquement le sous-titrage automatique et toujours le corriger.
  • Ne pas faire de fautes d'orthographe, de grammaire ou de conjugaison.
  • Respecter le format de couleur : couleur blanc avec un fond (transparent) noir.
  • Faire attention à la taille de la police et à la police : faire en sorte qu'ils soient lisibles pour tous.
  • Sous-titrer toujours sur deux lignes maximum.

Comment sous-titrer vos vidéos et vos podcasts et avec quels outils ?

Les bonnes pratiques du sous-titrage

Description des images

Pour qui et pourquoi ? 1,2 million de personnes aveugles et malvoyantes

Description des images (1/2)

Twitter

Cliquer sur le bouton "ALT"

En bas de l'image, il y a un bouton nommé ALT

Ecrire un texte alternatif

Sous l'image, on décrit l'image. Il est écrit Fresque street art de Wonderwoman enlaçant un petit enfant.

Activer l’option « activer le rappel de la description de l’image »

Capture d’écran des paramètres d’accessibilité de Twitter Catégorie Animations : - Réduire les animations non coché - Limite le nombre d’animations au sein de l’application, notamment les transitions entre écrans et le décompte des engagements en direct - Lecture automatique des vidéos sélectionnée sur « jamais » Catégorie Médias : - Activer le rappel de la description d’image coché - Recevez un rappel vous invitant à ajouter des descriptions d’image si elles manquent dans un Tweet. En savoir plus sur l’accessibilité sur Twitter Catégorie Navigation Web : - Ouvrir les liens en mode lecture non coché - Modifiez la taille, le contraste et la mise en page des sites pour améliorer la lisibilité N’oubliez pas d’ajouter une description. Il semble que votre image n’a pas de description. Les bonnes descriptions sont succinctes mais détaillées, et résument ou intègrent le texte figurant dans l’image. Bouton Ajouter une description Bouton Pas pour l’instant

Description des images (2/2)

Linkedin

Modifier votre photo. Texte alternatif Le texte alternatif décrit les images pour les personnes qui pourraient avoir des difficultés à les voir. Si vous n’ajoutez pas de texte alternatif, celui-ci peut être généré automatiquement après votre post. Vous pouvez le modifier à tout moment. Rédigez une description de cette photo pour les personnes qui pourraient avoir des difficultés à la voir

Instagram

Paramètres avancés Desactiver les commentaires non coché Préférences Partager vos publications sur Facebook non coché Audience Facebook : Amis sélectionné Accessibilité Bouton Ecrire un texte alternatif Le texte alternatif décrit vos photos pour les personnes ayant une déficience visuelle, il est généré automatiquement pour vos photos, mais vous pouvez choisir de l'écrire vous même. Contenu de marque Ajouter une mention Paraternariat rémunéré non coché Ecran Texte alternatif avec 4 photos à décrire

WordPress

Ecriture des messages
dans les réseaux sociaux

Ce qu'il ne faut surtout pas faire

Ce que dit le lecteur d'écran : « U P 3 siuz »

Ce que dit le lecteur d'écran :

« Vous trouvez ça m de ronde lettre i de ronde lettre g de ronde lettre n de ronde lettre o de ronde lettre n de ronde lettre d'écrire vos tweets et symbole de parking groupe sanguin O comme ça. Mais avez-vous déjà latin small letter e latin small letter n latin small letter tlatin small letter elatin small letter nlatin small letter dlatin small letter u ce que ça D O N N E avec des technologies d'assistance comme sigmeodao ? »

Ecriture inclusive

Exemple de texte rédigé

Toutes les catégories de citoyen.ne.s étaient représenté.e.s puisque l'on rencontrait des préfet.ète.s, des sénateur.rice.s, des ambassadeur.rice.s, des conseiller.ère.s municipaux.ales, des éducateur.rice.s, des chroniqueur.euse.s sportif.ive.s.
On croisait également des avocat.e.s commis.e.s d'office, des assistant.e.s administratif.ive.s retraité.e.s, des artisan.e.s reconverti.e.s en banquier.ère.s.

Ecouter la restitution vocale

Article à lire : Ecriture inclusive et accessibilité font-elles bon ménage ?

Consulter deux fils (threads) consacrés aux problèmes d'accessibilité numérique : Fil n°1 et Fil n°2.

Accessibilité des fichiers PDF

Réactions des utilisateurs de lecteur d'écran

concernant l'accessibilité des documents PDF

Pourquoi ?

PDF contenant une image on un document numérisé

Il est impossible de lire, grossir, sélectionner le contenu du document et de faire une recherche de texte dans ce document.

PDF protégés

Le lecteur d'écran ne peut pas lire le document protégé à cause de la propriété « Accessibilité au contenu activée » paramétrée par défaut sur « non autorisé ».

PDF n'ayant aucune structure

Si le document n'est pas balisé, le lecteur d'écran :

  • ne vocalise pas le texte dans le bon ordre
  • vocalise très mal à cause d'une police non conforme
  • ne peut pas naviguer d'un chapitre à l'autre.

Source : PDF et accessibilité : la fausse bonne idée

Trois solutions

pour rendre le document accessible

  • Mettre à disposition, en plus du fichier PDF, un fichier de traitement de texte (en format odt. ou .docx) structurée.
    • Pour s'assurer que le document soit structurée, vous avez l'option "Vérifier l'accessibilité" dans la catégorie "Révision" sur les dernières versions récentes d'Office. Vérificateur d'accessibilité. Résultats de l'inspection : aucun problème d'accessibilité n'a été détecté. Les personnes atteintes d'un handicap ne devrait avoir aucune difficulté à lire ce document
  • Rendre le fichier PDF accessible avec Adobe Acrobat Pro ou InDesign (logiciels payants)
  • Réaliser le document en format HTML en implémentant l'accessibilité numérique avec une feuille de style CSS pour l'impression PDF (CSS print)

Merci !

Retrouvez ma présentation :
https://emma11y.github.io/a11y-medias-2022/