![Page 1: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/1.jpg)
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
![Page 2: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/2.jpg)
2
Web et vidéo
Deux protocoles différents sur Internet : Web : TCP/IP Vidéo : RTP
![Page 3: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/3.jpg)
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)
![Page 4: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/4.jpg)
4
Le principe des technologies d'assistance
Des technologies pour nous faciliter le quotidien
Universal Design
![Page 5: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/5.jpg)
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
![Page 6: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/6.jpg)
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
![Page 7: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/7.jpg)
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
![Page 8: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/8.jpg)
8
Dans la vraie vie
Tanscriptions rares Sous-titrages encore plus rares Audiodescription inexistante
![Page 9: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/9.jpg)
9
Dans la vraie vie
Interface dépendante de grands diffuseurs : Youtube, Dailymotion, Vimeo..
Interface en Flash à l'origine Passage progressif à HTML 5
![Page 10: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/10.jpg)
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
![Page 11: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/11.jpg)
11
Quelle prise en charge de HTML 5 <video> aujourd'hui ?
Source : http://caniuse.com/#feat=video [10/07/2012]
![Page 12: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/12.jpg)
12
Quelle prise en charge de HTML 5 <video> aujourd'hui ?
Source : http://bit.ly/c989fB Alsacréations – Nicolas Hoffmann [12/01/2012]
![Page 13: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/13.jpg)
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
![Page 14: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/14.jpg)
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/
![Page 15: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/15.jpg)
15
Quelle prise en charge de HTML 5 <track> aujourd'hui ?
Aucune !
![Page 16: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/16.jpg)
16
Quelle prise en charge de HTML 5 <track> aujourd'hui ?
Aucune !
![Page 17: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/17.jpg)
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>
![Page 18: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/18.jpg)
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
![Page 19: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/19.jpg)
19
Quid de Javascript ?
Bibliothèques JS facilitant le sous-titrage et l'interaction avec les vidéos :
Popcorn.js Timesheet.js
![Page 20: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/20.jpg)
20
Demo de popcorn.js
Source : http://popcornjs.org/demo/shakespeare-is-better-with-popcorn
![Page 21: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/21.jpg)
21
Demo de timesheet.js
Source : http://wam.inrialpes.fr/timesheets/annotations/video.html
![Page 22: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/22.jpg)
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
![Page 23: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/23.jpg)
23
Quid de l'accessibilité de Javascript ?
JS non pris en charge dans les navigateurs texte tels que Lynx ou W3M
![Page 24: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/24.jpg)
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
![Page 25: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/25.jpg)
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
![Page 26: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/26.jpg)
26
Conclusion
HTML 5 libère la vidéo sur le Web, mais de nombreux défis à relever
![Page 27: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/27.jpg)
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é
![Page 28: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/28.jpg)
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
![Page 29: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/29.jpg)
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
![Page 30: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/30.jpg)
30
Contact
Groupe de travail April accessibilité et logiciels libres :
[email protected] libre-et-accessible.org
Armony Altinier : [email protected] @armonyaltinier
![Page 31: Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012](https://reader033.vdocuments.net/reader033/viewer/2022060119/558e52961a28ab3e0a8b463d/html5/thumbnails/31.jpg)
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