SlideShare une entreprise Scribd logo
Vidéo web
accessible,
ça avance !?
 Jean-Philippe Simonnet, Centre-Inffo
Le sujet
•Qu'est 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
Référentiels ?


•WCAG 2
•RGAA
•ACCESSIWEB
WCAG 2


•Règle 1.2 Média temporel :
proposer des versions de
remplacement aux médias
temporels.
WCAG 2

•Règle 1.2 Média temporel :
sauf si l'audio ou la vidéo
sont un média de remplacement
pour un texte et qu'ils sont
clairement identifiés comme tels
WCAG 2
1.2.2 Sous-titres

•fournir des sous-titres pour tout contenu
  audio pré-enregistré dans un média
  synchronisé

•Niveau A
WCAG 2
1.2.3 Audio-description ou version de
remplacement 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
WCAG 2
1.2.4 Sous-titres (en direct) :

•fournir des sous-titres pour tout contenu
  audio en direct, sous forme de média
  synchronisé.

•Niveau AA
WCAG 2
1.2.5 Audio-description

•fournir une audio-description pour tout
  contenu vidéo pré-enregistré, sous forme
  de média synchronisé

•Niveau AA
WCAG 2
1.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
WCAG 2
1.2.7 Audio-description étendue
•lorsque les blancs présents dans le fond
  sonore ne sont pas suffisants pour permettre
  à l'audio-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
WCAG 2
1.2.8 Version de remplacement
pour un média temporel
•lorsque les blancs présents dans le fond
  sonore ne sont pas suffisants pour permettre
  à l'audio-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
WCAG 2
1.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
C’est tout ?
Référentiels ?


•Règle 1.4 Distinguable :
faciliter la perception visuelle et
auditive du contenu par l'utilisateur
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
Référentiels ?
•1.4.7 Arrière-plan sonore de faible
  volume ou absent 
  l'arriè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
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 à l'aide d'une interface clavier
     sans exiger un rythme de frappe propre à
     l'utilisateur

  •Niveau A
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 à l'aide d'une
  interface clavier, réciproquement, il peut
  être déplacé hors de ce même composant
  simplement à l'aide d'une interface clavier

•Niveau AA
Référentiels ?
•Règle 2.2 Délai suffisant :
  laisser à l'utilisateur 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
En résumé
Niveau A
   •  Sous-titres
   •  Audiodescription ou «alternative» (transcript)
   •  Accessibilité au clavier
   •  Mettre en pause, arrêter, masquer
   •  Controle du son
Niveau AA
   •  Pas de piège au clavier
   •  Audiodescription
Niveau AAA
   •  Transcript
   •  Langues des signes
   •  Pas d’arrière-plan sonore
éléments WCAG2
Audio-description
•l'audio-description d'une vidéo fournit de l'information à
 propos des actions, des personnages, des changements
 de scènes, du texte apparaissant à l'écran et d'autres
 contenus visuels.

•Dans une audio-description standard, la narration est
 ajoutée durant les pauses qui existent dans le dialogue.

•Lorsque toute l'information de la vidéo est déjà donnée
 dans la piste audio, aucune audio-description
 supplémentaire n'est requise.
éléments WCAG2

Sous-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, l'identification et le positionnement des
  interlocuteurs
éléments WCAG2

Sous-titres
•les sous-titres ne devraient pas masquer l'information
 pertinente de la vidéo, même partiellement.

•Dans certaines langues comme l'anglais on distingue
 entre « caption » et « subtitles », le terme « caption »
 étant parfois traduit en français par sous-titres pour
 malentendants.
Html5
  ou
Flash ?
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>

Autres attributs de <video>

     src             autoplay         controls
     poster          loop             width
     preload         audio            height
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
Trop Facile ?
  non !
merci aux navigateurs !




H264


 Ogg


Webvm
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
Accessible ?
 non !
<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 ...
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 for
the 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
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 for
the 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
On fait
 quoi
alors ?
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.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/
Convertir une video




 Sur PC
Convertir une video




 Sur OSX
Convertir une video




http://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 !
Merci

Credits photos : sxc.hu

Contenu connexe

En vedette

