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