Accesibilidad de los reproductores multimedia

En How accessible is the HTML video player? han analizado la accesibilidad de los reproductores multimedia. La conclusión es:

In case you don’t make it all the way to the bottom, I feel, based on the results of testing each player (and comparing to my own Accessible Video Player project), that relying on native video players should be used with caution. This is my opinion stemming from experience, but I found most to have poor keyboard and screen reader support, which may lead to frustrated users. 

There were a lot of inconsistencies across the board as far as keyboard and screen reader support. Some lose focus when the video controls receive focus then fade away, forcing the user to re-position themselves to adjust playback. Others did not trap keyboard focus in full-screen mode, leading to a similar situation as an inaccessible modal window allowing content to be accessed "behind" the window. One player in particular featured very awkward keyboard support where controls were visible on the screen but could not be focused.

Consejos para que el audio y el vídeo sea accesible

En Making Audio and Video Media Accessible del W3C se explica cómo crear contenido multimedia accesible:

Accessible audio and video is essential for people with disabilities, and benefits organizations. Depending on the content of your media, it might need captions/subtitles (a text version of the audio that is shown synchronized in the media player), a transcript (a separate text version of the audio), audio description of visual information (usually an additional audio stream that describes important visual content), or other accessibility functionality/features.

Reproductor multimedia accesible de la AFB

Según la noticia Download the AFB Accessible Player: The American Foundation for the Blind's Accessible HTML5 Video Player (Beta), la American Foundation for the Blind ha publicado un reproductor multimedia accesible basado en HTML5.

El código se puede descargar para usar en cualquier sitio web, y aunque esté desarrollado en Estados Unidos, está traducido al español.

Reproductor de vídeos accesible y adaptable

Muy interesante la propuesta que se presenta en Accessible and Responsive HTML5 Video Player. Además explica cómo crear subtítulos para los vídeos.

Sobre los reproductores multimedia accesibles

En Accessible media player resources and demos se recogen recursos y ejemplos sobre reproductores multimedia accesibles.

Reproductores multimedia accesibles

Es de hace unos meses, pero es una buena referencia: Accessible HTML5 Media Players and More.

Reproductor de vídeo accesible

En YouTube Flash player with captions, presentan un reproductor de vídeo accesible, basado en Flash, que proporciona controles accesibles para personas que utilizan un lector de pantalla o que manejan el ordenador con el teclado.

Acorn Media Player, reproductor de vídeo HTML5

Si HTML5 va a sustitur a Adobe Flash (y al resto de tecnologías similares como Microsoft Silverlight u Oracle/Sun Java) en el desarrollo web, una de las cosas más importantes que debe solucionar es la reproducción de vídeos. Cómo ya expliqué en el artículo Accesibilidad de los vídeos en HTML5, la nueva etiqueta video de HTML5 tiene en cuenta la accesibilidad web, pero todavía hay algunos problemas que se tienen que resolver, como los subtítulos en los vídeos en HTML5.

Acabo de encontrar el proyecto Acorn Media Player - HTML5 media player. Este reproductor es un plugin de jQuery que implementa un reproductor de vídeo de HTML5 personalizado que presta especial atención a la accesibilidad y la personalización.

Sus características accesibles son:

• Control por teclado completo.
• Soporte de subtítulos, pero no nativo de HTML, sino propio con archivos externos SRT.
• Transcripción dinámica generada a partir de los subtítulos.
• Otras características interesantes, como personalización y soporte de temas, lo que permite su adaptación para usuarios con visión reducida.

En Dev Opera hay dos artículos que explican los aspectos técnicos de este reproductor:

• Building a custom HTML5 video player with CSS3 and jQuery
• A more accessible HTML5 player

Y si no te convence porque todavía hay muchos navegadores que no soportan el reproductor de vídeo de HTML5, utiliza Video for Everybody!, que proporciona un método fallback para ofrecer una solución alternativa basada en Flash cuando el reproductor HTML5 no es soportado.

Subtítulos en los vídeos en HTML5

Hace unos días escribí el artículo Accesibilidad de los vídeos en HTML5 en el que comentaba que la nueva etiqueta <video> de HTML5 no contempla por ahora la posibilidad de incluir subtítulos de forma nativa, por lo que los vídeos en HTML5, aunque se mejora el control por medio del teclado, seguirán teniendo problemas de accesibilidad.

