1

R.M.L.L Genève 2012

Des vidéos libres et accessibles sur le Web,

un pari impossible ?10 juillet 2012

Armony Altinier

2

Web et vidéo

Deux protocoles différents sur Internet : Web : TCP/IP Vidéo : RTP

3

Web et accessibilité

Premier objectif du W3C : mettre le Web et ses services à la disposition de chacun, quelle que soit sa langue, sa culture, son infrastructure réseau, sa localisation géographique... ou son handicap physique ou mental.

GdT du W3C : WAI spécialisé sur l'accessibilité du Web pour tous les handicaps (visuel, auditif, moteur, de parole, cognitif, intellectuel et psychique)

4

Le principe des technologies d'assistance

Des technologies pour nous faciliter le quotidien

Universal Design

5

Accessibilité des vidéos sur le Web

Références : WCAG 2, AccessiWeb 2.1, RGAA 2.2.1

Principes généraux Tanscription textuelle : version texte de la vidéo Sous-titrage Audiodescription Accessibilité de l'interface : navigation au clavier,

identification textuelle des boutons d'interface Possibilité de lancer, arrêter et relancer la vidéo

6

Vidéos sur le Web : Flash incontournable ?

Théorie : seul Flash peut être accessible Alternative obligatoire à JS

En pratique : les objets embarqués inaccessibles au clavier, sauf sous IE

7

Vidéos web : l'impossible accessibilité ?

Si, mais pas libre... Flash, IE À moins de permettre le téléchargement des

sources : liberté du choix du navigateur, du lecteur...

Expérience utilisateur différente puisqu'il faut d'abord télécharger le fichier pour pouvoir le lire

8

Dans la vraie vie

Tanscriptions rares Sous-titrages encore plus rares Audiodescription inexistante

9

Dans la vraie vie

Interface dépendante de grands diffuseurs : Youtube, Dailymotion, Vimeo..

Interface en Flash à l'origine Passage progressif à HTML 5

10

Ce que va changer HTML 5

Le lecteur vidéo devient un élément web ! Ouverture du code, libération de la vidéo

Travail des intégrateurs et contributeurs facilité :

Balise video Balise track

11

Quelle prise en charge de HTML 5 <video> aujourd'hui ?

Source : http://caniuse.com/#feat=video [10/07/2012]

12

Quelle prise en charge de HTML 5 <video> aujourd'hui ?

Source : http://bit.ly/c989fB Alsacréations – Nicolas Hoffmann [12/01/2012]

13

Quelle prise en charge de HTML 5 <video> aujourd'hui ?

Windows/NVDA : OK avec Firefox GNU-Linux/Orca : prise en charge partielle – ne

lit pas les contrôles mais restitue la progression de la lecture vidéo

14

Exemple d'utilisation de la balise <video>

<video controls="controls" src="video/320x240.ogg">

<source src="movie.ogg" type="video/ogg" />

<source src=”movie.webm” type=”video/webm />

Votre navigateur ne supporte pas le lecteur vidéo, vous pouvez <a href="/video/your_video.ogg">télécharger la vidéo (OGG, 200ko).</a>

</video>

Voir des exemples : http://shapeshed.com/examples/HTML5-video-element/

15

Quelle prise en charge de HTML 5 <track> aujourd'hui ?

Aucune !

16

Quelle prise en charge de HTML 5 <track> aujourd'hui ?

Aucune !

17

Exemple d'utilisation de la balise <track>

<video controls="controls" src="video/320x240.ogg">

<source src="movie.ogg" type="video/ogg" />

<source src=”movie.webm” type=”video/webm />

<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">

Votre navigateur ne supporte pas le lecteur vidéo, vous pouvez <a href="/video/your_video.ogg">télécharger la vidéo (OGG, 200ko).</a>

</video>

18

Les pièges et limites de HTML 5 pour l'accessibilité

Le danger de l'attribut autoplay Bonne pratique : ne JAMAIS utiliser autoplay

Balise de sous-titrage <track> non supportée Absence de balise pour l'audiodescription

Obligation de réaliser une vidéo audiodécrite à proposer en alternative → 2 vidéos

19

Quid de Javascript ?

Bibliothèques JS facilitant le sous-titrage et l'interaction avec les vidéos :

Popcorn.js Timesheet.js

20

Demo de popcorn.js

Source : http://popcornjs.org/demo/shakespeare-is-better-with-popcorn

21

Demo de timesheet.js

Source : http://wam.inrialpes.fr/timesheets/annotations/video.html

22

Quid de l'accessibilité de Javascript ?

Interdit par AccessiWeb 2.1 et RGAA 2.2.1 Alternative toujours nécessaire pour ces

référentiels, alors que pas demandée pour Flash

RGAA

23

Quid de l'accessibilité de Javascript ?

JS non pris en charge dans les navigateurs texte tels que Lynx ou W3M

24

Quid de l'accessibilité de Javascript ?

Pièges du sous-titrage en JS : doublons avec une synthèse vocale – penser à charger une version non sous-titrée par défaut et à proposer le sous-titrage en option, sur demande de l'utilisateur

25

Quelle solution pour de la vidéo libre et accessible sur le Web ?

Combinaison HTML 5 + JS pour sous-titrage et éventuellement les contrôles

Alternative proposant les sources en téléchargement

26

Conclusion

HTML 5 libère la vidéo sur le Web, mais de nombreux défis à relever

27

Défis pour l'accessibilité des vidéos sur le Web

Défi technique : prise en compte de l'accessibilité, avec recommandation de ne pas utiliser l'attribut autoplay, ajout de sous-titres via JS tant que track pas supporté

28

Défis pour l'accessibilité des vidéos sur le Web

Défi d'organisation : facilitation de l'insertion de sous-titrage, mais transcription et sous-titrage demandent du temps et un savoir faire pour caler les sous-titres

À suivre : initiatives tels que Universal Subtitle ou bibliothèques JS précitées

29

Défis pour l'accessibilité des vidéos sur le Web

Défi juridique : accepter de mettre ses sources en téléchargement

– question du droit d'auteur Avoir l'autorisation de modifier une œuvre pour la

rendre accessible

30

Contact

Groupe de travail April accessibilité et logiciels libres :

accessibilite@april.org libre-et-accessible.org

Armony Altinier : aaltinier@april.org @armonyaltinier

31

Crédits et licence

Auteure : Armony Altinier Licence : CC-BY-SA France 2.0 ou ultérieure Présentation réalisée avec LibreOffice Impress