Ce que j’ai appris en travaillant sur l’accessibilité de mes vidéos pour le Web

le 13 juin 2017

Édition numérique, Web

Aujourd’hui, je souhaite parler accessibilité vidéo sur le Web, et dans l’édition numérique. Je ne me présente pas en tant que spécialiste de l’accessibilité, plutôt en tant que newbie essayant de trouver un processus de travail efficace et réaliste pour mes productions vidéo. Cet article n’a donc pas vocation à être exhaustif, et soulève probablement plus de questions qu’il n’en résout, mais je souhaitais organiser les notes que j’ai prises sur le sujet depuis environ deux ans.

J’ai en effet ces dernières années eu l’opportunité, dans mon travail quotidien ou lors de projets personnels, de produire plusieurs interviews, reportages et publicités vidéos pour le Web. Durant ces projets, j’ai essayé, tant que possible – contraintes budgétaires et manque de temps obligent – d’améliorer l’accessibilité de mes productions. Voici mes réflexions sur le sujet.

Quelques ressources

Une fois n’est pas coutume, je vais commencer par livrer les ressources qui m’ont permis de me renseigner sur l’accessibilité vidéo, et plus particulièrement sur le sous-titrage, que j’aborde longuement dans cet article. Je ne vais pas revenir sur les bonnes pratiques de l’accessibilité vidéo, d’autres l’ont fait beaucoup mieux que moi. Mon article consiste plutôt en un retour d’expérience sur le sujet.

  1. Liste bonnes pratiques sous-titrage web : ma première et principale « source d’inspiration », qui réunit de manière claire et concise les bonnes pratiques pour sous-titrer correctement ses vidéos.
  2. Accessibilité des vidéos sur le web : les sous-titres : une liste d’articles, ressources, témoignages, outils et conférences sur l’accessibilité vidéo, et donc le sous-titrage.

Montage & accessibilité vidéo

La première étape du travail d’accessibilité vidéo doit s’effectuer dès le montage. Pour commencer, prévoir les synthés & autres habillages en gardant en tête que le sous-titrage pourra être déclenché par l’audience à tout moment. Hors, le sous-titrage vient souvent se placer en bas de la vidéo, le texte étant centré la plupart du temps. Attention donc à placer les textes et informations importantes en conséquence, c’est à dire ailleurs qu’en bas de la vidéo.

Difficile en effet de faire de la « rétro-accessibilité » – oui, j’invente des mots. Sur une vidéo montée sans ces principes en tête & déjà uploadée sur Youtube/Vimeo/etc., ne restent que deux possibilités :

  1. Accepter que la transcription/le sous-titrage masque les synthés de la vidéo, qui peuvent pourtant contenir daes informations importantes, comme les questions à l’interviewé·e (exemple ici) ;
  2. Désynchroniser le sous-titrage/la transcription par rapport au son de la vidéo, pour éviter de masquer les synthés.
Transfert#6 au Virgin Megastore – Screenshot interview

Exemple de synthé masqué par le sous-titrage.

Ces deux cas ne sont évidemment pas de bonnes solutions, c’est pourquoi il est préférable de réfléchir à ces questions dès le début de la production de nos vidéos. Pour mon usage personnel, j’ai créé une sorte de timeline à suivre, que je vous livre ici.

1 – Transcrire le texte des vidéos à la volée

Première étape, transcrire le son des vidéos à la volée, dans un fichier texte. Puisque la quasi-totalité des vidéo sur lesquelles je travaille sont mises en ligne sur Youtube, je me contente de travailler avec un éditeur de texte. J’obtiens ainsi un résultat brut, du texte « au kilomètre » – d’autant plus que les interviews réalisées pour mon webzine Mandorine sont en général assez bavardes & longues – mais il s’agit d’une bonne base de travail.

Je sais qu’il existe des solutions et logiciels pour transcrire des vidéos et les exporter au format WEBVTT – pris en charge par Youtube, qui plus est – mais j’avoue ne pas m’y être encore penchée. Si une bonne âme souhaite partager ses astuces et retours d’expérience sur ce type de solutions, je suis évidemment preneuse.

2 – Travailler sur le montage & les synthés de la vidéo

