jueves, 16 de febrero de 2012

HTML 5 y accesibilidad

El objetivo de este artículo es recopilar recursos sobre accesibilidad y HTML5.

Si quieres tener una panorámica más estructurada sobre el tema te recomiendo mi artículo: Reseña "Pro HTML5 Accessibility"

Los artículos temáticos que he publicado sobre accesibilidad y HTML5 son:

Última actualización: 11 de mayo de 2014


La especificación de HTML 5 pretende ser una especificación pensada para incluir dinamismo y a la vez accesibilidad desde su concepción. Por tanto, la ventaja principal que tendrá es que los desarrolladores que la utilicen podrán generar efectos de presentación muy atractivos sin limitar la interacción por parte de usuarios de ayudas técnicas. Pero en estos momentos es todavía un borrador, su implementación en los diversos navegadores no es completa aún y por tanto, aunque desde muchos sectores se alienta su uso, yo no lo haría tan alegremente.

Existe un sitio dedicado a informar sobre la implementación de HTML en los navegadores y sus consecuencias para la accesibilidad, así como posibles soluciones: http://html5accessibility.com/ Recomiendo vivamente estar al tanto de las actualizaciones y, sobre todo de las advertencias contenidas en ese sitio.

Entrevista a Emmanuelle Gutiérrez y Restrepo

Un recurso imprescindible, como recomienda Emmanuelle, es la web "HTML 5 Accesibility" donde se propociona información actualizada sobre el soporte en los diferentes navegadores (la última versión es de este mes, donde se sitúan a la cabeza Chrome y Firefox y a la cola Opera y Safari):

This site is a resource to provide information about which new HTML5 user interface features are accessibility supported in browsers, making them usable by people who rely upon assistive technology (AT) to use the web [...]

It is not intended to dissuade developers from using new HTML5 features. Sometimes there are better choices, sometimes developers have to add a little extra to make the feature useful or usable, and other times features have simply not been implemented by any browser or only by browsers that do not yet support assistive technologies. As a consequence it may not yet be practical to use a particular HTML5 feature.

Actualmente el grupo de trabajo WCAG WG está trabajando en las Técnicas HTML5 para las WCAG 2.0, tal y como existen ahora para HTML, PDF, Flash, etc. (Techniques for WCAG 2.0). Es una gran noticia, aunque de momento están en un estado muy inicial.

Elemento video y accesibilidad

Uno de los objetivos más habituales para el uso actual de HTML 5 es la inclusión de contenido multimedia, especialmente la inclusión de vídeos con el elemento video.

Un recurso muy interesante es: "Accesibilidad a los contenidos audiovisuales en la Web a través de HTML5" (PDF, 2MB), trabajo fin de carrera de Alberto Sánchez-Heredero Pérez y tutorizado por Lourdes Moreno López (autora de "Accesibilidad a los contenidos audiovisuales en la web"). Su proyecto ganó el premio Fundación Universia-Fundación Vodafone España

Se puede ver el player en HTML 5 support for an accessible user-video-interaction on the Web. ACCESSIBLE HTML5 MEDIA PLAYER

Otros artículos interesantes sobre la accesibilidad y el uso del elemento video de HTML5 son:

Combinar los nuevos marcadores semánticos con ARIA Roles

Otra de novedades de HTML5 son los nuevos elementos semánticos para marcar la estructura del contenido header, nav, footer, etc.

Traté el soporte de estos nuevos elementos semánticos por los lectores de pantalla y cómo mejor su accesibidad combinándolos con landmark roles de WAI-ARIA en el artículo Navegación más accesible y semántica en 2 minutos con Landmark Roles (WAI-ARIA). En él encontraréis información detallada sobre el soporte y diferentes vídeos de ejemplo.

Puedes consultar todos los vídeos recomendados en mi lista de reproducción de Youtube "HTML 5 y accesibilidad".

Accesibilidad HTML 5 y RIA (Rich Internet Applications)

La siguiente PPT es todo un tesoro: "Accesibility of HTML5 y Rich Internet Applications" de Hans Hillen y Steve Faulker, presentada en CSUN 2011. En ella se explican los problemas habituales de accesibilidad en aplicaciones RIA y sus soluciones.

La primera parte y los ejemplos se pueden encontrar en "Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 Workshop Material"

