Mot-clé - RGAA

23 avril 2018

Intégrer des vidéos tierces de manière accessible

J’intègre rarement des vidéos dans mes billets et je me suis rendue compte que je ne savais pas comment Dotclear gérait ça. N’ayant rien trouvé, je me suis dit que ça pourrait être intéressant de faire le point sur l’intégration accessible de vidéos tierces dans Dotclear (et ailleurs).

Intégrer des vidéos tierces dans un billet Dotclear

Il existe un plugin, noembedMedia, qui permet d’intégrer facilement une vidéo[1] dans un billet pour un contributeur sans toucher à une ligne de code.

Il suffit de fournir l’URL de la vidéo, définir un positionnement (aucun, gauche, centre, droit) et d’ajouter un titre si on le souhaite. Le plugin ajoute alors le code suivant :

<div class="external-media" style="margin: 1em auto; text-align: center;">

<iframe width=" 459" height="344" src="https://www.youtube.com/watch?v=uKBWxvN0VMc?feature=oembed" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

</div>

On peut également insérer directement le code fourni par Youtube, Vimeo ou autre à l’endroit souhaité dans le billet. Ce code ressemble à ça :

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/0xQy4Ardi_c" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

Aparté vie privée : j’ai activé le mode de confidentialité avancé (le nocookie que vous voyez dans l’URL) pour que YouTube n’enregistre aucune information sur les internautes qui consultent la page sans regarder la vidéo.

Vous le trouvez généralement en cliquant sur Partager puis Intégrer sur Youtube par exemple.

Insérer ce bout de code est un jeu d’enfant sur Dotclear en wiki et encore plus en Markdown puisqu’il suffit de copier/coller le HTML sans rajouter de code supplémentaire.

Le problème ? Le code fourni n’est pas bon[2] et ne respecte pas les règles d’accessibilité numérique. Heureusement, ce n’est pas très compliqué à corriger si on a quelques notions en HTML et de CSS.

Vidéos tierces et accessibilité

Ce qui suit ne vaut pas que pour Dotclear, mais concerne plus largement l’insertion de vidéos tierces.

On va s’aider du Référentiel Général d’Accessibilité pour les Administrations (RGAA).

Pour faire simple, le RGAA vous invite à vous poser des questions sur l’accessibilité de vos contenus sur le web. 133 questions (critères) précisément, réparties en 13 thématiques. Celles qui vont nous intéresser et s’appliquer pour insérer une vidéo tierce, ce sont les thématiques Cadres, Multimédia et Présentation de l’information.

Si je souhaite intégrer une vidéo tierce contenue dans un cadre (iframe) de manière accessible, je dois vérifier que je réponds bien aux quatre critères RGAA 3[3] suivants :

Iframe : nettoyage et titrage

Note : le principe est le même pour des iframes qui insèrent autre chose que des vidéos.

On va d’abord s’intéresser au code présent dans l’iframe et le nettoyer (critère 10.1). On va supprimer frameborder (qui permet d’afficher ou non une bordure), width (largeur) et height (hauteur) qui sont des éléments de présentation qui doivent être traités en CSS. On obtient :

<iframe src="https://www.youtube-nocookie.com/embed/0xQy4Ardi_c" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

Si la CSS de votre thème a déjà prévu de styler les iframes, vous n’avez rien d’autre à faire. Youpi !

Si ce n’est pas le cas (souvent), vous pouvez au choix :

  1. ajouter du style en ligne (par exemple : style="border:none; width:560px; height:315px;) ;
  2. styler les iframes dans les CSS de votre thème pour avoir le rendu souhaité (si vous êtes amenés à insérer d’autres types d’iframes, ajouter une classe pour les vidéos) ;
  3. vous adresser à une personne qui sait faire et comprend les point 1 ou 2.

On va également identifier notre iframe (critère 2.1) et la titrer de façon pertinente (critère 2.2) pour permettre aux personnes aveugles de mieux s’y retrouver. Pour ça, on rajoute simplement title="Youtube".

Hop, c’est fini pour l’iframe :

<iframe src="https://www.youtube-nocookie.com/embed/0xQy4Ardi_c" title="Youtube" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

Identifier la vidéo si elle apporte de l’information

L’absence d’identification des vidéos par un titre ou un résumé peut rendre la recherche d’information particulièrement laborieuse pour les utilisateurs aveugles et les grands malvoyants.

Multimédia - Défauts d’accessibilité : Impacts sur les utilisateurs

On va donc de préférence faire précéder la vidéo d’un titre. On peut néanmoins également aussi l’évoquer dans un paragraphe qui la précède ou la suit immédiatement et qui en résume le contenu. C’est ce que j’ai fait dans mon billet sur l’exposition Kupka.

En résumé

Actuellement, seul un contributeur avancé peut éditer le code sans souci et ajouter des iframes vidéos accessibles, encore faut-il qu’il soit au courant des règles d’accessibilité évidemment.

On pourrait améliorer ce point assez simplement et automatiser toute la partie technique concernant l’intégration de l’iframe.

Le contributeur néophyte ou avancé n’aurait ainsi plus à se soucier des questions techniques et pourrait ainsi uniquement se concentrer sur l’identification de la vidéo (critère 4.15).

Notes

[1] En vérité, ce plugin fait bien plus que ça puisqu’il vous permet d’ajouter des contenus tiers type, je me concentre ici uniquement sur les vidéos.

[2] Il n’est pas valide HTML5, frameborder étant désormais obsolète.

[3] Pour chaque critère, le RGAA fournit une liste d’instructions simples à suivre (les tests) et un glossaire pour expliciter les termes importants.