Redactar descripciones alternativas a una imagen - líneas directivas y recursos
Contexto
Uno de los más grandes cambios que trae la accesibilidad en la producción de libros digitales es la redacción de descripciones alternativas a las imágenes.
Para toda imagen pertinente semánticamente para el lector, una descripción alternativa debe ser producida, sin ella una persona con trastornos visuales no podrá, simplemente, tener acceso a ese contenido.
Es también esta descripción la que remplaza a la imagen en el caso de que esta no se pueda visualizar.
Así ¿cómo redactar descripciones alternativas claras y pertinentes para el lector? El objetivo de este artículo es responder a esta pregunta proporcionando líneas directivas sencillas y fáciles de aplicar cuando nos lanzamos a la redacción de estas descripciones, así como indicar los recursos externos a consultar.
Líneas directivas
Algunos consejos para cuando redactamos descripciones alternativas:
- Portada: indicar en primer lugar el título del libro, el o los autores y otras informaciones textuales pertinentes sobre la imagen. Si la imagen de la portada tienen un significado o una importancia particular (es decir, su función no es puramente decorativa), dar una pequeña descripción tan corta y concisa como sea posible. Se puede usted basar en una de las sugerencias de modelos para la construcción de texto alternativo (ver más abajo un ejemplo práctico):
- Portada : [título] [autor(s)/edición/editor(s)]. [textos adicionales sobre la imagen]. [breve descripción de la imagen de portada si esta es importante].
- Portada : [título] de [autor(s)].
- Portada : [título] , [edición del título] de [autores].
- Portada : [título] , editado por [nombre/s de los editores].
- Portada : [título] , [edición del título], editado por [nombre/s de los editores].
- Portada : [título] , [edición del título], editado por [nombre/s de los editores]. [textos adicionales sobre la imagen]. [breve descripción de la imagen de portada si esta es importante].
- Imágenes decorativas: las imágenes puramente decorativas (por ejemplo, un símbolo que marca la transición entre dos párrafos) no deben tener descripción alternativa. Puede dejar el vacío del atributo
alt
de las imágenes y utilizar el rol ARIA "presentación" para indicar a las tecnologías de asistencia que la imagen debe ser ignorada. - Logos: los diferentes logos incluidos en los créditos deben tener una descripción alternativa (el logo de la ANEL, por ejemplo, o del Fondo de libros, etc.). Comenzar la descripción con la mención "Logo: ". Si varios logos están juntos en la misma imagen, describir los logos en el mismo texto alternativo.
- Figuras/esquemas: las figuras y los esquemas deben ser capturados en imagen y en consecuencia, requieren descripciones alternativas. Se debe pues, interpretar la totalidad del esquema para una persona con debilidad visual.
- Tableros simples: los tableros simples pueden ser reproducidos en CSS, no hay entonces, que incluir textos alternativos para ellos.
- Tableros complejos: según el grado de complejidad, ciertos tableros no pueden ser reproducidos en CSS (por ejemplo, un tablero en imagen en formato PDF puesto que es imposible de reproducirlo en InDesign/Acrobat). Es pues importante, verificar que a los tableros imposibles de reproducir en CSS se les de una descripción alternativa. Si el tablero es grande, es posible que sea necesario producir lo que llamamos una descripción alternativa larga, es decir, describir el tablero celda por celda.
- Íconos de acciónM/ reenvio a un enlace externo: en le caso de las imágenes que tiene por objetivo reenviar al lector hacia una página externa, describir la acción que se va a realizar más que el contenido de la imagen. Por ejemplo, "ir a nuestra página Facebook" en lugar de "logo de la empresa Facebook".
- Textos incluidos en una imagen: si tiene una imagen que contiene texto, este debe encontrarse en la descripción alternativa de la imagen (nótese que es aconsejado, siempre que sea posible, de siempre capturar el texto como texto y no como imagen).
- Redacción:
- Evitar los términos "imagen de" o "foto de". Son redundantes puesto que la imagen ya ha sido identificada como tal gracias a la etiqueta HTML
<img>
. - Mantener la descripción clara y concisa.
- Evitar los términos "imagen de" o "foto de". Son redundantes puesto que la imagen ya ha sido identificada como tal gracias a la etiqueta HTML
- Semántica: pensar en la información que queremos resaltar con esta imagen. ¿Cuál es la información más importante a comunicar al lector a través de esta imagen?
Comunicar las descripciones alternativas al productor de archivos EPUB
Si confia la producción de sus archivos EPUB a una empresa externa, puede comunicarle un archivo en formato Excel que indique:
- El lugar en el que se encuentra la imagen en el texto fuente (el número de la página, por ejemplo)
- La posición de la imagen
- el texto alternativo que le corresponde
Vea aquí un archivo modelo a utilizar: Textes_alternatifs_modèle.xlsx
Ejemplos
Portada
Texto alternativo: "Portada: Daisy Jones and The Six, de Taylor Jenkins Reid. ¡El libro fenómeno por fin en español! De fondo, un disco 33 revoluciones y en su centro la imagen de una joven."
Logo y textos capturados en imagen
Texto alternativo: "Logo: Financiado por el gobierno de Canada."
Ícono que reenvía hacia una página externa
Texto alternativo: "Síguenos en Instagram."
Tableros, figuras y esquemas
Estos contenidos son generalmente más complejos a traspasar en texto alternativo, hemos centralizado algunas buenas prácticas a tomar en cuenta en el momento de iniciar la producción de su libro digital:
- Algunos tableros no necesitan texto alternativo puesto que es posible capturarlos como texto y no como imagen directamente en el contenido del libro.Es el caso de los tableros simples con una o dos entradas.
- Algunos tableros no pueden ser guardados en HTML. En ese caso, vamos en efecto a guardar el tablero en imagen dentro del contenido y proveer una descripción alternativa que retoma la integralidad de los datos incluidos en el tablero. Se trata de un número restringido de tableros, la mayoría pueden ser guardados como texto dentro del contenido del libro.
- Las figuras son comunmente guardadas como imagen y requieren un texto alternativo. En este caso, le pedimos proveer el texto y que este refleje la información más pertinent a transmitir al lector. Por ejemplo, si una parte de la figura o el esquema está ya implícitamente descrita en el contenido del libro, el texto puede concentrarse en la información que aún no ha sido transmitida al lector.
Figura o esquema capturado en imagen
Texto alternativo: "Pictograma de un trabajador autónomo (paga impuestos personalmente) que se incorpora a una empresa (paga impuestos sobre las ganancias después de la reducción de los gastos) donde se convierte en accionario que paga impuestos personalmente en función de los dividendos o del salario que se paga"
Tableros complejos capturados en imagen
En un caso como este, se puede indicar simplemente en el archivo de textos alternativos que el tablero debe ser capturado como imagen y así escribiremos los datos tal cual en forma de tablero HTML en el campo de texto alternativo.
Si trabaja con un productor externo o usted produce sus propios archivos, véase cómo se transcribe el ejemplo de este tablero (via un texto alternativo largo desplegable:
<details id="Tabla nutritiva en francés">
<summary>Aumentar/Disminuir</summary>
<div>
<p>Valeur Nutritive</p>
<p>par 1 boulette égouttée</p>
<p>calories 150</p>
<table>
<tbody><tr>
<th>Nutriments</th>
<th>% valeur quotidienne*</th>
</tr>
<tr>
<td>Lipides 9g</td>
<td>14%</td>
</tr>
<tr>
<td>satures 1.5g</td>
<td>8%</td>
</tr>
<tr>
<td> </td>
<td>+trans 0g</td>
</tr>
<tr>
<td> </td>
<td>Glucides 3g</td>
</tr>
<tr>
<td>Fibres 0g</td>
<td>0%</td>
</tr>
<tr>
<td>Sucres 0g</td>
<td>0%</td>
</tr>
<tr>
<td> </td>
<td>Protéines 13g</td>
</tr>
<tr>
<td> </td>
<td>Cholestérol 35mg</td>
</tr>
<tr>
<td>Sodium 300mg</td>
<td>13%</td>
</tr>
<tr>
<td>Potassium</td>
<td>N/D</td>
</tr>
<tr>
<td>Calcium</td>
<td>4%</td>
</tr>
<tr>
<td>Fer</td>
<td>50%</td>
</tr>
</tbody>
</table>
<p>*5% ou moins c'est peu, 15% ou plus c'est beaucoup</p>
</div>
</details>
</div>
Ejemplos de tableros que no requieren de texto alternativo
Tableros simples ( en forma de texto en el archivo fuente)
Tableros complejos (en forma de texto en el archivo fuente)
Recursos complementarios
- Documentación oficial Daisy (en inglés): http://kb.daisy.org/publishing/docs/html/images.html
- Artículo de buenas prácticas de la Universidad de Harvard (en inglés): https://accessibility.huit.harvard.edu/describe-content-images
- Artículo de buenas prácticas de Siteimprove (en inglés): https://support.siteimprove.com/hc/en-gb/articles/115000013031-Accessibility-Image-Alt-text-best-practices
- Artículo de buenas prácticas de Perkins (en inglés): https://www.perkinselearning.org/technology/blog/how-write-alt-text-and-image-descriptions-visually-impaired