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.

Editor de HTML5

Ernesto Arce, un lector de este blog que reside en Chile, me ha hecho llegar esta información. BlueGriffon es un editor de HTML5 gratuito. Está basado en Gecko, el motor de visualización del navegador Firefox.

Con este editor podemos hacer uso de las nuevas etiquetas semánticas de HTML5 como header, footer, article y section, que permiten mejorar la accesibilidad de las páginas web.

Además, también soporta otros estándares como CSS3, SVG y MathML. Y el editor también puede ser extendido mediante complementos. ¡Y todo gratuito!

Accesibilidad en HTML5

HTML5 and Accessibility es un pequeño artículo escrito por Bruce Lawson y Steve Faulkner, en el que se muestran las nuevas características de HTML5 que pueden ayudar a mejorar la accesibilidad de las páginas web.

Quizás lo más interesante del artículo sea el apartado dedicado al uso de las nuevas etiquetas estructurales de HTML5 (header, nav, section, article, footer) o al uso de los roles de WAI-ARIA (banner, navigation, article, contentinfo).

La etiqueta <nav> de HTML5

A los alumnos de la asignatura Experiencia de usuario del Curso de especialista en diseño web que estoy impartiendo les propuse hace casi dos semanas un ejercicio complementario: ¿Cómo mejorará la accesibilidad web HTML 5? Para guiar un poco más el ejercicio, les comentaba que en este blog he escrito varias entradas sobre ello, y además les incluía tres preguntas para centrar aún más el tema:

• ¿Cómo mejorará la accesibilidad web HTML 5?
• ¿A quién crees que beneficiará más?
• ¿Alguna de las características beneficiará a la mayoría de la gente y no sólo a grupos reducidos?

Como el ejercicio es complementario, es decir, no se evalúa ni se va a hacer un examen sobre ello, ha ocurrido lo que esperaba: no ha contestado nadie, absolutamente nadie.

Hoy les he escrito el siguiente mensaje, para ver si alguien se anima de una vez:

Un nuevo elemento que ayuda a mejorar la accesibilidad es el nuevo elemento (etiqueta) <nav>. Esta etiqueta permite definir un elemento navegacional de la página web, como puede ser el menú principal o el menú secundario.

Se debe utilizar para marcar los elementos principales de navegación, no se deben marcar todos los elementos, como podemos leer en el apartado 4.4.3 The nav element de la especificación HTML5:

Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.

El artículo Semantic navigation with the nav element explica muy bien el uso de esta etiqueta y las diferentes situaciones donde se recomienda su uso.

Un ejemplo de uso de esta etiqueta es:

<nav>

<ul>

<li><a href="/accesibilidad/">Accesibilidad</a></li>

<li><a href="/html/">HTML</a></li>

<li><a href="/javascript/">JavaScript</a></li>

<li><a href="/css/">CSS</a></li>

</ul>

</nav>

¿Por qué mejora la accesibilidad esta etiqueta? Porque permite identificar de una forma clara los elementos de navegación que tiene una página web, por lo que las tecnologías de apoyo como los lectores de pantalla lo pueden detectar y ofrecer al usuario cuando lo necesite.

Un compañero ha leído este mensaje y me ha preguntado: ¿hay alguna ventaja más? Por supuesto:

• Proporciona un método explícito de especificar cuales son los elementos de navegación de un sitio web y de una página web.
• Se puede (podrá) configurar el agente de usuario (navegador) para que inicialmente salte el menú de un sitio web, por lo que ya no es necesario escribir "saltar enlaces" o "saltar al contenido principal".
• Un lector de pantalla puede tener un comando (atajo de teclado) para acceder directamente a los elementos de navegación de una página, igual que tiene un comando para mostrar la lista de enlaces o la lista de encabezados de una página.
• Un agente de usuario en un dispositivo con una pantalla pequeña (por ejemplo, un teléfono), puede mostrar los elementos de navegación de forma independiente o cuando el usuario pulse una tecla del dispositivo.
• El elemento <nav> puede funcionar como un <div> a todos los efectos. Ya no es necesario escribir <div id="menu"> o <div id="navigation">. <nav> tiene 3 letras como <div>, así que no se puede decir que haya que escribir más.
  

Y seguro que hay muchas más ventajas que yo desconozco. ¿Se te ocurre alguna ventaja más?

