Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Evaluación de accesibilidad web

634 views

Published on

Taller de 3 horas de evaluacion de accesibilidad web

Published in: Education
  • Be the first to comment

Evaluación de accesibilidad web

  1. 1. Evaluación CC www.diseñoaccesible.es Accesibilidad Web
  2. 2. 2 Agenda 1. Introducción 2. Evaluación automática 3. Evaluación manual Break CC https://www.flickr.com/photos/otacke/ 4. Evaluación manual 5. Conclusiones
  3. 3. 3 Introducción
  4. 4. 4 Evaluación de Accesibilidad • Objetiva, rápida y económica. • Validar de estándares, pautas y aspectos específicos de la accesibilidad. • Utilizar simuladores de discapacidades y de otras tecnologías. • Evaluación manual utilizando herramientas y un checklist de apoyo. • Limitar o modificar alguna habilidad física o sensorial: • guantes gruesos para limitar la destreza manual • lentes o venda para limitar la visión • tecnologías de apoyo como lectores de pantalla o punteros bucales. • No evalúan la conformidad con las pautas, detectan barreras. Evaluación automática Evaluación manual Técnicas de filtrado Pruebas con usuarios
  5. 5. 5 Evaluación automática
  6. 6. 6 Estándares: (X) HTML • Garantiza portabilidad • Facilita mantenibilidad del código Fuente: http://validator.w3.org/ Objetiva - Rápida - Económica Ejercicio Recomendado en Pauta 4 de WCAG 2.0
  7. 7. 7 Estándares: CSS • Garantiza portabilidad • Facilita mantenibilidad del código Fuente: http://jigsaw.w3.org/css-validator/ Recomendado en Pauta 4 de WCAG 2.0 Objetiva - Rápida - Económica Ejercicio
  8. 8. 8 Pautas de Accesibilidad • Herramientas evalúan ciertos aspectos de la accesibilidad • Algunos aspectos no son automatizables • No es una evaluación completa • Tener en cuenta: falsos positivos y negativos • Utilizar al menos dos herramientas Objetiva - Rápida - Económica
  9. 9. 9 Pautas de Accesibilidad http://www.tawdis.net/ http://examinator.ws/ http://www.totalvalidator.com/
  10. 10. 10 Evaluación manual
  11. 11. 11 Herramientas de apoyo • Pendule (Chrome) • WebDeveloper (Chrome, Firefox) Ejercicio Instala una herramienta
  12. 12. 12 Texto alternativo de imágenes • Verificar que los textos alternativos sean adecuados alt = “Mafalda leyendo” alt = “Imagen 344” alt = “Ingrese el texto alternativo aquí” alt = “Mafalda” alt = “Niña leyendo” • Pendule / Web Developer (Images → Display Alt Attributes) Ejemplo CC https://www.flickr.com/photos/vladimix/
  13. 13. 13 Imágenes decorativas • 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 Ejemplo CC https://www.flickr.com/photos/vladimix/ • Pendule / Web Developer (Images → Display Alt Attributes)
  14. 14. 14 Imágenes de texto • Las imágenes que transmiten información textual tienen un texto alternativo que proporciona la misma información textual. alt = “igualdad” alt = “Stay alive and avoid zombies” • Pendule / Web Developer (Images → Display Alt Attributes) Ejemplo CC https://www.flickr.com/photos/daquellamanera/ CC http://en.wikipedia.org/
  15. 15. 15 Imágenes de texto: Ejemplo Ejemplo Fuente: https://www.bcu.gub.uy/
  16. 16. 16 Imágenes en enlaces • Las imágenes que funcionan como enlaces tienen un texto alternativo que describe el destino del enlace (de forma conjunta con el texto del enlace) y no la imagen. alt=“Icono de una casa", alt=“Sobre", alt=“Impresora" alt=“Signo de interrogación"; Ejemplo alt="Página principal del sitio", alt="Contacto“ alt="Versión imprimible" alt="Ayuda". • Pendule / Web Developer (Images → Display Alt Attributes)
  17. 17. 17 Imágenes: resumen • Verifica todas las imágenes: – Texto alternativo adecuado – Imágenes decorativas: desde CSS o con alt vacío – Imágenes de texto: alt con texto de la imagen – Imágenes que son enlaces: destino del enlace Ejercicio Evalúa imágenes de un sitio que hayas desarrollado Prueba: www.bcu.gub.uy
  18. 18. 18 Objetos • Los elementos <object> (Flash) tienen una alternativa textual que proporcione la misma información y/o funcionalidad (contenido del elemento <object>). <object classid="java:Press.class" width="500" height="500"> <object data="Pressure.mpeg" type="video/mpeg"> <object data="Pressure.gif" type="image/gif"> As temperature increases, the molecules in the balloon... </object> </object> </object> • Colocar siempre una alternativa (puede ser en otra pagina independiente, en la misma o dentro del elemento). • No todo los objetos Flash transmiten contenido. • Usar FlashBlock • Habilitar / deshabilitar el plugin flash.
  19. 19. 19 Subtítulos • El contenido multimedia que transmite información en la pista de audio tiene subtítulos. • Evaluación manual
  20. 20. 20 Uso del color • El color no se emplea como único medio para transmitir información. – Observar el uso del color en la página para verificar que se puede interpretar toda la información sin depender del color. – Verificar la página sin estilos • Evaluación manual Ejercicio Corrija los campos marcados en rojo Bienvenido! Para ingresar presione el botón violeta CC https://www.flickr.com/photos/rowan__ashlar/
  21. 21. 21 Contrastes de colores • El contraste entre el color del texto y el color de fondo (en texto e imágenes de texto) es el suficiente según las características del texto (normal o grande). http://www.paciellogoup.com/resources/contrast-analyser.html • Colour Contrast Analyzer, WCAG Contrast Checker, Contrast Analyser Firebug Ejercicio Ejemplo
  22. 22. 22 Control con el teclado • Accesible por teclado • Todos los elementos de interacción son accesibles y operables mediante teclado. • Recorrer toda la página utilizando el tabulador y verificar que todos los elementos son accesibles y operables. • Sin trampas • Sin trampas para el foco del teclado • Recorrer la página mediante el tabulador y verificar que no se bloquea la tabulación por la página • Recorrer la página usando el tabulador Ejercicio
  23. 23. 23 Control con el teclado • Orden del foco • Los elementos de interacción reciben el foco en el orden correcto. • Recorrer la página mediante el tabulador y verificar que el orden por los elementos de interacción es el adecuado • Foco Visible • Es visible el indicador del foco del teclado sobre todo elemento de interacción. • Recorrer toda la página mediante el tabulador y verificar que todos los elementos de interacción son visibles y el indicador del foco es visible. Ejercicio • Recorrer la página usando el tabulador
  24. 24. 24 Sliders Permitir parar, pausar y reiniciar
  25. 25. 25 Ampliar • Permitir aumentar hasta un 200% el texto • sin desarmar la estructura • sin scroll horizontal para leer una línea de texto. • Probar que no desborde al ampliar utilizando “control” “+”. Ejemplo Ejercicio
  26. 26. 26 Encabezados • Los títulos (y sólo los títulos) de cada sección de contenido se identifican como encabezados (<h1> - <h6>) • Si existen encabezados, – Deben corresponderse con secciones reales. – Deben tener un orden lógico Ejemplo • Web Developer (Outline → Outline Headings) • HeadingsMap Ejercicio
  27. 27. 27 Listas • Los listados de elementos se marcan con los elementos de lista correspondientes (<ol>, <ul>, <dl>). • Si existen grupos de 3 o más elementos, verificar que se marcan como listas. • Web Developer (Outline → Outline Custom Elements → Ol, UL, DL, LI, DT) Ejercicio
  28. 28. 28 Título de la página • La página posee un título (<title>) que identifica su contenido Los títulos deben: • Identificar el tema • Entenderse fuera de contexto • Ser cortos • Únicos dentro del sitio Ejemplo Ejercicio
  29. 29. 29 Múltiples vías • Existe un mapa web o bien una función de búsqueda en el sitio. • Si existe un mapa web, todas las secciones deben estar enlazadas. Ejercicio
  30. 30. 30 Epilepsia fotosensitiva • Photosensitive Epilepsy Analysis Tool – Enlace a la herramienta: http://trace.wisc.edu/peat/
  31. 31. 31 Validación de contraste de sonido • Es necesario asegurar que ruidos o música de fondo sean lo suficientemente bajos como para comprender el sonido de primer plano. • Enlace a la herramienta: http://www.eramp.com/WCAG_2_audio_contrast_tool_help.htm
  32. 32. 32 Legibilidad • Stilus. Es una herramienta en línea gratuita que ayuda a detectar errores ortográficos en una página web. – Enlace a la herramienta: http://stilus.daedalus.es/stilus-es.php • Readability index calculator. Es una herramienta en línea que calcula el “nivel de lectura” de un texto – Enlace a la herramienta: http://www.standards-schmandards. com/exhibits/rix/index.php Principalmente: sentido común!
  33. 33. 33 Evaluación manual (resumen) 1. Imágenes a. Texto alternativo b. Imágenes decorativas c. Imágenes de texto d. Imágenes que son enlaces 2. Objetos 3. Subtítulos 4. Uso del color 5. Contraste mínimo 6. Control con teclado 1. Accesibles por teclado 2. Sin trampas para el foco del teclado 3. Orden del foco. 4. Foco visible 7. Sliders 8. Ampliar 9. Encabezados 10.Listas 11.Título de página 12.Múltiples vías 13.Epilepsia fotosensitiva 14.Validación de contraste de sonido 15.Legibilidad
  34. 34. 34 Conclusiones
  35. 35. 35 Probar, probar, probar… • Navegar con las imágenes deshabilitadas – comprobando que tienen texto alternativo y que es posible navegar normalmente. • Navegar con el sonido desconectado – comprobando que el contenido de audio tiene disponible contenido textual. • Modificar el tamaño de las fuentes utilizando las funciones del navegador – para comprobar que la página es usable en tamaños de fuente más grandes. • Visualizar en escala de grises (o imprimir en blanco y negro la página) – para comprobar que es posible comprender el contenido. • Navegar sin CSS, – comprobando que se mantiene todo el contenido y en un orden que permite comprenderlo. • Utilizar distintos navegadores, sistemas operativos y pantallas. • Con conexiones lentas. • Utilizar otros dispositivos como celulares.
  36. 36. 36 Sin monitor • Navegar con el monitor apagado utilizando un lector de pantalla – NVDA – Jaws – Orca • Simuladores de lectores de pantalla: Fangs - the screen reader emulator
  37. 37. 37 Cualquier parecido es mera coincidencia… • Estas técnicas no son simulaciones de discapacidad • No se puede recrear la situación exacta
  38. 38. 38 Cumplir las pautas no es lo mismo que ser accesible Un contenido web... • Puede cumplir con todas las pautas • Puede pasar todos los test automáticos • Puede parecer accesible • Sin embargo ... • Puede seguir teniendo barreras de acceso • Entonces... • El objetivo no es cumplir pautas, sino ser accesible • Las pautas son herramientas para llegar a la accesibilidad • Es necesario realizar pruebas manuales y test de usuarios • Información de contacto para que el usuario reporte barreas de acceso.
  39. 39. 39 Hagamos nuestra parte por una Web para todas y todos
  40. 40. CC http://www.flickr.com/photos/wwworks 40

×