Guía para incluir textos alternativos adecuados y accesibles a las imágenes de tu web

Página de resultado. Seleccionaste:

¿Longitud máxima de 100 o de 150 caracteres?

El documento Techniques For Accessibility Evaluation And Repair Tools (W3C) indica que la longitud máxima del atributo ALT será de 150 caracteres.

Sin embargo otras fuentes, como HTML5: Techniques for providing useful text alternatives (W3C) indican no sobrepasar los 100 caracteres.

Si el texto alternativo que describe la información que transmite la imagen sobrepasa los 100 caracteres, pregúntate, ¿puedo reducirlo? ¿sería mejor una descripción extensa?

Los validadores automáticos de accesibilidad se comportan en este punto de diferente manera como expliqué en Falsos erroes de validadores automáticos de accesibilidad basados en las WCAG 2.0. Para textos alternativos con una longitud entre 100-150 caracteres, algunos reportan un error, otros una alerta y otros lo dan por válido.

Caso 1. La imagen solo contiene texto

alt="texto de la imagen"

Debes incluir el atributo ALT a la imagen.

El texto alternativo proporcionado por este atributo será el texto de la imagen.

Siempre es preferible que, en vez de una imagen, sea texto con el estilo definido en la CSS.

Ejemplos del caso 1:

5 años de garantía

Imagen de http://www.latiendahome.com

El código HTML debería ser:

<img src="images/5anosgarantia.jpg" alt="5 años de garantía"/>

Caso 2. La imagen incluye texto (y este no es meramente decorativo)

alt="información que transmite la imagen, debe incluir el texto"

Debes incluir el atributo ALT a la imagen.

El texto alternativo proporcionado por este atributo debe transmitir la misma información que la imagen e incluir el texto presente en la imagen.

Ejemplos del caso 2:

Ejemplo 2.1. Imagen con fondo decorativo pero con texto informativo

Servicio de Atención al Cliente. Teléfono 902 180 074. De fondo una teleoperadora hablando por teléfono.

Imagen de http://www.indas.com/

El código HTML debería ser:

<img src="images/telAtencionCliente_es.gif" alt="Servicio de Atención al Cliente. Teléfono 902 180 074"/>

En este ejemplo el fondo de la imagen (una teleoperadora hablando por teléfono) no aporta información, sin embargo el texto presente en la imagen es muy relevante. Sería preferible que el texto fuera texto realmente en vez de parte de la imagen.

Ejemplo 2.2. Gráfica sencilla
Gráfica de tarta con el título 'Figure 1. Distribution of Articles by Journal Category'. Según la leyenda el gráfico indica Language=68%, Education=14% and Science=18%

Ejemplo de 3.3 Images of text en HTML5: Techniques for providing useful text alternatives (W3C)

El código HTML debería ser:

<img src="images/grafica.gif" alt="Figure 1. Distribution of Articles by Journal Category. Pie chart: Language=68%, Education=14% and Science=18%"/>

Este gráfico de tarta se puede describir correctamente con una descripción corta, que debe incluir el título del gráfico y la leyenda que forman parte de la imagen. Sería preferible usar realmente texto en vez de incluirlo en la imagen.

Caso 3. La imagen no tiene texto

Imagen: alt="información que tranmite la imagen"

Debes incluir el atributo ALT a la imagen.

El texto alternativo proporcionado por este atributo debe transmitir la misma información que la imagen.

Ejemplos del caso 3:

Ejemplo 3.1 Imagen de una noticia
El secretario de estado estadounidense John Kerry y el viceprimer ministro chino Wang Yang se dan un apretón de manos.

John Kerry y el viceprimer ministro chino Wang Yang, en Pekín. / Feng Li (Getty) / Ejemplo de http://internacional.elpais.com

El código HTML debería ser:

<img src="images/noticia.jpg" alt="El secretario de estado estadounidense John Kerry y el viceprimer ministro chino Wang Yang se dan un apretón de manos."/>

En las imágenes que se incluyen en las noticias se suele cometer el error de ofrecer la misma información en el ALT de la imagen que el pie de foto, sin embargo su función es diferente.

Como se aprecia en este ejemplo, el objetivo del atributo ALT es transmitir la misma información que nos ofrece la imagen. Para ello pregúntate: ¿por qué está aquí la imagen? ¿qué información transmite? ¿cuál es su propósito? si no pudiera usar la imagen ¿qué texto usaría para transmitir la misma información y/o función?

Otro error común es incluir siempre en todas las imágenes el atributo TITLE con un contenido igual al del atributo ALT.

Ejemplo 3.2 Icono informativo

Icono de un triángulo amarillo con una exclamación dentro Tu sesión está a punto de expirar.

El código HTML debería ser:

<p><img src="images/advertencia.jpg" alt="¡Advertencia!"/> Tu sesión está a punto de expirar.</p>

En este caso, el icono que precede al texto no es decorativo, sino informativo, añade información adicional al texto que le sigue: es una advertencia importante.

Recomendaciones generales

Recursos:

¿A quién beneficia?