Este documento resume los principales conceptos de accesibilidad web, incluyendo las pautas WCAG 2.0, los componentes de la accesibilidad, cómo evaluar sitios web para accesibilidad y simuladores de lector de pantalla. El objetivo final es que los sitios web sean accesibles para todos los usuarios, independientemente de discapacidades.

1. Desarrollo de un Portal
Accesibilidad
22 de octubre, 2010
Silvia Da Rosa
silvia.darosa@agesic.gub.uy

2. Diseño para algunos versus Diseño para todos
2

3. Accesibilidad Universal
Opción 1Opción 1 Versus Opción 2Opción 2

4. ¿Accesibilidad para quienes?
• Discapacidad
Visual, Auditiva, Motora,
Cognitiva
• Edad avanzada
• Limitaciones tecnológicas:
Antigua, nueva. Ancho de
banda. Plugins, navegador.

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. Componentes de la Accesibilidad Web
AutoresUsuarios

7. ¿Por donde empezar?

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. 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. ¿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. ¿Cómo evaluar la accesibilidad?

12. Evaluación Automática de
Accesibilidad

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. 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. ¿Qué descripción le pondría a cada imagen?
Ítem 1
Ítem 2
1 2 3
4 5 6
Ejercicio 2

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. 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. 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. <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. Si dice: No se usan encabezados.
Perceptible | Operable | Distinguible | Robusto
2.4. Navegable
Usar encabezados.
Además: Probar que
sean coherentes

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. 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. 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. ¿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. 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. 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. 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. Evaluación Manual y
Herramientas de Apoyo

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. 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. 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. Simuladores

33. Simulador del lector de pantalla
http://www.usamos.es/accesibilidadWeb/herramientas/lector.html

34. Simuladores - Ejemplo
Ejemplo 3
http://www.snap.gub.uy/

35. Resultado de simulación

36. Simuladores - Ejemplo
Ejemplo 4
http://www.mrree.gub.uy/

37. Resultado de simulación

38. Simuladores - Ejemplo
Ejemplo 5
http://www.boe.es/

39. Resultado de simulación

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. 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. Muchas gracias
www.agesic.gub.uy