Vidéo webaccessible,ça avance !? Jean-Philippe Simonnet, Centre-Inffo
Le sujet•Quest ce que rendre une vidéo  accessible avec WCAG 2.0 ?•Comment la faire ?•Avec quels outils et à quel coût ?•l...
Référentiels ?•WCAG 2•RGAA•ACCESSIWEB
WCAG 2•Règle 1.2 Média temporel :proposer des versions deremplacement aux médiastemporels.
WCAG 2•Règle 1.2 Média temporel :sauf si laudio ou la vidéosont un média de remplacementpour un texte et quils sontclairem...
WCAG 21.2.2 Sous-titres•fournir des sous-titres pour tout contenu  audio pré-enregistré dans un média  synchronisé•Niveau A
WCAG 21.2.3 Audio-description ou version deremplacement pour un média temporel•fournir une version de remplacement pour  u...
WCAG 21.2.4 Sous-titres (en direct) :•fournir des sous-titres pour tout contenu  audio en direct, sous forme de média  syn...
WCAG 21.2.5 Audio-description•fournir une audio-description pour tout  contenu vidéo pré-enregistré, sous forme  de média ...
WCAG 21.2.6 Langue des signes•fournir une interprétation  en langue des signes pour tout contenu  audio pré-enregistré,  s...
WCAG 21.2.7 Audio-description étendue•lorsque les blancs présents dans le fond  sonore ne sont pas suffisants pour permettr...
WCAG 21.2.8 Version de remplacementpour un média temporel•lorsque les blancs présents dans le fond  sonore ne sont pas suf...
WCAG 21.2.9 Seulement audio•fournir une version de remplacement pour un  média temporel, donnant une information  équivale...
C’est tout ?
Référentiels ?•Règle 1.4 Distinguable :faciliter la perception visuelle etauditive du contenu par lutilisateur
Référentiels ?•1.4.2 Contrôle du son :  son de plus de 3 secondes, :  pause, arrêt ou contrôle du volume  indépendant du n...
Référentiels ?•1.4.7 Arrière-plan sonore de faible  volume ou absent   larrière-plan sonore est au moins 20  décibels plus...
Référentiels ?•Règle 2.1 Accessibilité au clavier :  rendre toutes les fonctionnalités  accessibles au clavier.  •2.1.1 Cl...
Référentiels ?•2.1.2 Pas de piège au clavier  si le focus du clavier peut être positionné  sur un élément de la page à lai...
Référentiels ?•Règle 2.2 Délai suffisant :  laisser à lutilisateur suffisamment de temps  pour lire et utiliser le contenu. ...
En résuméNiveau A   •  Sous-titres   •  Audiodescription ou «alternative» (transcript)   •  Accessibilité au clavier   •  ...
éléments WCAG2Audio-description•laudio-description dune vidéo fournit de linformation à propos des actions, des personnage...
éléments WCAG2Sous-titres•les sous-titres (en anglais captions) sont similaires à ceux  qui sont utilisés seulement pour l...
éléments WCAG2Sous-titres•les sous-titres ne devraient pas masquer linformation pertinente de la vidéo, même partiellement...
Html5  ouFlash ?
Html 5 : <video><video>    <source src="nom.xxx" type="video/xxx"/>    <p>Erreur : vous ne supportez pas html5</p></video>
Html 5 : <video><video>    <source src="nom.xxx" type="video/xxx"/>    <p>Erreur : vous ne supportez pas html5</p></video>...
Html 5 : <video><video>    <source src="nom.xxx" type="video/xxx"/>    <p>Erreur : vous ne supportez pas html5</p></video>...
Trop Facile ?  non !
merci aux navigateurs !H264 OggWebvm
Html 5 : <video><video autobuffer controls poster="spot.jpg" width="400">   <source src="spot.mp4" type="video/mp4"/>   <s...
Accessible ? non !
<video> selon leW3C•To make video content accessible to the  blind, deaf, (etc.) authors are expected to  provide alternat...
Html 5 : <track><video autobuffer controls poster="spot.jpg" width="400">    <source src="spot.ogv" type="video/ogg"/>    ...
Html 5 : <track><video autobuffer controls poster="spot.jpg" width="400">    <source src="spot.ogv" type="video/ogg"/>    ...
On fait quoialors ?
Exercices• 4 players différents• Outillage• Intégration html5 avec fallback• Analyse critique
Players•Une url pour suivre :http://inffo.fr/w3cafe
Players• JW Player    http://www.longtailvideo.com/players/jw-flv-player/• Workshop accessible media player    http://www.t...
Convertir une video Sur PC
Convertir une video Sur OSX
Convertir une videohttp://vid.ly/
Convertir une video
Convertir une video
Faire un sous-titrage http://www.universalsubtitles.org/
Faire un sous-titrage  Démo en 3 étapes http://www.universalsubtitles.org/
1
2
3
C’est   ni !
MerciCredits photos : sxc.hu
Prochain SlideShare
Chargement dans…5
×