Un lector de este blog (¡muchas gracias!) ha dejado el siguiente comentario en dicho artículo:

Si bien no es la solución definitiva, la gente de Opera explica cómo crear subtitulados para videos HTML5 con JavaScript (solo funciona en algunos navegadores):

http://dev.opera.com/articles/view/accessible-html5-video-with-javascripted-captions/

El artículo al que hace referencia el lector, Accessible HTML5 Video with JavaScripted captions, explica una técnica que permite sincronizar la visualización de subtítulos con el vídeo. Básicamente la técnica consiste en:

1. Incluir en la página web que contiene el vídeo los subtítulos en un <div> que se superpone al vídeo.
2. Cada subtítulo esta etiquetado con un <span> que contiene las marcas de tiempo en las que se debe mostrar (para la marcas de tiempo se emplea una nueva posibilidad de HTML5 llamada custom data- attributes).
3. Desde JavaScript, mediante el evento ontimeupdate, que se ejecuta cada cierto tiempo cuando el vídeo se está reproduciendo, y mediante la propiedad currentTime, que indica el tiempo de reproducción actual del vídeo, se muestra el subtítulo adecuado (mediante CSS se oculta o se visualiza el subtítulo).

Sin embargo, lo más interesante es lo que podemos leer al principio del artículo, una nota añadida hace tres meses, el 22/09/2011:

NOTE, September 22nd 2011: There is a new and shiny way to add subtitles to HTML5 video using the new <track> element, but this isn't yet implemented. The hacky technique discussed below works now, but it isn't the "right" way to do it.

Afortunadamente, parece que ya se ha planteado la solución al problema de los subtítulos con la incorporación de una nueva etiqueta llama <track>. Recordemos que HTML5 por ahora es un trabajo en progreso, que el W3C ha fijado que se terminará en el año 2014, aunque para el WHATWG (los que comenzaron el desarrollo de HTML5), nunca estará terminado.

La etiqueta <track> posee el atributo src que permite indicar un fichero externo que contiene los subtítulos (con sus correspondientes marcas temporales). El formato propuesto para los subtítulos se llama WebVTT (Web Video Text Tracks) y es un formato similar a SUB o SRT.

Desgraciadamente, parece que por ahora ningún navegador soporta esta nueva etiqueta, pero dentro de poco podremos hacer cosas como lo siguiente:
<video src="brave.webm">
 <track kind=subtitles src=brave.en.vtt srclang=en label="English">
 <track kind=captions src=brave.en.vtt srclang=en label="English for the Hard of Hearing">
 <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
 <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
</video>

Accesibilidad de los vídeos en HTML5

Hoy he recibido un correo electrónico con la siguiente pregunta de un lector de este blog:

Bueno te escribía por si me puedes ayudar con la accesibilidad en HTML5, quiero insertar un vídeo con la etiqueta <video>, pero me estoy dando de bruces, pues este vídeo, no trae subtítulos, y no puedo meter un alt, ni legend, bueno que no sé cómo hacer este vídeo accesible.

Si no ha habido cambios en los últimos meses, la respuesta es NO, no se puede por ahora. En el artículo Future Web Accessibility: HTML5 <video> nos lo explican muy bien. Así que, por ahora hay que buscar otras alternativas.

Los vídeos normalmente se han mostrado en la web mediante un objeto Flash. Esto ocasionaba dos problemas importantes de accesibilidad (suponiendo que el vídeo estuviese correctamente subtitulado):

1. Había que tener instalado el componente (plugin) de Flash en el navegador. Y además, no sobraba con tener instalada una versión cualquiera, normalmente se tenía que tener instalada la "última de la última" de las versiones del plugin.
2. En algunos navegadores, los controles del reproductor Flash no eran directamente accesibles mediante teclado.

La nueva etiqueta <video> de HTML5 resuelve estos dos problemas:

1. La etiqueta forma parte de la especificación de HTML5 y en un corto plazo de tiempo será soportada por todos los navegadores. Si buscamos el soporte de video en When can I use.., veremos que los principales navegadores la soportan desde hace tiempo. Sin embargo, hay un problema que no está todavía resuelto, la estandarización de los codecs, pero ese es otro problema.
2. Los controles del reproductor son proporcionados directamente por el navegador, por lo que se pueden manejar mediante el teclado sin problemas. En el artículo Keyboard Access for HTML5 Video se presenta un pequeño test que hizo el autor en agosto de 2010: los resultados fueron bastante positivos, por lo que es de suponer que más de un año después la situación sea incluso mejor.