(e)Portfolio-Konzepte. Planung und Praxis an der Fakultät EPB
(e)Portfolio-Konzepte. Planung und Praxis an der Fakultät EPB(e)Portfolio-Konzepte. Planung und Praxis an der Fakultät EPB
(e)Portfolio-Konzepte. Planung und Praxis an der Fakultät EPB
Sebastian Plönges
 
Best of mensuel bowers & wilkins - mars 2012
Best of mensuel   bowers & wilkins - mars 2012Best of mensuel   bowers & wilkins - mars 2012
Best of mensuel bowers & wilkins - mars 2012B&W Group France
 
Analyse IDNA expérience interactive sur tablette tactile MarieJulie CatoirBri...
Analyse IDNA expérience interactive sur tablette tactile MarieJulie CatoirBri...Analyse IDNA expérience interactive sur tablette tactile MarieJulie CatoirBri...
Analyse IDNA expérience interactive sur tablette tactile MarieJulie CatoirBri...
mjcatoir
 
Tome 2 : Pour aller plus loin
Tome 2 : Pour aller plus loinTome 2 : Pour aller plus loin
Tome 2 : Pour aller plus loinparoles d'élus
 
Tome 7 : Gestion interne de la collectivité
Tome 7 : Gestion interne de la collectivitéTome 7 : Gestion interne de la collectivité
Tome 7 : Gestion interne de la collectivitéparoles d'élus
 
Document de presentation awmf
Document de presentation awmf  Document de presentation awmf
Document de presentation awmf Tyty Kone
 
Trabajo de sociales , la capilla sixtina (v ictoria, salvador,sara , 2ºa)
Trabajo de sociales , la capilla sixtina (v ictoria, salvador,sara , 2ºa)Trabajo de sociales , la capilla sixtina (v ictoria, salvador,sara , 2ºa)
Trabajo de sociales , la capilla sixtina (v ictoria, salvador,sara , 2ºa)
Esther fern?dez
 
E-Government 2.0 ohne Freie Lizenzen? Hanken ifib
E-Government 2.0 ohne Freie Lizenzen? Hanken ifibE-Government 2.0 ohne Freie Lizenzen? Hanken ifib
E-Government 2.0 ohne Freie Lizenzen? Hanken ifib
clhanken
 
Machines électriques
Machines électriquesMachines électriques
Machines électriques
Mohamed Khalfaoui
 
Etude géologique
Etude géologique Etude géologique
Etude géologique
abdelkrim abdellaoui
 
Note de Conjonture Jones Lang LaSalle - Avril 2012
Note de Conjonture Jones Lang LaSalle - Avril 2012Note de Conjonture Jones Lang LaSalle - Avril 2012
Note de Conjonture Jones Lang LaSalle - Avril 2012
JLL France
 
Mona Mur &amp; En Esch - Kurt Weill Fest 2010
Mona Mur &amp; En Esch - Kurt Weill Fest 2010Mona Mur &amp; En Esch - Kurt Weill Fest 2010
Mona Mur &amp; En Esch - Kurt Weill Fest 2010redrockmanagement
 
Module 2
Module 2Module 2
Module 2ISE
 

En vedette (18)

(e)Portfolio-Konzepte. Planung und Praxis an der Fakultät EPB
(e)Portfolio-Konzepte. Planung und Praxis an der Fakultät EPB(e)Portfolio-Konzepte. Planung und Praxis an der Fakultät EPB
(e)Portfolio-Konzepte. Planung und Praxis an der Fakultät EPB
 
Mosques2
Mosques2Mosques2
Mosques2
 
Autism europe
Autism europeAutism europe
Autism europe
 
Best of mensuel bowers & wilkins - mars 2012
Best of mensuel   bowers & wilkins - mars 2012Best of mensuel   bowers & wilkins - mars 2012
Best of mensuel bowers & wilkins - mars 2012
 
Analyse IDNA expérience interactive sur tablette tactile MarieJulie CatoirBri...
Analyse IDNA expérience interactive sur tablette tactile MarieJulie CatoirBri...Analyse IDNA expérience interactive sur tablette tactile MarieJulie CatoirBri...
Analyse IDNA expérience interactive sur tablette tactile MarieJulie CatoirBri...
 
