Introducción a la evaluación de accesibilidad
description
Transcript of Introducción a la evaluación de accesibilidad
![Page 2: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/2.jpg)
Diseño para algunos versus Diseño para todos
2
![Page 3: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/3.jpg)
Accesibilidad Universal
Opción 1Opción 1 Versus
Opción 2 Opción 2
![Page 4: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/4.jpg)
¿Accesibilidad para quienes?
• Discapacidad
Visual, Auditiva, Motora, Cognitiva
• Edad avanzada
• Limitaciones tecnológicas:
Antigua, nueva. Ancho de banda. Plugins, navegador.
![Page 5: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/5.jpg)
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.
![Page 6: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/6.jpg)
Componentes de la Accesibilidad Web
AutoresUsuarios
![Page 7: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/7.jpg)
¿Por donde empezar?
![Page 8: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/8.jpg)
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
![Page 9: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/9.jpg)
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
![Page 10: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/10.jpg)
¿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
![Page 11: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/11.jpg)
¿Cómo evaluar la accesibilidad?
![Page 12: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/12.jpg)
Evaluación Automática de Accesibilidad
![Page 13: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/13.jpg)
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/
![Page 14: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/14.jpg)
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.
![Page 15: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/15.jpg)
¿Qué descripción le pondría a cada imagen?
Ítem 1 Ítem 2
1 2 3
4 5 6
Ejercicio 2
![Page 16: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/16.jpg)
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
![Page 17: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/17.jpg)
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.
![Page 18: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/18.jpg)
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.
![Page 19: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/19.jpg)
<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
![Page 20: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/20.jpg)
Si dice: No se usan encabezados.
Perceptible | Operable | Distinguible | Robusto
2.4. NavegableUsar encabezados.
Además: Probar que sean coherentes
![Page 21: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/21.jpg)
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
![Page 22: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/22.jpg)
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
![Page 23: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/23.jpg)
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.
![Page 24: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/24.jpg)
¿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
![Page 25: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/25.jpg)
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.
![Page 26: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/26.jpg)
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/]
![Page 27: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/27.jpg)
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
![Page 28: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/28.jpg)
Evaluación Manual y Herramientas de Apoyo
![Page 29: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/29.jpg)
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/
![Page 30: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/30.jpg)
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.”
![Page 31: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/31.jpg)
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
![Page 32: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/32.jpg)
Simuladores
![Page 33: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/33.jpg)
Simulador del lector de pantalla
http://www.usamos.es/accesibilidadWeb/herramientas/lector.html
![Page 34: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/34.jpg)
Simuladores - EjemploEjemplo 3
http://www.snap.gub.uy/
![Page 35: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/35.jpg)
Resultado de simulación
![Page 36: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/36.jpg)
Simuladores - EjemploEjemplo 4
http://www.mrree.gub.uy/
![Page 37: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/37.jpg)
Resultado de simulación
![Page 38: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/38.jpg)
Simuladores - EjemploEjemplo 5
http://www.boe.es/
![Page 39: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/39.jpg)
Resultado de simulación
![Page 40: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/40.jpg)
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.
![Page 41: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/41.jpg)
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
![Page 42: Introducción a la evaluación de accesibilidad](https://reader035.fdocumento.com/reader035/viewer/2022081412/54573a43af795900058b4a68/html5/thumbnails/42.jpg)
Muchas gracias
www.agesic.gub.uy