Podéis consultar todos mis artículos sobre WAI-ARIA en: Índice temático: Accesibilidad y JavaScript / Ajax / WAI -ARIA

Novedades en los formularios

Otra de las novedades de HTML5 es en relación con los formularios, los nuevos tipos de input y los nuevos atributos de los mismos, así como las validaciones nativas de los campos.

Traté en detalle la accesibilidad en relación con este tema en HTML5 y accesibilidad: nuevos tipos de input, atributos asociados y validación nativa

Nuevo elemento figure y figcaption

Estos dos nuevos elementos permiten etiquetar la estructura y relación de una pieza de contenido y el contenido asociado que funciona como etiqueta descriptiva, por ejemplo una imagen y su pie de imagen.

Debido al poco soporte actual de figure y figcaption (solo por Firefox) es muy recomendable leer el artículo HTML5 Accessibility Chops: the figure and figcaption elements o la presentación Accesibilidad práctica con HTML5+CCS3+WAI-ARIA de Camilo Kawerin y Manuel Razzari.

En relación con este tema son muy recomendables los documentos del W3C HTML5: Techniques for providing useful text alternatives y 4.7.1.1Requirements for providing text to act as an alternative for images, sobre el correcto uso de las alternativas textuales para que estas sean efectivamente accesibles en cualquier contexto de uso.

También tiene relación que HTML 5 incluirá un atributo longdesc con más posibilidades que su homólogo en HTML4: HTML5 Image Description Extension (longdesc), W3C

NOTA 2015

Finalmente LONGDESC sí forma parte de HTML5, podéis consultar toda la información y un estudio detallado en mi artículo LONGDESC. Soporte y alternativas (WCAG 2.0, ARIA:"aria-describedby" y "aria-describedat", HTML5: "figure" y "picture").

En este artículo encontraréis además actualizado el soporte actual de los elementos "figure" y picture".

Nuevo elemento canvas

El nuevo elemento canvas se usa para hacer imágenes dinámicas.

Recomiendo los artículos:

Otros artículos de interés sobre HTML 5 y accesibilidad

Si quieres tener una panorámica más estructurada sobre el tema te recomiendo mi artículo: Reseña "Pro HTML5 Accessibility"

  • WebAIM elaboró en 2010 una serie de artículos denominados "Future Web Accesibility" donde comenta nuevas características que incorpora HTML 5 y que mejorarán la accesibilidad de los sitios web. Se puede consultar el enlace a estos artículos y una breve descripción de los mismos en el artículo de Sergio Luján "El futuro de la accesibilidad web con HTML5"
  • "Accessibility and HTML5 Block Links", de Derek Featherstone analiza los problemas de accesibilidad de utilizar bloques de contenido dentro de un enlace, algo aceptable en HTML 5.
  • "Accessible HTML5 Forms – Required Inputs", de Johnny Otis and Etta James, analiza los problemas de accesibilidad para el uso del nuevo atributo required de HTML 5 y lo compara con el uso de aria-required="true" de WAI-ARIA
  • WAI ARIA support on iOS, septiembre de 2012, con el soporte para iPhone 4 e iPad 1

Iré actualizando este artículo con otros recursos de interés que vaya encontrando.



Artículos relacionados:

6 comentarios :
Paulo Vicente Da Luz dijo...

Que buena recopilación de links de interés sobre HTML5 y accesibilidad, aunque no puedo negar que me llamo mucho la atención el párrafo “Pero en estos momentos es todavía un borrador, su implementación en los diversos navegadores no es completa aún y por tanto, aunque desde muchos sectores se alienta su uso, yo no lo haría tan alegremente.” Luego de leer esto me pregunto: ¿Debo usar HTML5 para la implementación de sitios web gubernamentales?.

Saludos desde Lima – Perú

Felix Zapata dijo...

Yo no lo haría a no ser que fuera una imposición del cliente y siendo este caso le indicaría tanto los pros como los contras.

El problema es que cuando desde un cliente o un departamento de marketing se dice HTML5 se piensa en cosas superchulas con efectos raros, etc pero no caen en que puedes usar elementos de HTML5 en una página y que aparentemente no pase nada en ella. O también es muy habitual que la página no tenga nada de HTML5 y todo haya sido hecho con JavaScript y CSS3.

