Guía para incluir textos alternativos adecuados y accesibles a las imágenes de tu web
Página de resultado. Seleccionaste:
- Que la imagen no es o no forma parte de un enlace o botón.
- Que la imagen no es decorativa o invisible, sino que aporta información adicional.
- Que la imagen no es un cuadro ni otra expresión artística cuya función principal es crear una experiencia sensorial que las palabras no pueden igualar.
- Que la imagen no es parte de una prueba o test que queda invalidado si se describe la imagen (un captcha, un test de daltonismo, un test lógico de secuencia de formas, etc.)
- Que la imagen no forma parte de una serie de imágenes contiguas que transmiten una información de forma conjunta.
- Que la información que proporciona la imagen se puede describir en menos de 100-150 caracteres.
¿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:
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
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
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
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
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
- El atributo ALT y el atributo TITLE tienen funciones diferentes. El atributo ALT ofrece el texto alternativo de la imagen, transmite la misma información o función, y será este el que lea el lector de pantalla o el que aparezca cuando la imagen no se cargue. El atributo TITLE en las imágenes es opcional, sirve para incluir información adicional o complementaria (la fecha, el autor, el origen de la imagen) pero nunca debe incluir la misma información que el atributo ALT ni incluir información obvia o importante.
- El atributo ALT y el pie de foto también tienen una función diferente. No repitas la misma información en ambos.
- Recuerda que el objetivo no es describir los detalles gráficos de la imagen, sino que sirva para el mismo propósito y transmita la misma información que la imagen. Pregúntate, ¿por qué está aquí la imagen? ¿qué información transmite? ¿cuál es su propósito? si no puediera usar la imagen ¿qué texto usaría para transmitir la misma información y/o función?
Recursos:
- Técnica G94 de las WCAG 2.0: G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
- Técnica H37 de las WCAG 2.0: H37: Using alt attributes on img elements
- 3.3 Images of text en HTML5: Techniques for providing useful text alternatives (W3C)
- 3.6 Images that enhance the themes or subject matter of the page content en HTML5: Techniques for providing useful text alternatives (W3C)
- The alt and title attributes, de 456 Berea St.
- Otras técnicas con WAI-ARIA u otras tecnologías (Flash, PDF):
¿A quién beneficia?
- A las personas con dificultades para percibir el contenido visual (personas con ceguera, baja visión, sordo-ciegas) o con dificultades de comprensión del contenido visual. La información contenida en el texto se puede presentar al usuario de la manera que mejor se adapte a sus necesidades: en braille, leída en voz alta o presentarla visualmente.
- A las personas que por limitaciones técnicas no pueden acceder al contenido visual: navegan con las imágenes deshabilitadas por tener una conexión lenta o para ahorrar costes en la tarifa por datos, hay un problema en el servidor y no se están sirviendo las imágenes o alguna de estas ya no está disponible. También pueden estar usando un navegador solo-texto.
- A los buscadores web, pues se basan en el contenido textual para indexar los contenidos.
