Conférence donnée lors des rencontres mondiales du logiciel libre à Genève le 10 juillet 2012. Voir : http://schedule2012.rmll.info/Accessible-free-videos-on-the-Web-an-impossible-bet?lang=fr Résumé : Alors que jusqu’ici seul Flash était supposé permettre la mise à disposition de vidéos accessibles sur le Web, HTML 5 et le déploiement de javascript apportent aujourd’hui une alternative. Mais alors que l’on peut se poser la question de l’accessibilité réelle de Flash, jusqu’à quel point javascript et HTML 5 sont-ils accessibles ? La vidéo libre et accessible sur le Web est-elle une utopie ou une réalité ?

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
1

2. Web et vidéo
 Deux protocoles différents sur Internet :
 Web : TCP/IP
 Vidéo : RTP
2

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)
3

4. Le principe des technologies
d'assistance
Des technologies pour nous faciliter le quotidien
Universal Design
4

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
5

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
6

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
7

8. Dans la vraie vie
 Tanscriptions rares
 Sous-titrages encore plus rares
 Audiodescription inexistante
8

9. Dans la vraie vie
 Interface dépendante de grands diffuseurs :
Youtube, Dailymotion, Vimeo..
 Interface en Flash à l'origine
 Passage progressif à HTML 5
9

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
10

11. Quelle prise en charge de HTML 5
<video> aujourd'hui ?
Source : http://caniuse.com/#feat=video [10/07/2012]
11

12. Quelle prise en charge de HTML 5
<video> aujourd'hui ?
Source : http://bit.ly/c989fB Alsacréations – Nicolas Hoffmann [12/01/2012]
12

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
13

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/
14

15. Quelle prise en charge de HTML 5
<track> aujourd'hui ?
 Aucune !
15

16. Quelle prise en charge de HTML 5
<track> aujourd'hui ?
 Aucune !
16

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>
17

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
18

19. Quid de Javascript ?
 Bibliothèques JS facilitant le sous-titrage et
l'interaction avec les vidéos :
 Popcorn.js
 Timesheet.js
19

20. Demo de popcorn.js
Source : http://popcornjs.org/demo/shakespeare-is-better-with-popcorn
20

21. Demo de timesheet.js
Source : http://wam.inrialpes.fr/timesheets/annotations/video.html
21

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
22

23. Quid de l'accessibilité de
Javascript ?
 JS non pris en charge dans les navigateurs
texte tels que Lynx ou W3M
23

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
24

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
25

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

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é
27

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
28

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
29

30. Contact
 Groupe de travail April accessibilité et logiciels
libres :
 accessibilite@april.org
 libre-et-accessible.org
 Armony Altinier :
 aaltinier@april.org
 @armonyaltinier
30

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
31