Desgraciadamente, como explican en el artículo Future Web Accessibility: HTML5 <video>, por ahora existe un problema grave de accesibilidad que se está intentado resolver: la especificación actual no contempla ningún mecanismo para proporcionar subtítulos.

Por cierto, desde hace tiempo YouTube ofrece la posibilidad de visualizar sus vídeos utilizando un reproductor HTML5, aunque con ciertas restricciones.

Controles de YouTube accesibles

En el artículo Keyboard Accessible YouTube Controls nos explican cómo crear unos controles del reproductor de vídeos de YouTube que sean accesibles desde el teclado.
Como nos explican en el artículo, la imposibilidad de manejar los controles del reproductor de YouTube desde el teclado puede ocasionar problemas de accesibilidad para ciertos usuarios:

• Personas ciegas que utilizan el teclado porque no pueden utilizar el ratón.
• Personas con baja visión que usan el teclado de vez en cuando.
• Personas con problemas de movilidad o destreza que no pueden utilizar el ratón.

Además, yo añadiría un cuarto grupo de usuarios:

• Cualquier usuario, que por alguna razón (por ejemplo, porque se ha roto el ratón), debe emplear el ordenador sólo con el teclado.

La solución propuesta implica utilizar un poco de código de JavaScript, ya que hace uso del API de YouTube para controlar el reproductor.

Subtitulado automático de la televisión

En el periódico El País se ha publicado la noticia Imposible subtitular 'La noria'. Algunos extractos de la noticia:

Alrededor de un millón de personas tienen algún tipo de deficiencia auditiva o visual y la ley española obliga a todos los operadores a emitir un determinado porcentaje de la parrilla con rótulos y a ofrecer un número de horas diarias en lengua de signos y audiodescripción.
Para agilizar los procesos de subtitulado, sobre todo en los programas en directo -como Los desayunos de TVE, España directo o 59 segundos-, TVE utiliza un sistema de reconocimiento de voz. Transmisiones en directo, desde el telediario a la misa, pasan por la máquina que identifica el habla.
TVE utiliza el mismo sistema que la televisión pública británica, la BBC. "No hay ninguno más rápido. Es cierto que hay un retardo, pero los sordos parten de cero y pueden seguir un programa. Es lo que diferencia entre programas accesibles y no accesibles", dice Díez Argüelles.
¿Hasta qué punto es fiable este sistema? Mercedes de Castro, coordinadora técnica del Centro Español de Subtitulado y Audiodescripción (CESyA), es escéptica. "La tecnología de reconocimiento de habla puede dar un error de entre el 15% y el 80%, si se trata de un programa con mucho ruido, como por ejemplo, un magacín. Si hay problemas de acústica, es una locura".

Hace unos meses escribí sobre algo parecido pero relacionado con YouTube: Subtítulos automáticos.

Subtítulos para cualquier vídeo

Acabo de leer en el periódico El País la noticia Subtítulos para todos en la Red. Según la noticia:

La organización sin ánimo de lucro Participatory Culture Fundation ha creado una herramienta que trabaja con código libre y gratuito. Lanzada oficialmente hace dos semanas, permite subtitular cualquier tipo de vídeo sin necesidad de descargar software o alojar el vídeo en ninguna plataforma o formato. La tecnología es simple: se añade la aplicación al vídeo y ya se pueden escribir los subtítulos, visibles para todos los usuarios.
La herramienta está pensada para permitir la colaboración entre la gente, ya que funciona de forma similar a un artículo de Wikipedia, en el que se pueden hacer mejoras de forma continuada y marcar los cambios. Una vez que un vídeo ha sido subtitulado, se pueden añadir cuantas traducciones se quiera en todos los idiomas.

En la web de Participatory Culture Fundation podemos encontrar sus proyectos, entre los que aparece Universal Subtitles y Miro.

Más sobre subtítulos automáticos

Hace un par de días escribí la entrada Subtítulos automáticos donde comentaba que YouTube tiene un nuevo sistema que permite crear subtítulos de forma automática a partir del audio del vídeo.

