Buenas prácticas en EPUB. Imágenes.

En contenidos impresos (libros, revistas etc.) una imagen o cuadro muchas veces estará acompañada por un epígrafe. Hasta 2010, no había forma de identificar esto semánticamente y como vemos que continúa siendo un error muy común vamos a tocar este tema. De lo general a lo particular veremos cómo se debe identificar una imagen y relacionarla semánticamente con su epígrafe.

En esta entrega hablaremos acerca de los elementos figure & figcaption y luego comentaremos aspectos de accesibilidad.

Entonces, tenemos un contenido con título, párrafos, una imagen y un epígrafe:

Ejemplo simple de estructuración de contenido
Ejemplo simple de estructuración de contenido.

Omitiendo la estructura general (section, head y párrafos anterior y posterior lo relevante es definir apropiadamente la caja que contendrá imagen (figure) y epígrafe (figcaption) correctamente.

[html]

<figure>
<img src="../Images/colibri.png" />

<figcaption>El colibrí aletea entre 200 y 300 veces por segundo</figcaption>

</figure>

[/html]

Ahora que definimos el concepto general (simple, no?) vamos a las particularidades:

Texto alternativo:

Una imagen, debe tener texto alternativo alt="". Planteamos una cuestión de criterio y responsabilidad por parte del editor. Si la imagen no fuera relevante al contenido (una viñeta) no será necesario que la etiqueta alt tenga contenido descriptivo, pero debe estar presente. Si la imagen es relevante al contenido, deberemos ser precisos en su descripción para que usuarios con dificultades físicas o técnicas para visualizarla puedan entender qué es lo que visualmente se está comunicando aunque no puedan acceder al contenido. Sea una foto o un cuadro debereán ser responsables de la apropiada descripción para estar seguros que: de no poder verla, el consumidor podrá comprender igualmente el contenido.

Ejemplo de texto alternativo:

[html]

<figure>
<img src="../Images/colibri.png" alt="Colibrí de plumas verdes volando" />

<figcaption>Colibrí de plumas verdes volando</figcaption>

</figure>

[/html]

Atributo role.

La relevancia en relación al contenido y la accesibilidad.

El atributo role tiene 2 variantes (img o presentation). Si es una imagen de tipo decorativa que forma parte del diseño se deberá definir como presentation y si es relevante al contenido como img. Entonces las tecnologías asistidas sabrán qué ignorar y qué no del contenido. El ejemplo quedaría de esta manera:

[html]

<figure>
<img src="../Images/colibri.png" alt="Colibrí de plumas verdes volando" role="img" />

<figcaption>Colibrí de plumas verdes volando</figcaption>

</figure>

[/html]

ARIA-roles y accesibilidad (a11y)

Las opciones son aria-role="image"aria-role="presentation". Mismo criterio que el atributo role.
Adicionalmente se debe indicar cuál es la descripción que describe la imagen, suponiendo que el epígrafe describe la imagen, se deberá agregar la etiqueta (id) al elemento figcaption (en este caso, el id se llama descripcion) y en la imagen el elemento aria-describedby indicando la etiqueta donde está presente la descripción. Si la descripción estuviera en un párrafo por ejemplo, se deberá identificar la descripción dentro del contenido (con un span por ejemplo).

[html]

<figure>
<img src="../Images/colibri.png" alt="Colibrí de plumas verdes volando" role="img" aria-role="image" aria-describedby="description" />

<figcaption id="descripcion">Colibrí de plumas verdes volando</figcaption>

</figure>

[/html]

Resumiendo:

Agregamos una imagen. Indicamos su texto alternativo, le dimos valor en relación al contenido a la imagen, y le indicamos toda la información necesaria para que personas con problemas de accesibilidad puedan consumir el contenido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *