jueves, 8 de julio de 2010

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

2 comentarios:

Irma dijo...

Muy buenas! Primero, felicidades! blog más que interesante!!

Una pregunta: entiendo que a la clase "d1", le damos stilo display:none, para que no salga pero esté ahi, no?

muchísimas gracias!

Sergio Luján Mora dijo...

Hola Irma.

Gracias por tu pregunta, es una buena reflexión...

Podría ser, si lo quieres ocultar a ciertos usuarios (los usuarios que ven), pero quizás no siempre lo quieras ocultar.

Lo que soluciona este atributo es que el texto asociado a una imagen no siempre tiene que estar cerca de la imagen. Con "aria-describedby" el texto asociado puede estar en cualquier sitio, incluso oculto, como propones.

Por cierto, para ocultar algo pero que esté disponible para los lectores de pantalla no debes usar "display:none", lee Técnicas para ocultar contenido.