Ici, rien de vraiment neuf. J’enchaîne sur la production de la vidéo, en m’efforçant de réfléchir au placement des synthés, pour éviter qu’ils gênent le sous-titrage par la suite. Je fais également attention au temps d’affichage des synthés, pour que chacun·e ait le temps de lire les textes confortablement.

Ici, deux choix s’offrent à moi :

  1. Créer les sous-titres directement dans Adobe Première, ce qui me permets de les placer exactement à l’endroit voulu, tout en prenant en compte les synthés, les couleurs, la timeline… Ce qui semble parfait ! Excepté que les formats d’exports des fichiers de sous-titres de Premiere ne sont pas les même que les fichiers de sous-titres supportés par Youtube (fichiers ttml mis à part, mais ils ne sont supportés que partiellement)… Je pourrais exporter les sous-titres puis les convertir au bon format, mais je préfère pour le moment utiliser la seconde méthode.
  2. Exporter la vidéo, avant de l’uploader sur Youtube, et créer les sous-titres directement dans l’interface du site.

3 – Créer les sous-titres Youtube

L’interface de sous-titres de Youtube permet donc d’importer un fichier de sous-titres, mais également une transcription au format texte si on le souhaite. Autre possibilité, créer les sous-titres directement dans l’interface vidéo. Cette interface est relativement bien pensée et permet d’insérer les sous-titres de manière intuitive.

Ce système est d’autant plus pratique qu’il est possible de créer plusieurs sous-titres pour une même vidéo (utile pour la traduction), ainsi que de télécharger le fichier de sous-titre créé au format souhaité.

Capture d'écran de l'interface Youtube de création de sous-titres.

Capture d’écran de l’interface Youtube de création de sous-titres.

4 – La problématique de la musique

Ma plus grande problématique concernant le sous-titrage de vidéos sur Youtube concerne la musique. En effet, Youtube ne permet pour le moment pas de modifier la couleur des sous-titres, comme suggéré par les bonnes pratiques, pour signifier qu’une portion de texte est issue d’une chanson.

Pour le moment, je me contente donc d’insérer une note de musique pour signifier une portion musicale. Mais je ne suis pas satisfaite de cette solution, puisqu’une grande partie des reportages de Mandorine portent sur des concerts, je trouve très dommage de ne pas pouvoir en sous-titrer les paroles.

Addendum :
Sur Twitter, Emmanuelle apporte quelques précisions très utiles concernant le sous-titrage de la musique, en particulier sur Youtube, qui ne prend pas en charge les couleurs (le code-couleur Français n’est donc pas possible). La solution est donc d’appliquer les règles internationales, en plaçant des notes en début et fin de phrases musicales. Ses explications ici.

5 – Tutos vidéo & sous-titrage

Un aparté concernant le sous-titrage – ou plutôt le manque de sous-titres – de mes tutos vidéos. Pour le moment, Tuto.com ne permet pas l’affichage de sous-titres dans les vidéos, que ce soit sur le site où dans le player. J’ai posé la question à l’équipe, visiblement, ce n’est pas dans les tuyaux, puisqu’ils n’ont jamais eu cette demande jusqu’ici.

Dommage, d’autant plus que Screenflow, le logiciel de screencasting leader sur Mac OS, intègre des fonctionnalités de sous-titrages. De même pour Camtasia, le pendant Windows de Screenflow.

Espérons que la donne change dans les temps à venir, même si cela impliquerait pour moi la transcription de tous mes tutos & formations complètes vidéo passés – ce qui prendra un temps fou, gloups !

Addendum :
Nicolas Chaunu, de Tuto.com, a apporté quelques précisions à ma question concernant le sous-titrage sur leur site et leur application :

« (…) le système serait à adapter sur Desktop, Android, iOs et sur le site lui-même. Ce qui fait un très gros chantier.
En revanche nous faisons de la veille régulière sur les système de transcriptions automatiques.
Ces derniers donnent de bons résultats en anglais (c’est ce qu’utilise d’ailleurs Youtube), moins en français pour le moment. On peut imaginer que les choses évoluent rapidement, notamment grâce à l’intelligence artificielle et au deep learning, qui devraient avoir un impact positif dans le domaine.
A ce moment là, on pourra imaginer proposer les cours sous-titrés dans plusieurs langues de manière totalement automatique :) »

