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 es un cuadro u otra expresión artística cuya función principal es crear una experiencia sensorial que las palabras no pueden igualar.
Caso 1. La obra tiene un nombre comúnmente conocido, por ejemplo "La Gioconda"
alt="nombre de la obra comúnmente aceptado"
Debes incluir el atributo ALT a la imagen.
El texto alternativo proporcionado por este atributo debe ser el nombre de la obra comúnmente aceptado.
Si es posible o útil se puede incluir un texto descriptivo adicional, por ejemplo si existe alguna razón especial por la cual se ha incluido dicha imagen en la página. En ese caso, si la descripción incluida en el atributo ALT supera los 150 caracteres, deberás proporcionar una descripción larga (ir a la página de resultado de imágenes que necesitan una descripción larga) Si supera los 100 caracteres deberías preguntarte: ¿puedo reducirla? ¿sería mejor una descripción larga?
Ejemplos del caso 1:
El código HTML debería ser:
<img src="images/LaGioconda.jpg" alt="Cuadro La Gioconda de Leonardo da Vinci"/>
Por ejemplo, en una página sobre la obra de Leonardo da Vinci encontraríamos una imagen de La Gioconda. El objetivo del texto alternativo no es describir el cuadro, sino identificarlo.
Caso 2. La obra no tiene un nombre comúnmente conocido
alt="breve descripción que identifique el contenido"
Debes incluir el atributo ALT a la imagen.
El texto alternativo proporcionado por este atributo debe ser una breve descripción que identifique el contenido.
Si es posible o útil se puede incluir un texto descriptivo adicional, por ejemplo si existe alguna razón especial por la cual se ha incluido dicha imagen en la página. En ese caso, si la descripción incluida en el atributo ALT supera los 150 caracteres, deberás proporcionar una descripción larga (ir a la página de resultado de imágenes que necesitan una descripción larga) Si supera los 100 caracteres deberías preguntarte: ¿puedo reducirla? ¿sería mejor una descripción larga?
Ejemplos del caso 2:
Imagen de http://bellasartes7.wikispaces.com/escultura
El código HTML debería ser:
<img src="images/escultura.jpg" alt="Gran escultura de arena en una playa. Representa un rostro furioso de hombre hundido en la arena por una mano. "/>
En una página sobre el arte de la escultura en arena, que tuviera diferentes ejemplos como este, el texto alternativo identificaría la obra de arte.
Pero en otros contextos podría requerir información adicional. Por ejemplo podría haberse incluido como símbolo de la opresión, o como ejemplo de una técnica concreta. En esos casos necesitaría un texto descriptivo adicional que explicará la razón por la que se ha incluido, lo que pretende transmitir.
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.
- Un cuadro o cualquier otra expresión artística en general, por su naturaleza, pierde validez si no es percibido por el sentido para el que fue creado. Recuerda que el objetivo no es describir la obra de arte, sino identificarla y pensar si hay que añadir alguna información adicional, para ello pregúntate, ¿por qué está aquí la imagen? ¿qué información transmite? ¿cuál es su propósito?
Recursos:
- Técnica G100 de las WCAG 2.0: G100: Providing a short text alternative which is the accepted name or a descriptive name of the non-text content
- Técnica H37 de las WCAG 2.0: H37: Using alt attributes on img elements
- 3.9 Images of Pictures en HTML5: Techniques for providing useful text alternatives (W3C)
- 4. Methods for Providing Text Alternatives 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.
