Diseño para algunos versus Diseño para todos
2
Accesibilidad Universal
Opción 1Opción 1 Versus
Opción 2 Opción 2
¿Accesibilidad para quienes?
• Discapacidad
Visual, Auditiva, Motora, Cognitiva
• Edad avanzada
• Limitaciones tecnológicas:
Antigua, nueva. Ancho de banda. Plugins, navegador.
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.
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 conformidad
Conceptos fundamentales
Objetivos Básicos
Requisitos concretos a cumplir,
testeables• Perceptible• Operable• Comprensible• Robusto
Documentos complementarios
WCAG 2.0Pautas de accesibilidad de
contenido web
Como Cumplir
Técnicas Comprender
How to meet WCAG2.0
Techniques for WCAG 2.0
Understanding WCAG2.0
Ejemplo 1Pautas online
¿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 Accesibilidadhttp://www.astrolabio.com.co/clientes/cintel/index.html
¿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 (portugués):
http://www.acesso.umic.pt/accessmonitor/
Ejercicio 1http://www.mides.gub.uy/
Si nos dice: Imágenes sin alternativa textual.
1.1 Alternativas textualesBrindar descripciones alternativas cortas para imágenes.
Perceptible | Operable | Distinguible | Robusto
alt = “Mafalda escuchando música en la radio”
Además: Probar que sean correctos.
¿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 de garantía”
alt= "Introduzca las letras de la imagen"alt = “”
Ejercicio 2
2/09/10
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. DistinguibleSe deben usar medidas relativas (% y em) para elementos y fuentes. Ejercicio 3
http://www.boe.es/
Además: Probar que no desborde al ampliar.
2/09/10
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.
<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 textualesControles de formularios.
Perceptible | Operable | Distinguible | Robusto
Si dice: No se usan encabezados.
Perceptible | Operable | Distinguible | Robusto
2.4. NavegableUsar encabezados.
Además: Probar que sean coherentes
Si dice: Primer enlace no conduce al contenido
Perceptible | Operable | Distinguible | Robusto
2.4. NavegableAgregar un enlace para saltar al contenido.
Ejercicio 4http://ct.ctic.es/
Además: Probar que funcionen
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
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 tecladoTodas las funcionalidades deben ser accesibles por teclado.
¿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
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. CompatibleUtilizar código estándar (X)HTML y CSS.
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/]
Si dice: Contraste menor a 3:1
Perceptible | Operable | Distinguible | Robusto
1.4. DistinguibleDebe existir un contraste suficiente entre color de fondo y de letra.
Además: Probar textos más pequeños
Evaluación Manual y Herramientas de Apoyo
Uso de colores
Perceptible | Operable | Distinguible | Robusto
1.4. DistinguibleDebe 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 6http://www.pas.edu.uy/
Cual es un enlace?
Uso de colores
Perceptible | Operable | Distinguible | Robusto
1.4. DistinguibleNo 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.”
Indicar situación actual dentro de las barras de navegación
Miga de pan
Navegación
Perceptible | Operable | Distinguible | Robusto
2.4. NavegableEjemplo 2
www.cmat.edu.uy
Simuladores
Simulador del lector de pantalla
http://www.usamos.es/accesibilidadWeb/herramientas/lector.html
Simuladores - EjemploEjemplo 3
http://www.snap.gub.uy/
Resultado de simulación
Simuladores - EjemploEjemplo 4
http://www.mrree.gub.uy/
Resultado de simulación
Simuladores - EjemploEjemplo 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 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.
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
Muchas gracias
www.agesic.gub.uy
Top Related