La primera página gubernamental que ví que usaba elementos de estructura de HTML5 fue la del gobierno de Chile y me llamó la atención por los antecedentes que tenían y sus famosas guías de accesibilidad para páginas gubernamentales.

Otra que también descubrí fue la de ACNUR de la República Checa si no recuerdo mal. Hasta ese momento todas las páginas que había visto con HTML5 eran de empresas privadas.

Y cada vez más y más se querrán hacer con HTML5 pero es nuestra labor avisar de los posibles problemas y como dice Olga y Emmanuelle en la entrevista estar al tanto de las mejoras que se vayan realizando en la especificación.

Olga Carreras dijo...

Estoy de acuerdo con Feliz.

HTML 5 es sin duda el futuro, pero hoy por hoy, yo no recomendaría implementar un portal corporativo o de negocio, y menos de la administración pública, completamente en HTML 5, que al fin y al cabo está todavía en definición.

Aunque sólo sea por el diferente soporte de cada navegador para los diferentes elementos y atributos, y por tanto el trabajo extra de buscar alternativas accesibles y compatibles para el resto de navegadores y versiones, no creo que merezca al pena.

Sí es interesante su aplicación para cosas concretar (contenido audiovisual, geolocalización, etc.)

Paulo Vicente Da Luz dijo...

Felix, Olga muchas gracias por sus comentarios, me están aclarando el panorama. Tengo como proyecto la implementación de un sitio web gubernamental. Estoy investigando, ya les comentare mis resultados. Cualquier recomendación, sugerencia y/o critica es muy bien recibida.

html5spain dijo...

Yo creo que tenemos que ir implementando código. Tenemos que ser conscientes de la cantidad de navegadores y versiones y S.O., y ahora dispositivos, donde se ejecutan nuestros contenidos. (tecnología backward y forward)

Es por ello que aún no siendo estándar tenemos que adaptarnos. Es un 'Living Standard', algo quizás muy idealista, pero sin embargo mirar que bien lo han entendido Mozilla, Google, Apple, Samsung, AT&T, Telefónica Digital,... incluso Microsoft, y su IE10.. No hacen más que sacar fabulosas demos de la potencia de HTML5, frameworks,.. hasta un móvil!!!.

El estandar está a la vuelta de la esquina. ¿Qué son 2 años? Además, que aún anunciado por la W3C, yo personalmente no me trago este nuevo plazo... A no ser que sea, 'Living Standard'

Si yo puedo usar toda la potencia que tengo a mi alcance, ¿por qué no hacerla llegar al usuario? ¿Quién determina lo que el usuario debe aprender o no? ¿Porqué no le decimos que existen mejores herramientas a su disposición?¿Porqué no se les dice que son gratis?¿Porqué nos empeñamos en idiotizar al usuario? Los modelos tradicionales tienen que ir cambiando, desde la base de los proyectos, desde el punto de vista de un desarrollador el momento es ahora o nunca, y el que no lo entienda se perderá a un magnífico profesional que sabe interpretar el futuro.

Es decir, o empezamos a aprender juntos, a saber realizar pruebas, a saber trabajar con código compartido, aprendemos a manejar las nuevas APIS sobre las 'nightly builds'... o estaremos fuera.

Si los expertos las están pasando 'canutas' para la nueva definición del lenguaje HTML y las JS API´s, ¿cómo no nos va a resultar difícil formar a nuestros equipos?.

Tenemos que ir poco a poco. Nosotros los desarrolladores tenemos la responsabilidad de saber lo que funciona y lo que no en cada versión de cada navegador sobre cada Sistema Operativo que corra en cualquier máquina o dispositivo. Y esto amigos, no es nuevo. Llevamos años y años y años así... y resulta que cuando empezamos a divertirnos, nos paran los pies.

Es increíble que por un poco de código nuevo y unos nuevos jugetitos (veáse nuevas API´s) se arme tanto revuelo... Yo lo veo como una oportunidad. Y tiene ventajas y desventajas.

Olga Carreras dijo...

Artículo de interés:

The hidden treasures of HTML5 accessibility
http://mediaaccess.org.au/practical-web-accessibility/w3c-column/the-hidden-treasures-of-html5-accessibility

Publicar un comentario en la entrada