Édition numérique & accessibilité vidéo

« Petite » digression concernant l’utilisation de la vidéo dans le cas de projets EPUB 3. La bonne nouvelle, c’est qu’en théorie, tout ce qui devrait être applicable pour du HTML5 & CSS3 l’est aussi pour l’EPUB 3. En théorie.

Formats vidéo, sous-titrage

Toute personne s’étant essayée à la douce pratique de la production d’EPUBs sait que la réalité est bien loin d’être aussi simple. Commençons par une bonne nouvelle, la compatiblité des formats vidéo. Comme un EPUB 3 est composé de XHTML5 – on aime bien les bizarreries, dans le monde de l’édition numérique – les formats vidéo compatibles sont les mêmes que pour le Web :

  • Formats audio : mp3, m4a
  • Formats vidéo : WebM, mp4, m4v.

Enchaînons sur le premier hic de l’EPUB 3 : le sous-titrage. La technologie HTML 5 dédiée (WebVTT) n’est pas supportée par les logiciels de lecture numérique… Heureusement, il est tout à fait possible d’héberger les vidéos en ligne avant de les intégrer, sur votre propre FTP ou sur un site de streaming (Youtube, Vimeo, et consorts). « Fonctionnalité » qui nous sauve, puisque ces plateformes intègrent des solutions de sous-titre plutôt intuitives, j’en parlais plus tôt.

Poids des vidéos & hébergement en ligne

La possibilité d’héberger les vidéos en ligne avant de les intégrer résout de fait un autre souci récurrent dans la production d’EPUBs enrichis de contenus multimédia : leur poids. Rien de plus agaçant pout une lectrice/un lecteur d’acheter un livre numérique, avant de s’apercevoir lors du téléchargement que la place disponible sur son terminal de lecture n’est pas suffisante. Il reste en effet encore difficile pour beaucoup d’éditeurs de ne pas considérer l’EPUB 3 comme une sorte de bac-à-sable, permettant de créer des livres (trop) lourdement enrichis d’images et de contenus multimédia.

Le deuxième problème à prendre en compte concerne les utilisatrices & utilisateurs d’InDesign. Il est effectivement possible d’intégrer dans un projet EPUB 3 réalisé avec InDesign des vidéos hébergées en ligne… En théorie. En pratique, cette fonctionnalité fonctionne rarement, quand elle ne fait pas carrément planter le logiciel lors de son utilisation. Utilisatrices & utilisateurs d’InDesign, il vous faudra donc revenir sur le code de votre EPUB après son export depuis InDesign.

Capture d'écran InDesign – Panneau multimedia, vidéo à partir d'une URL

Capture d’écran InDesign – Panneau multimedia, vidéo à partir d’une URL.
La fonctionnalité est certes prévue dans le logiciel, mais elle est particulièrement instable en ce qui concerne l’EPUB.

Attention également aux problématiques de connexion des terminaux de lecture numérique. Entre les iPads et leur modèle économique pas tellement économique pour les client·e·s (la version cellular est en option), les liseuses au Wifi parfois bancal, les forfaits 3/4/5G limités… Ne partez jamais du principe que les lecteurs disposent d’une connexion suffisamment stable pour lire les contenus multimédia de vos EPUB.

Comment faire, dès lors ? Demandez-vous pourquoi vous intégrez une vidéo à tel ou tel endroit, et placez-là de sorte à ce qu’elle donne du sens à la narration. Celle-ci doit conserver toute sa logique si, pour une raison ou pour un autre, les lectrices & lecteurs de peuvent pas lire la vidéo. L’interactivité se doit être utile et ne pas être un simple bac-à-sable, même si c’est tentant.

Côté fonctionnalités, attention également au préchargement, à la lecture en boucle, et la lecture automatique, qui ne fonctionnent pas sur tous les terminaux de lecture. Notons de toute façon que, comme pour un projet Web, ce n’est jamais une bonne idée d’imposer aux lectrices & lecteurs la lecture automatique et en boucle de vidéos.