Evidentemente, todas estas ventajas dependerán de que los agentes de usuario y las tecnologías de apoyo soporten los nuevos elementos (etiquetas) de HTML5. Que no lo soporte ahora, no es razón para no usarlo ya: si ya lo usamos, nuestras páginas estarán preparadas para el futuro.

¿Qué le falta a la especificación de HTML5?

El artículo What's still missing in the HTML5 spec explica lo que falta por definir en la especificación de HTML5. Recordemos que según el nuevo calendario para HTML5 del W3C, la recomendación final se espera que se publique en el segundo cuatrimestre de 2014.

Según el artículo, lo más importante que falta por definir son las capacidades multimedia de HTML5 y el soporte de WebSocket, una tecnología que permitirá la comunicación en ambos sentidos (¿un AJAX mejorado?).

Otro tema crítico, la estandarización de los codecs de vídeo, parece que no se resuelve y por ahora no existe un consenso.

Nuevo calendario para HTML 5

El artículo W3C: HTML5 Spec Due in 2014 nos cuenta que el W3C ha redefinido el calendario del desarrollo de HTML 5.

Ahora parece que la última llamada (last call) se producirá durante el segundo cuatrimestre de 2011 y se espera que la especificación completa sea publicada en el año 2014. El calendario completo lo podemos encontrar en HTML Working Group Charter:

• Last Call Working Draft: 2011 Q2 (segundo cuatrimestre)
• Candidate Recommendation: 2012 Q2
• Proposed Recommendation: 2014 Q1 (primer cuatrimestre)
• Recommendation: 2014 Q2

Mientras tanto, el W3C nos indica que debemos ser cuidadosos a la hora de utilizar HTML 5, pero también nos animan a utilizarlo cuando sea conveniente:

Although W3C officials have warned developers not to adopt the HTML5 capabilities prematurely, the standards body also is encouraging developers to implement HTML5 where appropriate.

¿Cuáles son las diferencias entre HTML4 (XHTML 1.0) y HTML5?

El W3C ha preparado un documento, HTML5 differences from HTML4, en el que detalla las principales diferencias entre HTML4 (y su variante según XML, XHTML 1.0) y la nueva versión del lenguaje, HTML5.
Algunas de las principales diferencias son:

• HTML5 define una sintaxis que es compatible con HTML4 y XHTML 1.0. Por tanto, un salto de línea se puede escribir como <br> (HTML4) o <br /> (XHTML 1.0).
• Para definir el juego de caracteres se introduce un nuevo atributo para la etiqueta <meta>:
  <meta charset=”UTF-8″>
  aunque todavía es posible utilizar el método tradicional:
  <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
• Se simplica el DOCTYPE:
  <!DOCTYPE html>
• HTML5 permite incluir elementos de SVG y MathML.
• Se introducen nuevos elementos, como: section, article, aside, header, footer, etc.
• Se introducen nuevos atributos, como: media, charset, autofocus, placeholder, etc.
• Algunos elementos cambian, como: a, b, i, menu, etc.
• Algunos atributos cambian, como: type, name, summary, etc.
• Algunos elementos desaparecen, como: basefont, big, center, etc.
• Algunos atributos desaparecen, como: align, background, bgcolor, etc.
• Mejora de las API, como: getElementsByClassName() y innerHTML.

Vídeo sobre accesibilidad en HTML5

Hace unos pocos meses, en octubre, se celebró Amsterdam el congreso Fronteers 2010, dedicado a los últimos avances del desarrollo web, como son HTML5, CSS3, SVG, etc.

Se grabaron 14 sesiones en vídeo y se han publicado en Internet.

Una de las sesiones fue HTML5 Accessibility: Is it ready yet? de Steve Faulkner y Hans Hillen, que tenía la siguiente descripción:

What are the features in HTML5 that have the potential to:

* make it easier for developers to provide a more accessible user experience?
* make it harder for developers to provide a more accessible user experience?

Where does WAI-ARIA fit into the HTML5 accessibility story? How can WAI-ARIA fill the gaps in HTML5 UI accessibility?

Y a continuación el vídeo:


Steve Faulkner & Hans Hillen | HTML5 Accesibility: is it ready yet? | Fronteers 2010 from Fronteers on Vimeo.

También tenemos la presentación disponible en Slideshare:

HTML5 Accessibility - Is it ready yet?

View more presentations from stevefaulkner.

