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:

• HTML5 y accesibilidad: nuevos tipos de input, atributos asociados y validación nativa
• Descripción de las tablas en HTML5. Alternativa a "summary"
• Navegación más accesible y semántica en 2 minutos con Landmark Roles (WAI-ARIA)
• LONGDESC. Soporte y alternativas (WCAG 2.0, ARIA:"aria-describedby" y "aria-describedat", HTML5: "figure" y "picture")
• Reseña de “Pro HTML5 Accessibility”
• Reseña "Inclusive Design Patterns. Coding Accessibility Into Web Design"
• Reseña del libro "Inclusive Components" de Heydon Pickering
• Podéis consultar todos mis artículos sobre WAI-ARIA en: Relación de artículo sobre WAI-ARIA

Ú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:

• "An In Depth Analysis of HTML5 Multimedia and Accessibility" de Ian Devlin
• "The State of HTML5 Video" de Jeroen Wijering

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:

• HTML5 Canvas Accessibility in Firefox 13 de Paciello Group
• Accessibility Features of HTML5 de Mark Sadecki.
• Sobre SVG y Canvas: Accesibilidad práctica con HTML5+CCS3+WAI-ARIA de Camilo Kawerin y Manuel Razzari

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:

• HTML5 y accesibilidad: nuevos tipos de input, atributos asociados y validación nativa
• Navegación más accesible y semántica en 2 minutos con Landmark Roles (WAI-ARIA)
• LONGDESC. Soporte y alternativas (WCAG 2.0, ARIA:"aria-describedby" y "aria-describedat", HTML5: "figure" y "picture")
• Cheat Sheet HTML 4.01, HTML 5, XHTML Elements
• Reseña "Pro HTML5 Accessibility"
• Ayuda contextual de los formularios más accesible con "aria-describedby" (WAI-ARIA)
• Live Regions y WAI-ARIA. Cómo mejorar la accesibilidad de contenidos que se actualizan automáticamente