Pour conclure

Il n’est pas toujours évident – mais loin d’être impossible – d’intégrer à nos workflows quotidiens les principes d’accessibilité vidéo. Je vous dirais bien que ce n’est pas par manque de volonté, mais j’ai pu observer la réticence de certaines entreprises à prendre en compte les problématiques d’accessibilité vidéo en interne, principalement par manque de compréhension (et de formation) aux problématiques du Web. Et il n’est pas toujours évident d’évangéliser seul·e face à tou·te·s sur des thèmes qu’on ne maîtrise soi-même pas encore suffisamment, malgré toute notre bonne volonté.

Ceci étant dit, il est toujours possible d’apporter sa petite pierre à l’édifice en créant son propre workflow vidéo, comme je l’ai fait. Il est certes largement perfectible, mais les nombreuses ressources que l’on trouve en ligne vont me permettre de l’améliorer au fil des années, j’en suis certaine. Et si vous avez des suggestions, ou des corrections, à apporter concernant ce retour d’expérience, les commentaires sont ouverts :).

Footnotes

  1. Synthé : incrustation de texte sur une image vidéo.

4 commentaires

  1. Bravo et merci pour ce retour d’expérience très complet et documenté!
    Précisons pour tes lecteurs que l’accessibilité des vidéos ne se limite pas au sous-titrage et à la transcription. Il faudrait aussi considérer l’audiodescription, et si l’on veut faire le tour du sujet de la conformité aux standards, proposer une version en langue des signes et une audiodescription étendue (l’image se fige le temps de prononcer la description).
    Un aspect – crucial – qui n’est pas abordé ici: le coût. Pour ma part, j’ai constaté que même en tenant compte des marges des intermédiaires, on a un coût de sous-titrage qui est largement sous les 1% du coût de réalisation de la vidéo (contexte de vidéos institutionnelles réalisées par un studio pro). C’est donc très marginal dans le budget, pour un service rendu qui concerne directement dans les 8-10% des utilisateurs.

    Par ailleurs (et c’est pour ça que j’ai précisé « conformité »), l’accessibilité peut s’entendre aussi pour des besoins plus larges, comme par exemple la sensibilité aux mouvements, les difficultés de compréhension de contenus non linéaires ou métaphoriques, et des tas d’autres considérations qui ne sont pas (ou mal) prises en compte par les standards validés à ce jour. Et qui, pour le coup, vont avoir une influence sur les choix éditoriaux, et pas uniquement en termes de contenus additionnels ou de substitution. Mais c’est un très large sujet… S’il y en a que ça intéresse, j’ai esquissé des précos dans ce sens, je veux bien partager mes réflexions et les tester sur des projets (me contacter via mon blog ou @OlivierNourry sur Twitter)

    • Merci pour ton commentaire Olivier !

      Merci pour ton retour sur le coût du sous-titrage, c’est une bonne approche pour convaincre les entreprises en interne ! Dans mon cas précis, j’ai toujours été seule sur la production de vidéos, donc il était très difficile d’envisager ce travail sans y passer des heures supplémentaires… non rémunérées. Difficile balance à trouver, entre mon envie de faire les choses correctement & celle de ne pas trop tirer sur la corde professionnellement. L’argument « 1% du coût pour 8 à 10% de l’audience » est donc excellent !

      Je suis consciente que l’accessibilité vidéo ne se limite pas au sous-titrage, c’est pourquoi je suis ouverte à toute remarque ou suggestion ^^ J’en suis encore au début de ma démarche, d’autant que la production de vidéo est très loin d’être mon activité principale, que ce soit en tant que freelance ou salariée, il s’est toujours agit d’une petite partie de mon travail – quand ce n’est pas une activité bénévole, comme c’est le cas pour Mandorine, par exemple. J’essaie donc de composer avec ces contraintes loin d’être idéales !

      Dans tous les cas, encore merci pour tes précisions, je serais très intéressée par tes précos & reflexions sur ce sujet :)

  2. Super article, hyper utile, d’ores et déjà ajoutés à mes bookmarks ! Merci pour ce partage !

Ajouter un commentaire