Características para mejorar la accesibilidad en HTML5

Hace unos días escribí el artículo El futuro de la accesibilidad web con HTML5 sobre una interesante serie de artículos de WebAIM sobre las nuevas características que incorpora HTML5 que mejorarán la accesibilidad web.

El sitio web HTML5 accessibility proporciona información sobre que nuevos elementos de HTML5 proporcionan características de accesibilidad que hacen que sean utilizables por los usuarios que utilicen productos de apoyo (ayudas técnicas) para navegar por la web.

Por ahora, como podemos ver en la siguiente imagen que muestra parte de la tabla que analiza el nivel de soporte por parte de los navegadores más importantes, la situación no es muy buena, ya que pocas son las características soportadas por algunos navegadores:

El futuro de la accesibilidad web con HTML5

La nueva especificación de HTML5 va avanzando (el último borrador, y con ese ya van ocho, se publicó el 19 de octubre de 2010) y no hay fecha para la publicación definitiva, pero quizás en 2011-12 vea la luz. Mientras tanto, ya podemos disfrutar de muchas de sus nuevas características ya que los navegadores más modernos ya las incorporan.

HTML5 incorpora algunas características que mejoran la accesibilidad de los sitios web. La serie de artículos Future Web Accessibility del sitio web Web Accessibility in Mind (WebAIM) explica las principales características que vamos a poder utilizar:

1. Future Web Accessibility: HTML5 <video>: la nueva etiqueta <video> permite tener vídeo de forma nativa en las páginas webs, sin tener que utilizar un plugin. Sin embargo, abre una guerra para decidir cuales van a ser los codecs para transmitir los vídeos. Respecto la accesibilidad, se espera que mejore al incorporar el manejo de los controles del reproductor mediante el teclado, pero por ahora la especificación no proporciona soporte para los subtítulos o descripciones del audio.
2. Future Web Accessibility: HTML5 Semantic Elements: HTML5 incorpora nuevos elementos (etiquetas) que añaden más semántica a una página web al permitir etiquetar secciones lógicas o componentes de una aplicación web o un documento, como <section>, <nav>, <article>, <aside>, <hgroup>, <header> y <footer>. El empleo de los elementos <section> y <article> resuelve un problema que existe al emplear las etiquetas <h1>-<h6>, ya que estas etiquetas representan una jerarquía absoluta y tienen problemas al incluir contenido de diversos orígenes. El elemento <nav> permite definir los elementos (normalmente, los enlaces) que definen la navegación de un sitio web. La utilidad de estos nuevos elementos de cara a la accesibilidad web dependerá del nivel de soporte que proporcionen las ayudas técnicas como los lectores de pantalla.
3. Future Web Accessibility: New <input> Types in HTML5: HTML5 define 13 nuevos valores para el atributo type: search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range y color. Estos nuevos controles ofrecen mejoras, ya que las ayudas técnicas como los lectores de pantalla pueden realizar un mejor tratamiento de ellos, y permiten lograr una mejor consistencia entre diferentes sitios web, lo que disminuye su complejidad y facilita su uso por parte de personas con discapacidad cognitiva.
4. Future Web Accessibility: HTML5 <input> Extensions: HTML5 también añade cuatro nuevos atributos a la etiqueta <input> que pueden mejorar la accesibilidad y el manejo de los formularios: autofocus, placeholder, required y pattern.
5. Future Web Accessibility: SVG: SVG es una especificación de W3C que permite crear gráficos escalables. Incorpora ciertas características que permiten que los gráficos creados sean accesibles.
6. Future Web Accessibility: canvas: el nuevo elemento <canvas> proporciona un área en blanco en la página web que permite dibujar en 2D lo que se quiera mediante un lenguaje de script como JavaScript. Este elemento plantea bastantes retos de accesibilidad.
7. Future Web Accessibility Updates: en este artículo refleja algunos cambios que se han producido en los últimos meses y que afectan a los artículos anteriores. En concreto, se refiere al elemento <video>, a los gráficos SVG y al elemento <canvas>.

Tutorial sobre HTML5

En el sitio web del W3Schools, uno de los mejores sitios con información para el desarrollo web porque es precisa y está actualizada, podemos encontrar un tutorial y una guía de referencia sobre HTML5, la nueva versión del lenguaje de marcado HTML que se espera que se publique como recomendación por el W3C en el 2011.