Imágenes accesibles
Contenidos no textuales deben tener una alternativa
textual que cumpla el mismo propósito
Perceptible | Operable | Compren...
Alternativas textuales cortas
El texto alternativo debe presentar contenido y función, muy
raramente es una descripción.
a...
Si una descripción corta no es suficiente
<img src="grafico1.gif“
alt = "Variación porcentual en el
incremento de colombia...
¿Qué descripción le pondrías a cada imagen?
Ítem 1
Ítem 2
1 2 3
4 5 6
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 ...
Imágenes de texto
• Las imágenes que transmiten información textual
tienen un texto alternativo que proporciona la
misma información textual...
Imágenes en enlaces
Imágenes en enlaces
• Las imágenes que funcionan como enlaces tienen un texto
alternativo que describe el destino del enla...
Excepciones: pruebas, sensorial
• Pruebas:
– Si es una prueba o un ejercicio que no
sería válido si se presentara en forma...
Excepciones: CAPTCHA
• Si el propósito es confirmar que quien está accediendo al
contenido es una persona y no una computa...
Excepciones: Decoración, formato, invisible
• Si es simple decoración, se utiliza únicamente
para definir el formato visua...
Trencito: imágenes
• Texto alternativo: texto que transmite la
misma información que la imagen
• Descripción larga: si la ...
Trencito: casos particulares de imágenes
• Decorativa y no aporta información
– Texto alternativo vacío
• Enlace
– Describ...
Herramientas de trabajo
• Pendule (Chrome)
• WebDeveloper (Chrome, Firefox)
Ejercicio
Probemos!
Próxima SlideShare
Cargando en…5
×

5 wcag2.0 para comunicadores - imagenes

267 visualizaciones

Publicado el

Imagenes accesibles

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
267
En SlideShare
0
De insertados
0
Número de insertados
4
Acciones
Compartido
0
Descargas
4
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.
  • 2
  • 3
  • 5
  • 6
  • 11
  • 12
  • 13
  • 5 wcag2.0 para comunicadores - imagenes

    1. 1. Imágenes accesibles
    2. 2. Contenidos no textuales deben tener una alternativa textual que cumpla el mismo propósito Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual 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
    3. 3. 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”
    4. 4. 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
    5. 5. ¿Qué descripción le pondrías a cada imagen? Ítem 1 Ítem 2 1 2 3 4 5 6
    6. 6. 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= "Introduzca las letras de la imagen"alt = “”
    7. 7. Imágenes de texto
    8. 8. • 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”
    9. 9. Imágenes en enlaces
    10. 10. 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".
    11. 11. 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.
    12. 12. 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
    13. 13. 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
    14. 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. 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. 16. Herramientas de trabajo • Pendule (Chrome) • WebDeveloper (Chrome, Firefox) Ejercicio
    17. 17. Probemos!

    ×