Buscando por YouTube he encontrado dos vídeos oficiales de Google donde se explica el nuevo sistema. Además he descubierto que el nuevo sistema también permite automatic timing: sincroniza de forma automática una transcripción de un vídeo con el audio del vídeo.


Google Announces Automatic Captions on YouTube: este vídeo, de casi 1 hora de duración, es la presentación oficial del nuevo sistema realizada en noviembre de 2009. Y aquí el anuncio oficial de Google: Automatic captions in YouTube.



Automatic Captions in YouTube Demo: este vídeo, de poco más de 2 minutos, es una demostración de las capacidades de subtitulado del nuevo sistema.

Subtítulos automáticos

Acabo de leer en El Mundo la noticia Listos para los subtítulos automáticos. En YouTube - Google han desarrollado un sistema automático para la inclusión de subtítulos de forma automática en todos los vídeos que se publiquen en YouTube. Por ahora el sistema está sólo disponible para el inglés, pero no es de extrañar que en poco tiempo se pueda emplear con otros idiomas.

Un gran avance de cara a mejorar la accesibilidad web. Dentro de poco nadie tendrá ninguna excusa para no tener sus vídeos subtitulados.

Una captura de pantalla de cómo es el sistema:

Más información: YouTube Launches Auto-Captions For All Videos.

Ejemplo de multimedia accesible

La página Clínicas de Ajedrez CUAED Capítulo 1 tiene un ejemplo de cómo hacer que un vídeo sea accesible.

Por un lado, ofrece subtítulos (closed caption) que se pueden activar o desactivar a decisión del usuario; además, también se puede elegir el idioma de los subtítulos. Esta ayuda es útil para los usuarios con problemas auditivos.

Por otro lado, ofrece la transcripción. La transcripción puede ser literal y contener únicamente lo que se oye y dice, pero también puede aportar más información para interpretar lo que se oye. Esta ayuda es útil para los usuarios con problemas de visión que usan un lector de pantallas o con problemas auditivos.

Herramienta para subtitulado

Acabo de encontrar la página del Carl and Ruth Shapiro Family National Center for Accessible Media (NCAM). Este sitio web está dedicado a mejorar la accesibilidad de los contenidos multimedia.

Entre varios recursos interesantes destaca el programa Media Access Generator (MAGpie). Este programa permite crear subtítulos (closed captions) y descripciones del audio (audio descriptions) para elementos multimedia como los vídeos. Está hecho en Java y, por tanto, necesita una Máquina Virtual Java para ejecutarse.

Esta herramienta es muy sencilla de utilizar. En primer lugar se tiene que elegir el estilo (tipo de letra, tamaño, color, etc.) de los subtítulos.

A continuación se tienen que crear los subtítulos, para ello se define el instante inicial y final de aparición de cada subtítulo.

Por último se exporta el proyecto al formato de salida. Como se puede ver en la siguiente imagen, esta herramienta permite exportar a SMIL o a SAMI.

Para más información sobre multimedia y subtítulos:

• Subtítulos y lengua de signos todo junto
• Serie "Guía breve": Multimedia
• SMIL y la accesibilidad web

Subtítulos y lengua de signos todo junto

Acabo de encontrar una demostración muy interesante y útil de SMIL: Example of Sign language with two Smil synchronized video tracks, FLV format. Incluyo una captura de pantalla:



Se trata de un visor de SMIL desarrollado con Flash que permite utilizar dos flujos (streams) de vídeo de forma conjunta. De esta forma se puede ofrecer un vídeo, los subtítulos, la descripción del audio y un segundo vídeo con la lengua de signos todo en uno. El reproductor permite activar o desactivar las distintas opciones (subtítulos, descripciones y lengua de signos). ¡Una maravilla!

Serie "Guía breve": Multimedia

Consejo 3: Multimedia: Proporcione subtítulos y transcripción del sonido, y descripción del vídeo.

Los elementos multimedia que tanto se utilizan en las páginas web hoy en día pueden ocasionar graves problemas de accesibilidad, ya no sólo a las personas con algún tipo de discapacidad, sino a todo el mundo en general. ¿Por qué?

Porque al ser elementos que no son HTML requieren, en la mayoría de los casos, la instalación de un visor específico (plug-in, add-in o extensión) que sea capaz de interpretar el elemento multimedia. Y no todo el mundo tiene su ordenador actualizado con los últimos visores.