Qt-Webkit
Qt-WebkitQt-Webkit
Qt-Webkit
 
Tome 2 : Pour aller plus loin
Tome 2 : Pour aller plus loinTome 2 : Pour aller plus loin
Tome 2 : Pour aller plus loin
 
Tome 7 : Gestion interne de la collectivité
Tome 7 : Gestion interne de la collectivitéTome 7 : Gestion interne de la collectivité
Tome 7 : Gestion interne de la collectivité
 
Document de presentation awmf
Document de presentation awmf  Document de presentation awmf
Document de presentation awmf
 
Trabajo de sociales , la capilla sixtina (v ictoria, salvador,sara , 2ºa)
Trabajo de sociales , la capilla sixtina (v ictoria, salvador,sara , 2ºa)Trabajo de sociales , la capilla sixtina (v ictoria, salvador,sara , 2ºa)
Trabajo de sociales , la capilla sixtina (v ictoria, salvador,sara , 2ºa)
 
E-Government 2.0 ohne Freie Lizenzen? Hanken ifib
E-Government 2.0 ohne Freie Lizenzen? Hanken ifibE-Government 2.0 ohne Freie Lizenzen? Hanken ifib
E-Government 2.0 ohne Freie Lizenzen? Hanken ifib
 
Machines électriques
Machines électriquesMachines électriques
Machines électriques
 
Etude géologique
Etude géologique Etude géologique
Etude géologique
 
Note de Conjonture Jones Lang LaSalle - Avril 2012
Note de Conjonture Jones Lang LaSalle - Avril 2012Note de Conjonture Jones Lang LaSalle - Avril 2012
Note de Conjonture Jones Lang LaSalle - Avril 2012
 
Brouillon-NS
Brouillon-NSBrouillon-NS
Brouillon-NS
 
Mona Mur &amp; En Esch - Kurt Weill Fest 2010
Mona Mur &amp; En Esch - Kurt Weill Fest 2010Mona Mur &amp; En Esch - Kurt Weill Fest 2010
Mona Mur &amp; En Esch - Kurt Weill Fest 2010
 
Criteres de figement
Criteres de figementCriteres de figement
Criteres de figement
 
Module 2
Module 2Module 2
Module 2
 

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

Video accessible sur le web et sous-titrage
Video accessible sur le web et sous-titrageVideo accessible sur le web et sous-titrage
Video accessible sur le web et sous-titrage
jlcarves
 
Montage video
Montage videoMontage video
Montage video
Reseau Informed
 
Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012
Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012
Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012
Access42
 
Sous-titrage de vidéos : faciliter le travail avec les sous-titres automatiques
Sous-titrage de vidéos : faciliter le travail avec les sous-titres automatiquesSous-titrage de vidéos : faciliter le travail avec les sous-titres automatiques
Sous-titrage de vidéos : faciliter le travail avec les sous-titres automatiques
arigaud_pro
 
Video et formats numeriques
Video et formats numeriquesVideo et formats numeriques
Video et formats numeriques
Reseau Informed
 
Séance 5 - Cours "Archive, patrimoine et médiation culturelle": Montage techn...
Séance 5 - Cours "Archive, patrimoine et médiation culturelle": Montage techn...Séance 5 - Cours "Archive, patrimoine et médiation culturelle": Montage techn...
Séance 5 - Cours "Archive, patrimoine et médiation culturelle": Montage techn...
valicha14
 
Gérez vos vidéos sur PC
Gérez vos vidéos sur PCGérez vos vidéos sur PC
Gérez vos vidéos sur PC
MEMOIRE PATRIMOINE CLOHARS CARNOET
 
Les fichiers vidéos
Les fichiers vidéosLes fichiers vidéos
Les fichiers vidéos
Cédric Mouats
 
Diffusion multi-écrans : quelles stratégies player et encodage mettre en oeuv...
Diffusion multi-écrans : quelles stratégies player et encodage mettre en oeuv...Diffusion multi-écrans : quelles stratégies player et encodage mettre en oeuv...
Diffusion multi-écrans : quelles stratégies player et encodage mettre en oeuv...Justindwah
 
