Cómo incluir imágenes accesibles en la web

1. Imágenes accesibles

2. Agenda
• Introducción a los diferentes tipos de imágenes y contextos
• Acceso a datos y descripciones más largas de diagramas,
gráficos, fotografías, etc.
• Uso de CSS para incluir imágenes decorativas y de formato
• Imágenes de texto
• Ejercicio práctico práctico, por ejemplo para mejorar la
accesibilidad de algunas páginas de gran tamaño
• Introducción a temas adicionales relacionados con la imagen,
como experiencias sensoriales y uso de CAPTCHA

3. Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)
Personas que no pueden ver una imagen pueden tener
una alternative de texto que se lea usando un lector de
pantalla
Personas que no pueden escuchar un audio pueden leer
la alternative textual
Tener la misma información de dos formas diferentes
ayudará a cualquier persona que tenga dificultades para
comprender un contenido.
Permiten las traducciones más facilmente: otro idioma,
lengua de señas, simplificar el mismo lenguaje
Todo contenido no textual que se presenta al usuario
tiene una alternativa textual que cumple el mismo
propósito.

4. Alternativas textuales cortas
El texto alternativo debe presentar contenido y función, muy raramente es una
descripción.
alt = “Mafalda escuchando música en la radio”
alt = “Imagen 344”
alt = “Ingrese el texto alternativo aquí”
alt = “Mafalda”
alt = “Nena con radio”
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)

5. Si una descripción corta no es suficiente
<img src="grafico1.gif“
alt = "Variación porcentual en el
incremento de colombianos y
ecuatorianos en España. 1998 - 2007.“
longdesc="grafico1.html" />
Otras opciones:
• Enlace inmediatamente adyacente al contenido no textual
• Descripción larga de texto cerca del contenido no textual, con una referencia a la
ubicación de la descripción larga en la descripción corta
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)

6. ¿Qué descripción le pondría a cada imagen?
• Ítem 1
• Ítem 2
1 2 3
4 5 6
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)

7. Una posible solución…
• Ítem 1
• Ítem 2
1 2 3
4 5 6
alt = “¡Importante!”
alt = “ Gatito”
alt = “En formato pdf”
alt = “3 años de
garantía”
alt= "I???"
alt = “”
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)

8. Excepciones: pruebas, sensorial
• Pruebas:
– Si es una prueba o un ejercicio que no sería válido
si se presentara en forma de texto, entonces se
proporciona al menos una identificación
descriptiva.
• Por ejemplo, una prueba de audición, una
prueba de ortografía.
• Sensorial:
– Si el objetivo principal el crear una experiencia
sensorial específica, entonces se proporciona al
menos una identificación descriptiva.
• Por ejemplo un concierto sinfónico, obras de
arte visual, etc.
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)

9. Excepciones: CAPTCHA
• Si el propósito es confirmar que quien está accediendo al
contenido es una persona y no una computadora, entonces:
– se proporcionan alternativas textuales que identifican y describen el
propósito
– se proporcionan formas alternativas de CAPTCHA
• Recomendaciones adicionales
– Más de dos modalidades de CAPTCHAs (¿captchas lógicos?)
– Acceso a Atención al Cliente humano
– No requerir CAPTCHAs para usuarios autorizados
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)

10. Excepciones: Decoración, formato, invisible
• Si es simple decoración, se utiliza únicamente
para definir el formato visual o no se presenta a
los usuarios, entonces se implementa de forma
que pueda ser ignorado por las ayudas técnicas.
• Imágenes decorativas: no aportan
información
• Incluirlas mediante la hoja de estilos
• Si no es posible, usar texto alternativo
vacío (alt=””) y no usar title
• Ejemplo: imágenes empleadas como
viñetas
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)

11. 1.4.5 Imágenes de texto (Nivel AA)
Si con las tecnologías que se están utilizando se puede conseguir la presentación
visual deseada, se utiliza texto para transmitir la información en vez de imágenes
de texto, excepto en los siguientes casos:
• Configurable: La imagen de texto es visualmente configurable según los requisitos del usuario.
• Esencial: Una forma particular de presentación del texto resulta esencial para la información que
se transmite. Los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales..
Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.5 Imágenes de texto
Personas con baja visión (que puede tener problemas
para leer el texto con la familia de la fuente, el tamaño y
/ o color de autor).
Las personas con discapacidades cognitivas que afectan
a la lectura
Cualquier persona que pueda tener dificultades para
leer el texto con con el interlineado autor y / o
alineación
1.4.9 Imágenes de texto (sin
excepciones) (Nivel AAA):
sólo se utilizan como simple
decoración o cuando una forma de
presentación particular del texto
resulta esencial para la información
transmitida. (Nivel AAA)

12. Imágenes de texto
Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.5 Imágenes de texto

13. • Las imágenes que transmiten información textual
tienen un texto alternativo que proporciona la
misma información textual.
Imágenes de texto
alt = “inc” alt = “Brasil 2014”
Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.5 Imágenes de texto

14. Trencito: imágenes
• Texto alternativo: texto que transmite la
misma información que la imagen
• Descripción larga: si la imagen es compleja,
por ejemplo una gráfica y necesita una
descripción demasiado larga para un
alternativo
Obligatorio!
Solo si
necesario
<img
src=“dirección de la imagen”
alt=“texto alternativo”
>

15. Trencito: casos particulares de imágenes
• Decorativa y no aporta información
– Texto alternativo vacío
• Enlace
– Describir a dónde dirige, en vez de la imagen
– No es necesario decir “enlace a..” (el lector avisa)
• Imagen de texto
– Escribir lo que dice el texto

16. Imágenes en enlaces

17. Imágenes en enlaces
• Las imágenes que funcionan como enlaces tienen un texto
alternativo que describe el destino del enlace y no la imagen.
alt=“Icono de una casa",
alt=“Sobre",
alt=“Impresora"
alt=“Signo de interrogación";
alt="Página principal del sitio",
alt="Contacto“
alt="Versión imprimible"
alt="Ayuda".

18. Resumen
From Understanding WCAG 2.0:
1.1.1 Non-text Content
1.4.9 Images of Text (No Exception)
From Techniques for WCAG 2.0:
C9: Using CSS to include decorative images

19. Silvia Da Rosa
@okactivist
C.C. www.mutuaspalabras.blogspot.com