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

Página de resultado. Seleccionaste:

Caso 1. CAPTCHA. La imagen es la prueba para comprobar si el usuario es una persona o una máquina.

Ejemplo de un captcha en el cual hay que introducir las letras de la imagen. Tiene un captcha alternativo de audio.

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:

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

Test lógico de formas. Se ofrece una secuencia de tres formas y se proponen cuatro alternativa para continuar la serie. Cada forma es un laberinto.

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

Test visual de daltonismo. Un círculo formado por burbujas verdes. Dentro del círculo un número 25 formado por burbujas rojas.

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:

Recomendaciones generales

¿A quién beneficia?