Introducción a la evaluación de accesibilidad

1,121 views

Published on

Presentación realizada en el Evento de Gobierno Electrónico de AGESIC el 22 de octubre de 2010.
Original publicado en: www.agesic.gub.uy

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,121
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducción a la evaluación de accesibilidad

  1. 1. Desarrollo de un Portal Accesibilidad 22 de octubre, 2010 Silvia Da Rosa silvia.darosa@agesic.gub.uy
  2. 2. Diseño para algunos versus Diseño para todos 2
  3. 3. Accesibilidad Universal Opción 1Opción 1 Versus Opción 2Opción 2
  4. 4. ¿Accesibilidad para quienes? • Discapacidad Visual, Auditiva, Motora, Cognitiva • Edad avanzada • Limitaciones tecnológicas: Antigua, nueva. Ancho de banda. Plugins, navegador.
  5. 5. Accesibilidad Web La posibilidad que recursos web (información y servicios) puedan ser utilizados de forma satisfactoria por el mayor número posible de personas, independientemente de las limitaciones personales o de limitaciones derivadas de su entorno, sean éstas de carácter físico, mental, educativo, familiar o socio- económico.
  6. 6. Componentes de la Accesibilidad Web AutoresUsuarios
  7. 7. ¿Por donde empezar?
  8. 8. Principios, pautas y criterios de conformidad de WCAG 2.0 Niveles de Accesibilidad 4 Principios 12 Pautas 61 Criterios de conformidad Conceptos fundamentales Objetivos Básicos Requisitos concretos a cumplir, testeables • Perceptible • Operable • Comprensible • Robusto
  9. 9. Documentos complementarios WCAG 2.0 Pautas de accesibilidad de contenido web Como Cumplir Técnicas Comprender How to meet WCAG2.0 Techniques for WCAG 2.0 Understanding WCAG2.0 Ejemplo 1 Pautas online
  10. 10. ¿Cómo profundizo después de esta clase? • Guías Agesic: http://www.agesic.gub.uy/ • Pautas WCAG 2.0: http://www.codexexempla.org/traducciones/pautas-accesibilidad- contenido-web-2.0.htm • Mapa conceptual: http://www.triplea.es/blog/wp-content/uploads/2009/04/mapa-wcag2.pdf • Olga carreras: http://olgacarreras.blogspot.com/ • Curso de Introducción a la Accesibilidad http://www.astrolabio.com.co/clientes/cintel/index.html
  11. 11. ¿Cómo evaluar la accesibilidad?
  12. 12. Evaluación Automática de Accesibilidad
  13. 13. Algunas herramientas para evaluar eXaminator: http://examinator.ws TAW para WCAG2.0: http://www.tawdis.net AccessMonitor (portugués): http://www.acesso.umic.pt/accessmonitor/ Ejercicio 1 http://www.mides.gub.uy/
  14. 14. Si nos dice: Imágenes sin alternativa textual. 1.1 Alternativas textuales Brindar descripciones alternativas cortas para imágenes. Perceptible | Operable | Distinguible | Robusto alt = “Mafalda escuchando música en la radio” Además: Probar que sean correctos.
  15. 15. ¿Qué descripción le pondría a cada imagen? Ítem 1 Ítem 2 1 2 3 4 5 6 Ejercicio 2
  16. 16. 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 = “” Ejercicio 2
  17. 17. 2/09/1 Permitir aumentar hasta un 200% el texto • sin desarmar la estructura • sin scroll horizontal para leer una línea de texto. Si nos dice: Se usan medidas absolutas Perceptible | Operable | Distinguible | Robusto 1.4. Distinguible Se deben usar medidas relativas (% y em) para elementos y fuentes. Ejercicio 3 http://www.boe.es/ Además: Probar que no desborde al ampliar.
  18. 18. 2/09/1 Si dice: Texto justificado / Interlineado Perceptible | Operable | Distinguible | Robusto 1.4. Distinguible •El texto no debe estar justificado. •Colocar interlineado de, al menos, un espacio y medio.
  19. 19. <label for="nombre">nombre: </label> <input type="text" id="nombre" name="nombre" /> <input name="busqueda" type="text" title="Término para la búsqueda" /> input type="submit" value="Buscar" /> Ejemplo: Si dice: Formularios 1.1 Alternativas textuales Controles de formularios. Perceptible | Operable | Distinguible | Robusto
  20. 20. Si dice: No se usan encabezados. Perceptible | Operable | Distinguible | Robusto 2.4. Navegable Usar encabezados. Además: Probar que sean coherentes
  21. 21. Si dice: Primer enlace no conduce al contenido Perceptible | Operable | Distinguible | Robusto 2.4. Navegable Agregar un enlace para saltar al contenido. Ejercicio 4 http://ct.ctic.es/ Además: Probar que funcionen
  22. 22. Los títulos deben: •Identificar el tema •Entenderse fuera de contexto •Ser cortos •Únicos dentro del sitio Si dice: Títulos de las páginas Perceptible | Operable | Distinguible | Robusto 2.4. Navegable Titular las páginas. Además: Probar que sea adecuado y único
  23. 23. Si dice: Manejadores de evento no redundantes • Usar enlaces y controles de formulario estándar de HTML. • Usar manejadores de evento que puedan lanzarse mediante teclado. onmousedown con onkeydown onmouseup con onkeyup onmouseover con onfocus onmouseout con onblur • Usar onclick. • Comprobar que no existen trampas para el foco del teclado. Perceptible | Operable | Distinguible | Robusto 2.1. Accesible por teclado Todas las funcionalidades deben ser accesibles por teclado.
  24. 24. ¿Y si no puedes usar el mouse y/o la mano derecha (o izquierda) … •Por un accidente •Porque tener una mano ocupada •Porque se rompió el mouse …y necesitaras el teléfono del Departamento de RRHH de la AIN? http://www.ain.gub.uy/nosotros/nosotros_edificio.html El teclado también existe Ejercicio 5
  25. 25. Si dice: Validación del código (X)HTML / CSS Que nos marcan? Mapa conceptual? Cómo profundizo después de esta clase? Perceptible | Operable | Distinguible | Robusto 4.1. Compatible Utilizar código estándar (X)HTML y CSS.
  26. 26. Como validar los estándares Que nos marcan? Mapa conceptual? Cómo profundizo después de esta clase? • Validador HTML [http://validator.w3.org/] • Validador CSS [http://jigsaw.w3.org/css-validator/]
  27. 27. Si dice: Contraste menor a 3:1 Perceptible | Operable | Distinguible | Robusto 1.4. Distinguible Debe existir un contraste suficiente entre color de fondo y de letra. Además: Probar textos más pequeños
  28. 28. Evaluación Manual y Herramientas de Apoyo
  29. 29. Uso de colores Perceptible | Operable | Distinguible | Robusto 1.4. Distinguible Debe existir un contraste suficiente entre color de fondo y de letra. Herramienta para verificar contraste Simulador http://www.paciellogoup.com/resources/contrast-analyser.html Ejercicio 6 http://www.pas.edu.uy/
  30. 30. Cual es un enlace? Uso de colores Perceptible | Operable | Distinguible | Robusto 1.4. Distinguible No usar el color como único medio de transmitir información. Por ejemplo: • “Los campos marcados en rojo son obligatorios.” • “Por favor revisa los campos obligatorios marcados en rojo.”
  31. 31. Indicar situación actual dentro de las barras de navegación Miga de pan Navegación Perceptible | Operable | Distinguible | Robusto 2.4. Navegable Ejemplo 2 www.cmat.edu.uy
  32. 32. Simuladores
  33. 33. Simulador del lector de pantalla http://www.usamos.es/accesibilidadWeb/herramientas/lector.html
  34. 34. Simuladores - Ejemplo Ejemplo 3 http://www.snap.gub.uy/
  35. 35. Resultado de simulación
  36. 36. Simuladores - Ejemplo Ejemplo 4 http://www.mrree.gub.uy/
  37. 37. Resultado de simulación
  38. 38. Simuladores - Ejemplo Ejemplo 5 http://www.boe.es/
  39. 39. Resultado de simulación
  40. 40. Cumplir las pautas no es lo mismo que ser accesible Un portal 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 • Información de contacto disponible para que el usuario reporte barreas de acceso.
  41. 41. Navegar con lector de pantalla 1. Activar NVDA 2. Navegar usando NVDA • http://www.sanidadpolicial.gub.uy/ • http://www.fundacionctic.es/ 3. Ahora escuchar el sitio de sus organismos Ejercicio 7
  42. 42. Muchas gracias www.agesic.gub.uy

×