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 es parte de una prueba o test que queda inavalidado si se describe la imagen (un captcha, un test de daltonismo) o que es practicamente inviable describir para completarlo correctamente lógico de secuencia de formas, etc.)
Caso 1. CAPTCHA. La imagen es la prueba para comprobar si el usuario es una persona o una máquina.
alt="próposito del CAPTCHA"
+
otro CAPTCHA alternativo en una modalidad sensorial diferente (lógico, de audio, etc.)
Debes incluir el atributo ALT a la imagen.
El texto alternativo proporcionado por este atributo debe identificar el propósito de la imagen. Por ejemplo, alt="Introduce este texto en el campo 'Captcha'. Si no puedes ver la imagen pulsa el botón 'Audio' disponible tras la imagen."
Además, se debe proporcionar al menos un CAPTCHA alternativo que no implique el sentido de la vista.
Las WCAG 2.0 incluyen otras recomendaciones como no emplear captchas para usuarios autorizados o proporcionar acceso a un servicio de atención al cliente para poder evitar el captcha.
Recursos:
- Técnica G143 de las WCAG 2.0: G143: Providing a text alternative that describes the purpose of the CAPTCHA
- Técnica G144 de las WCAG 2.0: G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality
- Non-text Content:Understanding SC 1.1.1
- 3.13 CAPTCHA Images en HTML5: Techniques for providing useful text alternatives (W3C)
- Otras técnicas con WAI-ARIA u otras tecnologías (Flash, PDF):
Caso 2. La imagen forma parte de otro tipo de prueba o test visual
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.
Ejemplos del caso 2:
Ejemplo 2.1 Test lógico de formas
El código HTML debería ser:
<img src="images/test_logico.jpg" alt="Test lógico de formas."/>
Es prácticamente inviable proporcionar una descripción textual que proporciona toda la información necesaria para poder completar correctamente este test, por ello el texto alternativo solo identifica el contenido.
Ejemplo 2.2 Test visual de daltonismo
El código HTML debería ser:
<img src="images/test_daltonismo.png" alt="Test visual de daltonismo."/>
No podemos proporcionar la misma información que la imagen ("25") sin desvirtuar el propio test. El texto alternativo en estos casos debe identificar el contenido como en el ejemplo.
Este ejemplo parte de la premisa de que la imagen tiene como objetivo que el usuario realice el test de daltonimo online.
Recursos:
- Non-text Content: Understanding SC 1.1.1 (WCAG 2.0)
- The alt and title attributes, de 456 Berea St.
- Otras técnicas con WAI-ARIA u otras tecnologías (Flash, PDF):
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.
¿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.