Les logiciels et gratuiciels de vidéocaptures ( screencast ) - CDÉACF
Les logiciels et gratuiciels de vidéocaptures ( screencast ) - CDÉACFLes logiciels et gratuiciels de vidéocaptures ( screencast ) - CDÉACF
Les logiciels et gratuiciels de vidéocaptures ( screencast ) - CDÉACF
cdeacf
 
Mioozic backfrommax
Mioozic backfrommaxMioozic backfrommax
Mioozic backfrommax
Christophe Keromen
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
Frédéric Harper
 
Introduction à GStreamer
Introduction à GStreamerIntroduction à GStreamer
Introduction à GStreamer
Nicolas Hennion
 
Telestream Vidchecker
Telestream VidcheckerTelestream Vidchecker
Telestream Vidchecker
Benoît Godard
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
Abdoulaye Dieng
 
ASOCEU FRANCE - Lesson 4 - In-Class Exercise: Creative formats
ASOCEU FRANCE - Lesson 4 - In-Class Exercise: Creative formatsASOCEU FRANCE - Lesson 4 - In-Class Exercise: Creative formats
ASOCEU FRANCE - Lesson 4 - In-Class Exercise: Creative formats
A Scuola di OpenCoesione
 
TELESTREAM Vantage - VIDELIO Cap'Ciné
TELESTREAM Vantage - VIDELIO Cap'CinéTELESTREAM Vantage - VIDELIO Cap'Ciné
TELESTREAM Vantage - VIDELIO Cap'Ciné
Benoît Godard
 
Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...
Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...
Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...
Microsoft Technet France
 
12 outils de vidéo + quiz
12 outils de vidéo + quiz12 outils de vidéo + quiz
12 outils de vidéo + quiz
Redaction SKODEN
 
Outil vidéo en animation 1/5
Outil vidéo en animation 1/5Outil vidéo en animation 1/5
Outil vidéo en animation 1/5
R. Defrance
 

Similaire à W3Café accessibilité : Vidéo web accessible, ça avance !? (20)

Video accessible sur le web et sous-titrage
Video accessible sur le web et sous-titrageVideo accessible sur le web et sous-titrage
Video accessible sur le web et sous-titrage
 
Montage video
Montage videoMontage video
Montage video
 
Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012
Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012
Des vidéos libres et accessibles sur le Web, un pari impossible ? - RMLL 2012
 
Sous-titrage de vidéos : faciliter le travail avec les sous-titres automatiques
Sous-titrage de vidéos : faciliter le travail avec les sous-titres automatiquesSous-titrage de vidéos : faciliter le travail avec les sous-titres automatiques
Sous-titrage de vidéos : faciliter le travail avec les sous-titres automatiques
 
Video et formats numeriques
Video et formats numeriquesVideo et formats numeriques
Video et formats numeriques
 
Séance 5 - Cours "Archive, patrimoine et médiation culturelle": Montage techn...
Séance 5 - Cours "Archive, patrimoine et médiation culturelle": Montage techn...Séance 5 - Cours "Archive, patrimoine et médiation culturelle": Montage techn...
Séance 5 - Cours "Archive, patrimoine et médiation culturelle": Montage techn...
 
Gérez vos vidéos sur PC
Gérez vos vidéos sur PCGérez vos vidéos sur PC
Gérez vos vidéos sur PC
 
Les fichiers vidéos
Les fichiers vidéosLes fichiers vidéos
Les fichiers vidéos
 
Diffusion multi-écrans : quelles stratégies player et encodage mettre en oeuv...
Diffusion multi-écrans : quelles stratégies player et encodage mettre en oeuv...Diffusion multi-écrans : quelles stratégies player et encodage mettre en oeuv...
Diffusion multi-écrans : quelles stratégies player et encodage mettre en oeuv...
 
Les logiciels et gratuiciels de vidéocaptures ( screencast ) - CDÉACF
Les logiciels et gratuiciels de vidéocaptures ( screencast ) - CDÉACFLes logiciels et gratuiciels de vidéocaptures ( screencast ) - CDÉACF
Les logiciels et gratuiciels de vidéocaptures ( screencast ) - CDÉACF
 
Mioozic backfrommax
Mioozic backfrommaxMioozic backfrommax
Mioozic backfrommax
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 
Introduction à GStreamer
Introduction à GStreamerIntroduction à GStreamer
Introduction à GStreamer
 
Telestream Vidchecker
Telestream VidcheckerTelestream Vidchecker
Telestream Vidchecker
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
ASOCEU FRANCE - Lesson 4 - In-Class Exercise: Creative formats
ASOCEU FRANCE - Lesson 4 - In-Class Exercise: Creative formatsASOCEU FRANCE - Lesson 4 - In-Class Exercise: Creative formats
ASOCEU FRANCE - Lesson 4 - In-Class Exercise: Creative formats
 
TELESTREAM Vantage - VIDELIO Cap'Ciné
TELESTREAM Vantage - VIDELIO Cap'CinéTELESTREAM Vantage - VIDELIO Cap'Ciné
TELESTREAM Vantage - VIDELIO Cap'Ciné
 
Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...
Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...
Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...
 
12 outils de vidéo + quiz
12 outils de vidéo + quiz12 outils de vidéo + quiz
12 outils de vidéo + quiz
 
Outil vidéo en animation 1/5
Outil vidéo en animation 1/5Outil vidéo en animation 1/5
Outil vidéo en animation 1/5
 

Plus de Jean-Philippe Simonnet

2020 - #WAday : Lier performance et écologie
2020 - #WAday : Lier performance et écologie2020 - #WAday : Lier performance et écologie
2020 - #WAday : Lier performance et écologie
Jean-Philippe Simonnet
 
Assises de la formation - Rendre accessible l’information pour tous
Assises de la formation - Rendre accessible l’information pour tousAssises de la formation - Rendre accessible l’information pour tous
Assises de la formation - Rendre accessible l’information pour tous
Jean-Philippe Simonnet
 
Petits secrets entre amis : les acteurs du web doivent ils prêter serment ?
Petits secrets entre amis : les acteurs du web doivent ils prêter serment ?Petits secrets entre amis : les acteurs du web doivent ils prêter serment ?
Petits secrets entre amis : les acteurs du web doivent ils prêter serment ?
Jean-Philippe Simonnet
 
Les clés pour un bon keynote
Les clés pour un bon keynoteLes clés pour un bon keynote
Les clés pour un bon keynote
Jean-Philippe Simonnet
 
Industrialisation de la vidéo accessible sur le web
Industrialisation de la vidéo accessible sur le webIndustrialisation de la vidéo accessible sur le web
Industrialisation de la vidéo accessible sur le web
Jean-Philippe Simonnet
 
L'accessibilité : un truc réservé aux riches ?
L'accessibilité : un truc réservé aux riches ?L'accessibilité : un truc réservé aux riches ?
L'accessibilité : un truc réservé aux riches ?
Jean-Philippe Simonnet
 

Plus de Jean-Philippe Simonnet (8)

2020 - #WAday : Lier performance et écologie
2020 - #WAday : Lier performance et écologie2020 - #WAday : Lier performance et écologie
2020 - #WAday : Lier performance et écologie
 
Assises de la formation - Rendre accessible l’information pour tous
Assises de la formation - Rendre accessible l’information pour tousAssises de la formation - Rendre accessible l’information pour tous
Assises de la formation - Rendre accessible l’information pour tous
 
Petits secrets entre amis : les acteurs du web doivent ils prêter serment ?
Petits secrets entre amis : les acteurs du web doivent ils prêter serment ?Petits secrets entre amis : les acteurs du web doivent ils prêter serment ?
Petits secrets entre amis : les acteurs du web doivent ils prêter serment ?
 
Les clés pour un bon keynote
Les clés pour un bon keynoteLes clés pour un bon keynote
Les clés pour un bon keynote
 
Rgaa session 25 juin 2010
Rgaa session 25 juin 2010Rgaa session 25 juin 2010
Rgaa session 25 juin 2010
 
Atelier accessibilite
Atelier accessibiliteAtelier accessibilite
Atelier accessibilite
 
Industrialisation de la vidéo accessible sur le web
Industrialisation de la vidéo accessible sur le webIndustrialisation de la vidéo accessible sur le web
Industrialisation de la vidéo accessible sur le web
 