W3Café accessibilité : Vidéo web accessible, ça avance !?

2 633 vues

Publié le

Qu'est ce que rendre une vidéo accessible avec WCAG 2.0 ? Comment la faire ? Avec quels outils et à quel coût ?

Publié dans : Technologie
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 633
Sur SlideShare
0
Issues des intégrations
0
Intégrations
466
Actions
Partages
0
Téléchargements
27
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

W3Café accessibilité : Vidéo web accessible, ça avance !?

  1. 1. Vidéo webaccessible,ça avance !? Jean-Philippe Simonnet, Centre-Inffo
  2. 2. Le sujet•Quest ce que rendre une vidéo accessible avec WCAG 2.0 ?•Comment la faire ?•Avec quels outils et à quel coût ?•les players vidéo dit accessibles•html 5
  3. 3. Référentiels ?•WCAG 2•RGAA•ACCESSIWEB
  4. 4. WCAG 2•Règle 1.2 Média temporel :proposer des versions deremplacement aux médiastemporels.
  5. 5. WCAG 2•Règle 1.2 Média temporel :sauf si laudio ou la vidéosont un média de remplacementpour un texte et quils sontclairement identifiés comme tels
  6. 6. WCAG 21.2.2 Sous-titres•fournir des sous-titres pour tout contenu audio pré-enregistré dans un média synchronisé•Niveau A
  7. 7. WCAG 21.2.3 Audio-description ou version deremplacement pour un média temporel•fournir une version de remplacement pour un média temporel ou une audio- description du contenu vidéo pré-enregistré pour un média synchronisé•Niveau A
  8. 8. WCAG 21.2.4 Sous-titres (en direct) :•fournir des sous-titres pour tout contenu audio en direct, sous forme de média synchronisé.•Niveau AA
  9. 9. WCAG 21.2.5 Audio-description•fournir une audio-description pour tout contenu vidéo pré-enregistré, sous forme de média synchronisé•Niveau AA
  10. 10. WCAG 21.2.6 Langue des signes•fournir une interprétation en langue des signes pour tout contenu audio pré-enregistré, sous forme de média synchronisé•Niveau AAA
  11. 11. WCAG 21.2.7 Audio-description étendue•lorsque les blancs présents dans le fond sonore ne sont pas suffisants pour permettre à laudio-description de transmettre le sens de la vidéo, fournir une audio-description étendue pour tout contenu vidéo pré-enregistré sous la forme de média synchronisé•Niveau AAA
  12. 12. WCAG 21.2.8 Version de remplacementpour un média temporel•lorsque les blancs présents dans le fond sonore ne sont pas suffisants pour permettre à laudio-description de transmettre le sens de la vidéo, fournir une audio-description étendue pour tout contenu vidéo pré-enregistré sous la forme de média synchronisé•Niveau AAA
  13. 13. WCAG 21.2.9 Seulement audio•fournir une version de remplacement pour un média temporel, donnant une information équivalente pour un contenu seulement audio en direct.•Niveau AAA
  14. 14. C’est tout ?
  15. 15. Référentiels ?•Règle 1.4 Distinguable :faciliter la perception visuelle etauditive du contenu par lutilisateur
  16. 16. Référentiels ?•1.4.2 Contrôle du son : son de plus de 3 secondes, : pause, arrêt ou contrôle du volume indépendant du niveau du système général.•Niveau A
  17. 17. Référentiels ?•1.4.7 Arrière-plan sonore de faible volume ou absent  larrière-plan sonore est au moins 20 décibels plus faible que le contenu parlé au premier plan sauf pour certains effets sonores occasionnels durant seulement une ou deux secondes•Niveau AAA
  18. 18. Référentiels ?•Règle 2.1 Accessibilité au clavier : rendre toutes les fonctionnalités accessibles au clavier. •2.1.1 Clavier toutes les fonctionnalités du contenu sont utilisables à laide dune interface clavier sans exiger un rythme de frappe propre à lutilisateur •Niveau A
  19. 19. Référentiels ?•2.1.2 Pas de piège au clavier si le focus du clavier peut être positionné sur un élément de la page à laide dune interface clavier, réciproquement, il peut être déplacé hors de ce même composant simplement à laide dune interface clavier•Niveau AA
  20. 20. Référentiels ?•Règle 2.2 Délai suffisant : laisser à lutilisateur suffisamment de temps pour lire et utiliser le contenu. •2.2.2 Mettre en pause, arrêter, masquer pour toute information en mouvement, clignotante, défilante ou mise à jour automatiquement, tous les points suivants sont vrais •Niveau A
  21. 21. En résuméNiveau A • Sous-titres • Audiodescription ou «alternative» (transcript) • Accessibilité au clavier • Mettre en pause, arrêter, masquer • Controle du sonNiveau AA • Pas de piège au clavier • AudiodescriptionNiveau AAA • Transcript • Langues des signes • Pas d’arrière-plan sonore
  22. 22. éléments WCAG2Audio-description•laudio-description dune vidéo fournit de linformation à propos des actions, des personnages, des changements de scènes, du texte apparaissant à lécran et dautres contenus visuels.•Dans une audio-description standard, la narration est ajoutée durant les pauses qui existent dans le dialogue.•Lorsque toute linformation de la vidéo est déjà donnée dans la piste audio, aucune audio-description supplémentaire nest requise.
  23. 23. éléments WCAG2Sous-titres•les sous-titres (en anglais captions) sont similaires à ceux qui sont utilisés seulement pour les dialogues (en anglais subtitles) sauf que les sous-titres ne communiquent pas seulement le contenu des dialogues parlés mais aussi des équivalents pour les informations audio autres que le dialogue et nécessaires à la compréhension du contenu du programme, y compris les effets sonores, la musique, les rires, lidentification et le positionnement des interlocuteurs
  24. 24. éléments WCAG2Sous-titres•les sous-titres ne devraient pas masquer linformation pertinente de la vidéo, même partiellement.•Dans certaines langues comme langlais on distingue entre « caption » et « subtitles », le terme « caption » étant parfois traduit en français par sous-titres pour malentendants.
  25. 25. Html5 ouFlash ?
  26. 26. Html 5 : <video><video> <source src="nom.xxx" type="video/xxx"/> <p>Erreur : vous ne supportez pas html5</p></video>
  27. 27. Html 5 : <video><video> <source src="nom.xxx" type="video/xxx"/> <p>Erreur : vous ne supportez pas html5</p></video>Autres attributs de <video> src autoplay controls poster loop width preload audio height
  28. 28. Html 5 : <video><video> <source src="nom.xxx" type="video/xxx"/> <p>Erreur : vous ne supportez pas html5</p></video>Autres attributs de <video> src autoplay controls poster loop width preload audio height
  29. 29. Trop Facile ? non !
  30. 30. merci aux navigateurs !H264 OggWebvm
  31. 31. Html 5 : <video><video autobuffer controls poster="spot.jpg" width="400"> <source src="spot.mp4" type="video/mp4"/> <source src="spot.ogv" type="video/ogg"/> <p>Erreur : vous ne supportez pas html5</p></video>Avec 2 formats on couvre tout les navigateurs
  32. 32. Accessible ? non !
  33. 33. <video> selon leW3C•To make video content accessible to the blind, deaf, (etc.) authors are expected to provide alternative media streams and/or to embed accessibility aids (...) into their media streams.•Pour rendre une video accessible aux aveugles, sourds, etc ... les auteurs doivent fournir des flux de contenus ou des aides accessibles dans leur flux de media ...
  34. 34. Html 5 : <track><video autobuffer controls poster="spot.jpg" width="400"> <source src="spot.ogv" type="video/ogg"/> <source src="spot.mp4" type="video/mp4"/> <p>Erreur : vous ne supportez pas html5</p><track kind=subtitles src=spot.en.vtt srclang=en label="English"><track kind=captions src=spot.en.vtt srclang=en label="English forthe Hard of Hearing"> <track kind=subtitles src=spot.fr.vtt srclang=fr label="Français"> <track kind=subtitles src=spot.de.vtt srclang=de label="Deutsch"></video> Exemple du W3C : http://www.w3.org/TR/html5/video.html
  35. 35. Html 5 : <track><video autobuffer controls poster="spot.jpg" width="400"> <source src="spot.ogv" type="video/ogg"/> <source src="spot.mp4" type="video/mp4"/> <p>Erreur : vous ne supportez pas html5</p><track kind=subtitles src=spot.en.vtt srclang=en label="English"><track kind=captions src=spot.en.vtt srclang=en label="English forthe Hard of Hearing"> <track kind=subtitles src=spot.fr.vtt srclang=fr label="Français"> <track kind=subtitles src=spot.de.vtt srclang=de label="Deutsch"></video>C’est joli ... mais ça ne marche pas ... encore
  36. 36. On fait quoialors ?
  37. 37. Exercices• 4 players différents• Outillage• Intégration html5 avec fallback• Analyse critique
  38. 38. Players•Une url pour suivre :http://inffo.fr/w3cafe
  39. 39. Players• JW Player http://www.longtailvideo.com/players/jw-flv-player/• Workshop accessible media player http://www.theworkshop.co.uk/video-player• Acorn Media Player http://ghinda.net/acornmediaplayer/• Jcaps http://www.360innovate.co.uk/blog/2010/02/jcaps-making-html5- video-captions-easier-with-jquery-plugin/
  40. 40. Convertir une video Sur PC
  41. 41. Convertir une video Sur OSX
  42. 42. Convertir une videohttp://vid.ly/
  43. 43. Convertir une video
  44. 44. Convertir une video
  45. 45. Faire un sous-titrage http://www.universalsubtitles.org/
  46. 46. Faire un sous-titrage Démo en 3 étapes http://www.universalsubtitles.org/
  47. 47. 1
  48. 48. 2
  49. 49. 3
  50. 50. C’est ni !
  51. 51. MerciCredits photos : sxc.hu

×