Un lecteur vidéo accessible qui répond au standard du SGQRI 008
Expertise
2 juin 2010 – 8h03
Lors de la refonte de notre site « Nurun services conseil », un beau défi a été offert à l’équipe des Communications Interactives dont je fais partie : réaliser un site répondant le plus possible au prochain standard d’accessibilité du Web du gouvernement du Québec, le SGQRI 008. Parmi les défis que nous avions à relever figurait celui de l’intégration des vidéos dans un lecteur accessible avec sous-titrage et transcription.
Caractéristiques visées
- l’ensemble de l’interface du lecteur vidéo doit être navigable au clavier (sans souris);
- la nature et la fonction de chaque bouton du lecteur doivent être perceptibles et compréhensibles par l’intermédiaire d’un lecteur d’écran;
- la vidéo doit offrir une option de sous-titrage;
- la taille d’affichage des sous-titres doit pouvoir être grossie jusqu’à 200% sans perte de lisibilité et respecter le taux de contraste minimum acceptable en tout temps;
- la vidéo doit offrir une alternative textuelle accessible.
Les choix retenus
- Format vidéo : .flv
- Lecteur vidéo : JW Player
- Interface : html + CSS + JavaScript
Il faut distinguer la vidéo, son lecteur ainsi que l’interface permettant d’interagir avec ce dernier. Le lecteur « JW player » offre la possibilité d’utiliser sa propre interface flash ou de contrôler ce dernier à partir de commandes en JavaScript. Ceci nous permet de faire certains choix au niveau graphique, de pouvoir adapter au besoin l’interface à chaque site. Nous gardons aussi le contrôle sur la façon de baliser le tout et de respecter les règles d’accessibilité. Avec le retour d’expérience utilisateur, nous conservons toute latitude pour d’éventuelles améliorations.
Exemple no 1 : lecteur adapté à la charte graphique la page
Exemple no 2 : lecteur avec sous-titrage
Étant entièrement contrôlé par la feuille de style, il serait tout à fait possible de préférer un affichage superposé à la vidéo. Il faut rappeler qu’on doit pouvoir grossir le texte jusqu’à 200% et que ce dernier doit toujours conserver un taux de contraste minimum acceptable. Une vidéo peut contenir du texte à même l’image qui pourrait se retrouver en conflit avec le texte du sous-titrage. Nous avons donc choisi un affichage sous la vidéo, assurant ainsi une lisibilité maximale.
Exemple no 3 : lecteur avec sous-titrage grossi à 200%
Le sous-titrage est contenu dans le code html de la page et non dans le lecteur Flash. Pour augmenter ou diminuer sa taille, il suffit d’utiliser l’option de son navigateur ou l’option d’affichage du site : le texte est alors proportionnel au choix de lecture de l’utilisateur. Il respecte ses choix et ses besoins.
Exemple no 4 : lecteur sans feuille de style
L’ensemble des contrôles du lecteur a été programmé sous forme de boutons. En désactivant les feuilles de style dans son navigateur, on peut alors avoir une meilleure idée de l’information qui sera lue par un lecteur d’écran. Le texte alternatif est ici en réalité le texte de chaque bouton qui sera placé hors écran par la feuille de style et remplacé à l’écran par l’icône approprié.
Exemple no 5: navigation avec lecteur d’écran
Exemple no 6 : sans Flash ou sans JavaScript
En l’absence de Flash ou de JavaScript, nous avons choisi de remplacer l’ensemble des éléments liés au fonctionnement du lecteur par une image. Ici, l’utilisation de la vidéo a été considérée comme une option d’enrichissement progressif du contenu de la page. L’ensemble du code html qui n’est pas désirable ou fonctionnel sans JavaScript est écrit en JavaScript. Il est considéré comme une couche optionnelle qui ne doit pas être confondue avec le code essentiel de la page.
Option pour iPad
Ne pouvant être utilisé sur un iPad, une version html 5 de remplacement sera alors offerte sur cette plateforme. Cette version est également accessible pour les personnes présentant des troubles de la vue en activant la fonction « Voice over » de l’appareil. 
Sous-titrage
Le sous-titrage est enregistré dans un fichier de format XML externe. Son format est simple et peut facilement être modifié dans un éditeur de texte.
Transcription
La transcription d’une vidéo peut prendre plusieurs formes. Certaines chercheront à décrire de façon linéaire l’ensemble des éléments pertinents contenus dans la vidéo, tant visuels que sonores, en respectant scrupuleusement l’ordre d’arrivée de chaque. Certaines seront un peu comme une traduction et permettrons alors des adaptations pour en faire un texte plus lisible. D’autres encore seront davantage une alternative à la vidéo, une version de rechange visant à remplir le même objectif, mais pas obligatoirement de la même façon.
Exemple : Transcription de la vidéo «Stratégie »
http://www.nurun.com/servicesconseils/transcription/strategie
La transcription de cette vidéo, comme dans le cas des autres également présentes sur la page d’accueil, a été placée dans une nouvelle page. Pour éviter d’avoir à retourner à la page d’origine de chaque vidéo, il a été choisi d’inclure dans la page de transcription la vidéo et son menu.
Visuel et narration
Nous avons choisi pour cette série de vidéos très narratives de diviser l’information visuelle et narrative en deux blocs. Ici, les éléments visuels ont été considérés comme étant en appuis à la narration, comme un renforcement cognitif à celle-ci. Mais à l’écrit cette fonction de renforcement avait plutôt l’effet contraire lorsque l’on cherchait à suivre en alternance la narration et la description. En séparant les deux éléments, le texte conserve tout son sens et atteint mieux son objectif. Il peut être lu comme un tout. Au besoin il peut être extrait. L’information visuelle est ici décrite pour donner une idée de ce qui était visible tout simplement. La division avec titre de section (intertitre) permet, au besoin, pour l’utilisateur de lecteur d’écran, de passer facilement de l’un à l’autre. Par exemple, avec Jaws, en arrivant sur la page, l’utilisateur clique sur 1 pour atteindre le titre de niveau 1 « Transcriptions de la vidéo Stratégie » et deux fois sur 2 pour atteindre directement la transcription de la narration.
Du cas par cas
Advenant un autre type de vidéo, par exemple un dialogue, la transcription se rapprocherait un peu plus d’un scénario ou texte de théâtre avec indications scéniques. La forme idéale d’une transcription doit donc être évaluée au cas par cas et reste subjective et sujette à réflexion.
Un processus d’amélioration continue
L’accessibilité n’est pas une science exacte. Il y a plusieurs façons d’aborder la chose, plusieurs choix qui peuvent être matière à discussion. L’optimisation de l’accessibilité d’un site Web et ses composantes passe par un processus d’amélioration continue. Alors, n’hésitez pas à participer à celui-ci en nous communiquant vos commentaires ou votre expérience utilisateur.
[...] This post was mentioned on Twitter by François Vachon and ericmelancon, NURUNconseils. NURUNconseils said: Un lecteur vidéo accessible qui répond au standard du SGQRI 008 http://ow.ly/1T0iP [...]
Ce travail sur un contrôleur de vidéos Flash accessible est tout à fait intéressant.
Vous nous invitez à participer à l’amélioration continue de ce projet par nos commentaires et en vous communiquant notre expérience utilisateur. Serait-il également possible de collaborer au code? J’ai moi-même commencé des travaux sur un contrôleur de vidéos Flash (http://ur1.ca/vhzq) sous licence LGPL. Le code que vous trouverez à cet endroit est encore embryonnaire et fait plus office de test préliminaire que de code prêt pour la production puisqu’il n’a pas encore été optimisé, mais l’intégration HTML et du WAI-ARIA pourrait vous intéresser.
Vous offrez une solution de sous-titrage sur laquelle nous n’avons pas encore travaillé et je crois que nous offrons une intégration de certains contrôles « complexe » intéressante grâce au WAI-ARIA.
La fusion de nos efforts respectifs pourrait offrir une solution tout à fait intéressante. Qu’en pensez-vous?
Je reste à votre disposition si vous souhaitez discuter des différentes pistes de solutions par lesquelles nous sommes passés pour arriver à cette utilisation du WAI-ARIA et les solutions que nous développons en ce moment pour améliorer l’intégration fluide du WAI-ARIA à l’intérieur d’une intégration HTML valide.
Merci pour ton commentaire Samuel!
La beauté du code hors Flash pour la conception de l’interface est sa flexibilité qui permet d’intégrer ou d’expérimenté plusieurs améliorations au fil du temps. Ce qui est tout à fait dans l’idée d’amélioration continue.
Dans nos objectifs d’optimisation du code, il y avait entre autre l’ajout de WAI-ARIA.
Je te remercie pour le lien vers tes travaux sur le même sujet. Il me fera plaisir d’analyser le tout et d’échanger éventuellement avec toi sur les différentes pistes de solutions à explorer.
Une telle offre est des plus appréciée!