Por tanto, como regla general, no se debe abusar de los elementos multimedia y el diseñador de una página web se tiene que preguntar, antes de incluirlo en una página web, si es un elemento esencial que no se puede eliminar o sustituir por otro más accesible.

Si nos centramos en los problemas de accesibilidad que pueden tener las personas con discapacidad, los elementos multimedia más problemáticos son los vídeos, las grabaciones sonoras y las animaciones.

Respecto a los vídeos y las grabaciones sonoras, en ambos casos se tiene que proporcionar una transcripción de los dialógos y una descripción de los sonidos. En el caso de los vídeos también se tiene que proporcionar una descripción del vídeo en sí (de la imagen). Un par de artículos sobre subtítulos y descripciones: Captioning y Audio description.

Hoy en día existen tecnologías que permiten sincronizar los subtítulos o una transcripción con un vídeo o una grabación sonora. Las dos tecnologías que más se emplean son Synchronized Multimedia Integration Language (SMIL), una tecnología promovida por el W3C, y por otro lado Microsoft Synchronized Accessible Media Interchange (SAMI). Hace unos días publiqué una entrada llamada SMIL y la accesibilidad web donde comento brevemente estas dos tecnologías.

En el caso de las animaciones, lo más normal hoy en día es que se realicen con Adobe (Macromedia) Flash. Para conocer los problemas de accesibilidad que presentan los elementos multimedia creados con Flash y cómo hacer que sean accesibles, recomiendo la lectura de las siguientes páginas:

• Flash y Accesibilidad Web: una relación complicada: en este artículo podemos leer que la accesibiliad de Flash sólo esta disponible en el sistema operativo Microsoft Windows y con el navegador Microsoft Internet Explorer, ya que Flash utiliza la tecnología tecnología Microsoft Active Accesibility (MSAA) para ofrecer las carecterísticas de accesibilidad.
• Creating Accessible Macromedia Flash Content
• Flash 8 Accessibility Design Guidelines: de Adobe.
• Flash 8 Accessibility Design Guidelines: similar al anterior.
• Best Practices for Accessible Flash Design: de Adobe.

(Actualización 22/11/2007) Otro tipo de elemento problemático, que no es del todo multimedia, pero que se puede incluir dentro de este consejo son los documentos PDF (Portable Document Format). Algunos páginas donde nos explican cómo hacer que un PDF sea accesible:

• Técnicas para el desarrollo de documentos PDFs accesibles
• PDF accesibles
• Creating accessible Adobe PDF Files
• Guía Accesibilidad en Documentos PDF

Adobe ofrece un servicio llamado Online conversion tools for Adobe PDF documents que convierte un documento PDF a HTML o texto plano para aquellos usuarios que no dispongan de un visor de PDF o que su lector de pantalla no sea compatible con Adobe Acrobat Reader.

SMIL y la accesibilidad web

He recibido un correo electrónico en el que me preguntan si conozco algún editor de SMIL que permita realizar subtitulado y utilizar el lenguaje de signos. He tenido que contestar que lo desconozco. Pero... ¿qué es SMIL?

SMIL es el acrónimo de Synchronized Multimedia Integration Language, una recomendación del W3C que se emplea para describir presentaciones multimedia, es decir, presentaciones donde podemos combinar texto (con formato), imágenes, audio y vídeo. SMIL es un lenguaje de marcado basado en XML.

Como de costumbre, Microsoft tiene una tecnología con un propósito similar llamada SAMI (Synchronized Accessible Media Interchange).

Para trabajar con cualquiera de las dos tecnologías necesitamos una herramienta de autor para crear el contenido y un reproductor compatible para poderlo visualizar.

En el caso de SMIL, algunos reproductores compatibles son Apple QuickTime, RealPlayer o Microsoft Windows Media Player. En el caso de SAMI, Microsoft Windows Media Player es compatible con esta tecnología.

Ambas tecnologías se pueden emplear para proporcionar subtítulos y transcripciones de la pista sonora de algún elemento multimedia de nuestras páginas web como los vídeos. Con esta tecnología podemos sincronizar los subtítulos y cualquier otro elemento con el vídeo.

En la página Webcasting Samples se pueden encontrar varios ejemplos para diferentes reproductores multimedia. A continuación incluyo dos ejemplos con dos estilos diferentes, uno integrado en la propia página web y otro que hace uso de forma externa del reproductos Microsoft Windows Media Player: