Uso del texto alternativo con HTML 5

El texto alternativo es la principal forma de lograr que la información visual sea accesible. Hace tiempo, escribí varias entradas donde explicaba el uso del texto alternativo:

• ¿Qué hace el atributo alt? (17/3/2006)
• El atributo longdesc (10/4/2006)
• Serie "Guía breve": Imágenes y animaciones (31/10/2007)
• Serie "Guía breve": Mapas de imagen (2/11/2007)

HTML 5, que se espera que sea una recomendación en 2011, traerá numerosas novedades y características que mejorarán la accesibilidad de las páginas web. En el borrador de HTML 5 podemos encontrar el apartado 4.8.1.1 Requirements for providing text to act as an alternative for images donde se explica cómo escribir un texto alternativo correcto. Además, el W3C también ha publicado el borrador del documento HTML5: Techniques for providing useful text alternatives donde se desarrolla (o se desarrollará, porque el documento está incompleto).

Los mecanismos disponibles en HTML 5 para proporcionar un texto alternativo son:

• El atributo alt del elemento img
• El atributo title del elemento img
• El atributo longdesc del elemento img
• Los nuevos atributos aria-labelledby y aria-describedby
• Los nuevos elementos figure y figcaption

Un ejemplo de uso del nuevo atributo aria-describedby es:

<p><img src="flowchart.gif" alt="Un diagrama de flujo que representa la reparación de una lámpara que no funciona." aria-describedby="d1"></p>

<p id="d1">Si la lámpara no funciona, comprobar que está conectada a la corriente.

Si no, conectarla. Si está conectada y todavía no funciona, comprobar que hay una bombilla.

Si no, colocar una bombilla. Si hay una bombilla, comprobar que no está quemada.

Si lo está, cambiar la bombilla. Si todavía no funciona, comprar una lámpara nueva.</p>

En el ejemplo anterior,el atributo aria-describedby contiene el identificador (atributo id) de un párrafo de texto que contiene la descripción detallada de la imagen.

Un ejemplo del uso de los nuevos elementos (etiquetas) figure y figcaption es:

<figure>

<img src="adan-eva.jpg" alt="Fotografía de la pareja de pinturas, donde Adán se sitúa a la izquierda y Eva a la derecha con la famosa manzana en su mano izquierda">

<figcaption>Adán y Eva, Alberto Durero (1507)</figcaption>

</figure>

En el ejemplo anterior se puede observar que se ha empleado el atributo alt para proporcionar una descripción de la imagen, mientras que la etiqueta figcaption proporciona el título, autor y fecha de creación del cuadro que representa la imagen.