5 wcag2.0 para comunicadores - imagenes

  • Published on
    15-Aug-2015

  • View
    39

  • Download
    2

Embed Size (px)

Transcript

  1. 1. Imgenes accesibles
  2. 2. Contenidos no textuales deben tener una alternativa textual que cumpla el mismo propsito 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 informacin de dos formas diferentes ayudar a cualquier persona que tenga dificultades para comprender un contenido. Permiten las traducciones ms facilmente: otro idioma, lengua de seas, simplificar el mismo lenguaje
  3. 3. Alternativas textuales cortas El texto alternativo debe presentar contenido y funcin, muy raramente es una descripcin. alt = Mafalda escuchando msica en la radio alt = Imagen 344 alt = Ingrese el texto alternativo aqu alt = Mafalda alt = Nena con radio
  4. 4. Si una descripcin corta no es suficiente Otras opciones: Enlace inmediatamente adyacente al contenido no textual Descripcin larga de texto cerca del contenido no textual, con una referencia a la ubicacin de la descripcin larga en la descripcin corta
  5. 5. Qu descripcin le pondras a cada imagen? tem 1 tem 2 1 2 3 4 5 6
  6. 6. Una posible solucin tem 1 tem 2 1 2 3 4 5 6 alt = Importante! alt = Gatito alt = En formato pdf alt = 3 aos de garanta alt= "Introduzca las letras de la imagen"alt =
  7. 7. Imgenes de texto
  8. 8. Las imgenes que transmiten informacin textual tienen un texto alternativo que proporciona la misma informacin textual. Imgenes de texto alt = inc alt = Brasil 2014
  9. 9. Imgenes en enlaces
  10. 10. Imgenes en enlaces Las imgenes 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 interrogacin"; alt="Pgina principal del sitio", alt="Contacto alt="Versin imprimible" alt="Ayuda".
  11. 11. Excepciones: pruebas, sensorial Pruebas: Si es una prueba o un ejercicio que no sera vlido si se presentara en forma de texto, entonces se proporciona al menos una identificacin descriptiva. Por ejemplo, una prueba de audicin, una prueba de ortografa. Sensorial: Si el objetivo principal el crear una experiencia sensorial especfica, entonces se proporciona al menos una identificacin descriptiva. Por ejemplo un concierto sinfnico, obras de arte visual, etc.
  12. 12. Excepciones: CAPTCHA Si el propsito 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 propsito se proporcionan formas alternativas de CAPTCHA Recomendaciones adicionales Ms de dos modalidades de CAPTCHAs (captchas lgicos?) Acceso a Atencin al Cliente humano No requerir CAPTCHAs para usuarios autorizados
  13. 13. Excepciones: Decoracin, formato, invisible Si es simple decoracin, 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 tcnicas. Imgenes decorativas: no aportan informacin Incluirlas mediante la hoja de estilos Si no es posible, usar texto alternativo vaco (alt=) y no usar title Ejemplo: imgenes empleadas como vietas
  14. 14. Trencito: imgenes Texto alternativo: texto que transmite la misma informacin que la imagen Descripcin larga: si la imagen es compleja, por ejemplo una grfica y necesita una descripcin demasiado larga para un alternativo Obligatorio! Solo si necesario
  15. 15. Trencito: casos particulares de imgenes Decorativa y no aporta informacin Texto alternativo vaco Enlace Describir a dnde 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!