Desarrollo de un Portal
Accesibilidad
22 de octubre, 2010
Silvia Da Rosa
silvia.darosa@agesic.gub.uy
Diseño para algunos versus Diseño para todos
2
Accesibilidad Universal
Opción 1Opción 1 Versus Opción 2Opción 2
¿Accesibilidad para quienes?
• Discapacidad
Visual, Auditiva, Motora,
Cognitiva
• Edad avanzada
• Limitaciones tecnológica...
Accesibilidad Web
La posibilidad que recursos web
(información y servicios) puedan ser
utilizados de forma satisfactoria p...
Componentes de la Accesibilidad Web
AutoresUsuarios
¿Por donde empezar?
Principios, pautas y criterios de
conformidad de WCAG 2.0
Niveles de Accesibilidad
4
Principios
12
Pautas
61
Criterios de
...
Documentos complementarios
WCAG 2.0
Pautas de accesibilidad de
contenido web
Como Cumplir Técnicas Comprender
How to meet
...
¿Cómo profundizo después de esta clase?
• Guías Agesic:
http://www.agesic.gub.uy/
• Pautas WCAG 2.0:
http://www.codexexemp...
¿Cómo evaluar la accesibilidad?
Evaluación Automática de
Accesibilidad
Algunas herramientas para evaluar
eXaminator:
http://examinator.ws
TAW para WCAG2.0:
http://www.tawdis.net
AccessMonitor (...
Si nos dice: Imágenes sin alternativa textual.
1.1 Alternativas textuales
Brindar descripciones alternativas cortas para i...
¿Qué descripción le pondría a cada imagen?
Ítem 1
Ítem 2
1 2 3
4 5 6
Ejercicio 2
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 ...
2/09/1
Permitir aumentar hasta un
200% el texto
• sin desarmar la estructura
• sin scroll horizontal para
leer una línea d...
2/09/1
Si dice: Texto justificado / Interlineado
Perceptible | Operable | Distinguible | Robusto
1.4. Distinguible
•El tex...
<label for="nombre">nombre: </label>
<input type="text" id="nombre"
name="nombre" />
<input name="busqueda" type="text"
ti...
Si dice: No se usan encabezados.
Perceptible | Operable | Distinguible | Robusto
2.4. Navegable
Usar encabezados.
Además: ...
Si dice: Primer enlace no conduce al contenido
Perceptible | Operable | Distinguible | Robusto
2.4. Navegable
Agregar un e...
Los títulos deben:
•Identificar el tema
•Entenderse fuera de contexto
•Ser cortos
•Únicos dentro del sitio
Si dice: Título...
Si dice: Manejadores de evento no redundantes
• Usar enlaces y controles de formulario estándar de HTML.
• Usar manejadore...
¿Y si no puedes usar el mouse y/o la mano derecha
(o izquierda) …
•Por un accidente
•Porque tener una mano ocupada
•Porque...
Si dice: Validación del código (X)HTML / CSS
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta clase?
Perce...
Como validar los estándares
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta clase?
• Validador HTML [http...
Si dice: Contraste menor a 3:1
Perceptible | Operable | Distinguible | Robusto
1.4. Distinguible
Debe existir un contraste...
Evaluación Manual y
Herramientas de Apoyo
Uso de colores
Perceptible | Operable | Distinguible | Robusto
1.4. Distinguible
Debe existir un contraste suficiente entr...
Cual es un enlace?
Uso de colores
Perceptible | Operable | Distinguible | Robusto
1.4. Distinguible
No usar el color como ...
Indicar situación actual dentro de las barras de navegación
Miga de pan
Navegación
Perceptible | Operable | Distinguible |...
Simuladores
Simulador del lector de pantalla
http://www.usamos.es/accesibilidadWeb/herramientas/lector.html
Simuladores - Ejemplo
Ejemplo 3
http://www.snap.gub.uy/
Resultado de simulación
Simuladores - Ejemplo
Ejemplo 4
http://www.mrree.gub.uy/
Resultado de simulación
Simuladores - Ejemplo
Ejemplo 5
http://www.boe.es/
Resultado de simulación
Cumplir las pautas no es lo mismo que ser
accesible
Un portal web...
• Puede cumplir con todas las pautas
• Puede pasar to...
Navegar con lector de pantalla
1. Activar NVDA
2. Navegar usando NVDA
• http://www.sanidadpolicial.gub.uy/
• http://www.fu...
Muchas gracias
www.agesic.gub.uy
Próxima SlideShare
Cargando en…5
×

Introducción a la evaluación de accesibilidad

1.121 visualizaciones

Publicado el

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

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
1.121
En SlideShare
0
De insertados
0
Número de insertados
2
Acciones
Compartido
0
Descargas
12
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

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

×