L'accessibilité : un truc réservé aux riches ?
L'accessibilité : un truc réservé aux riches ?L'accessibilité : un truc réservé aux riches ?
L'accessibilité : un truc réservé aux riches ?
 

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

  • 1. Vidéo web accessible, ça avance !? Jean-Philippe Simonnet, Centre-Inffo
  • 2. Le sujet •Qu'est 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
  • 4. WCAG 2 •Règle 1.2 Média temporel : proposer des versions de remplacement aux médias temporels.
  • 5. WCAG 2 •Règle 1.2 Média temporel : sauf si l'audio ou la vidéo sont un média de remplacement pour un texte et qu'ils sont clairement identifiés comme tels
  • 6. WCAG 2 1.2.2 Sous-titres •fournir des sous-titres pour tout contenu audio pré-enregistré dans un média synchronisé •Niveau A
  • 7. WCAG 2 1.2.3 Audio-description ou version de remplacement 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. WCAG 2 1.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. WCAG 2 1.2.5 Audio-description •fournir une audio-description pour tout contenu vidéo pré-enregistré, sous forme de média synchronisé •Niveau AA
  • 10. WCAG 2 1.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. WCAG 2 1.2.7 Audio-description étendue •lorsque les blancs présents dans le fond sonore ne sont pas suffisants pour permettre à l'audio-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. WCAG 2 1.2.8 Version de remplacement pour un média temporel •lorsque les blancs présents dans le fond sonore ne sont pas suffisants pour permettre à l'audio-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. WCAG 2 1.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
  • 15. Référentiels ? •Règle 1.4 Distinguable : faciliter la perception visuelle et auditive du contenu par l'utilisateur
  • 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. Référentiels ? •1.4.7 Arrière-plan sonore de faible volume ou absent  l'arriè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. 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 à l'aide d'une interface clavier sans exiger un rythme de frappe propre à l'utilisateur •Niveau A
  • 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 à l'aide d'une interface clavier, réciproquement, il peut être déplacé hors de ce même composant simplement à l'aide d'une interface clavier •Niveau AA
  • 20. Référentiels ? •Règle 2.2 Délai suffisant : laisser à l'utilisateur 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. En résumé Niveau A • Sous-titres • Audiodescription ou «alternative» (transcript) • Accessibilité au clavier • Mettre en pause, arrêter, masquer • Controle du son Niveau AA • Pas de piège au clavier • Audiodescription Niveau AAA • Transcript • Langues des signes • Pas d’arrière-plan sonore
  • 22. éléments WCAG2 Audio-description •l'audio-description d'une vidéo fournit de l'information à propos des actions, des personnages, des changements de scènes, du texte apparaissant à l'écran et d'autres contenus visuels. •Dans une audio-description standard, la narration est ajoutée durant les pauses qui existent dans le dialogue. •Lorsque toute l'information de la vidéo est déjà donnée dans la piste audio, aucune audio-description supplémentaire n'est requise.
  • 23. éléments WCAG2 Sous-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, l'identification et le positionnement des interlocuteurs
  • 24. éléments WCAG2 Sous-titres •les sous-titres ne devraient pas masquer l'information pertinente de la vidéo, même partiellement. •Dans certaines langues comme l'anglais on distingue entre « caption » et « subtitles », le terme « caption » étant parfois traduit en français par sous-titres pour malentendants.
  • 26. Html 5 : <video> <video> <source src="nom.xxx" type="video/xxx"/> <p>Erreur : vous ne supportez pas html5</p> </video>
  • 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. 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. Trop Facile ? non !
  • 30. merci aux navigateurs ! H264 Ogg Webvm
  • 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
  • 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. 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 for the 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. 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 for the 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
  • 37. Exercices • 4 players différents • Outillage • Intégration html5 avec fallback • Analyse critique
  • 38. Players • Une url pour suivre : http://inffo.fr/w3cafe
  • 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/
  • 45. Faire un sous-titrage http://www.universalsubtitles.org/
  • 46. Faire un sous-titrage Démo en 3 étapes http://www.universalsubtitles.org/
  • 47. 1
  • 48. 2
  • 49. 3
  • 50. C’est ni !