Accesibilidad Web
Accesibilidad
¿Cómo se hace un portal web?
Planific
ación
¿El esfuerzo valió la pena?
¿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?
• Guías Agesic:
http://www.agesic.gub.uy/
• Pautas WCAG 2.0:
http://www.codexexempla.org/traducc...
¿Como prevenir que te vendan un buzón?
• Objetiva, rápida y económica.
• Validar de estándares, pautas y aspectos específi...
Evaluación Automática de
Accesibilidad
Evaluación de estándares
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta clase?
Perceptible | Operable | ...
¿Como validar los estándares?
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta clase?
• Validador HTML [ht...
¿Como interpretar los resultados?
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta clase?
Evaluación de accesibilidad
Herramientas automáticas para WCAG 2.0:
eXaminator: http://examinator.ws
TAW: http://www.tawdi...
www.examinator.ws
¿Cómo interpretar los resultados?
Puede rendir más
Falsos positivos y falsos negativos
Existen herramientas que ayudan a evaluar ciertos
aspectos de la accesibilidad.
Las he...
Errores más comunes
Evaluación automática de accesibilidad
Si nos dice: Imágenes sin alternativa textual.
Brindar descripciones alternativas cortas para imágenes.
Perceptible | Oper...
2/09/1
Permitir aumentar hasta un
200% el texto
• sin desarmar la estructura
• sin scroll horizontal para
leer una línea d...
Si dice: Primer enlace no conduce al contenido
Perceptible | Operable | Distinguible | Robusto
Agregar un enlace para salt...
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
Perceptible | Operable | Distinguible | Robusto
Todas las funcionalidades de...
<label for="nombre">nombre: </label>
<input type="text" id="nombre"
name="nombre" />
<input name="busqueda" type="text"
ti...
Si dice: Contraste menor a 3:1
Perceptible | Operable | Distinguible | Robusto
Debe existir un contraste suficiente entre ...
Uso de colores
Perceptible | Operable | Distinguible | Robusto
Herramienta para verificar contraste Simulador
http://www.p...
Simuladores
Evaluación automática de accesibilidad
Simulador del lector de pantalla
http://www.usamos.es/accesibilidadWeb/herramientas/lector.html
Simuladores - Ejemplo
http://www.snap.gub.uy/
Resultado de simulación
Simuladores - Ejemplo
http://www.mrree.gub.uy/
Resultado de simulación
Simuladores - Ejemplo
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...
Muchas gracias
www.agesic.gub.uy
Próxima SlideShare
Cargando en…5
×

Evaluacion de accesibilidad

1.189 visualizaciones

Publicado el

Taller de Evaluación de Accesibilidad para desarrolladores de portales del Estado, desarrollado en AGESIC.
Original publicado en: www.agesic.gub.uy

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

Sin descargas
Visualizaciones
Visualizaciones totales
1.189
En SlideShare
0
De insertados
0
Número de insertados
5
Acciones
Compartido
0
Descargas
17
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

Evaluacion de accesibilidad

  1. 1. Accesibilidad Web Accesibilidad
  2. 2. ¿Cómo se hace un portal web? Planific ación
  3. 3. ¿El esfuerzo valió la pena?
  4. 4. ¿Por donde empezar?
  5. 5. 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
  6. 6. 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
  7. 7. ¿Cómo profundizo después? • 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
  8. 8. ¿Como prevenir que te vendan un buzón? • 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.
  9. 9. Evaluación Automática de Accesibilidad
  10. 10. Evaluación de estándares Que nos marcan? Mapa conceptual? Cómo profundizo después de esta clase? Perceptible | Operable | Distinguible | Robusto Utilizar código estándar (X)HTML y CSS.
  11. 11. ¿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/]
  12. 12. ¿Como interpretar los resultados? Que nos marcan? Mapa conceptual? Cómo profundizo después de esta clase?
  13. 13. Evaluación de accesibilidad Herramientas automáticas para WCAG 2.0: eXaminator: http://examinator.ws TAW: http://www.tawdis.net AccessMonitor: http://www.acesso.umic.pt/accessmonitor/ Portugués
  14. 14. www.examinator.ws
  15. 15. ¿Cómo interpretar los resultados?
  16. 16. Puede rendir más
  17. 17. Falsos positivos y falsos negativos Existen herramientas que ayudan a evaluar ciertos aspectos de la accesibilidad. Las herramientas automáticas pueden presentar: •Falsos positivos • Falsos negativos Tener en cuenta: •Evaluar con al menos dos herramientas automáticas. •Realizar evaluaciones manuales y pruebas con usuarios.
  18. 18. Errores más comunes Evaluación automática de accesibilidad
  19. 19. Si nos dice: Imágenes sin alternativa textual. 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.
  20. 20. 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 Usar medidas relativas (% y em) para elementos y fuentes. Además: Probar que no desborde al ampliar utilizando “control” “+”.
  21. 21. Si dice: Primer enlace no conduce al contenido Perceptible | Operable | Distinguible | Robusto Agregar un enlace para saltar al contenido. 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 Titular las páginas. Además: Probar que sea adecuado y único
  23. 23. Si dice: Manejadores de evento no redundantes Perceptible | Operable | Distinguible | Robusto Todas las funcionalidades deben ser accesibles por teclado. No deben existir trampas para el foco del teclado.
  24. 24. <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 Controles de formularios. Perceptible | Operable | Distinguible | Robusto
  25. 25. Si dice: Contraste menor a 3:1 Perceptible | Operable | Distinguible | Robusto Debe existir un contraste suficiente entre color de fondo y de letra. Además: Probar textos más pequeños
  26. 26. Uso de colores Perceptible | Operable | Distinguible | Robusto Herramienta para verificar contraste Simulador http://www.paciellogoup.com/resources/contrast-analyser.html
  27. 27. Simuladores Evaluación automática de accesibilidad
  28. 28. Simulador del lector de pantalla http://www.usamos.es/accesibilidadWeb/herramientas/lector.html
  29. 29. Simuladores - Ejemplo http://www.snap.gub.uy/
  30. 30. Resultado de simulación
  31. 31. Simuladores - Ejemplo http://www.mrree.gub.uy/
  32. 32. Resultado de simulación
  33. 33. Simuladores - Ejemplo http://www.boe.es/
  34. 34. Resultado de simulación
  35. 35. 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 • Es necesario realizar pruebas manuales y test de usuarios • Información de contacto para que el usuario reporte barreas de acceso.
  36. 36. Muchas gracias www.agesic.gub.uy

×