Download - Evaluacion de accesibilidad
![Page 1: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/1.jpg)
Accesibilidad Web
Accesibilidad
![Page 2: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/2.jpg)
¿Cómo se hace un portal web?
Planificación
![Page 3: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/3.jpg)
¿El esfuerzo valió la pena?
![Page 4: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/4.jpg)
¿Por donde empezar?
![Page 5: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/5.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 6: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/6.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
![Page 7: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/7.jpg)
¿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 Accesibilidadhttp://www.astrolabio.com.co/clientes/cintel/index.html
![Page 8: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/8.jpg)
¿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.
![Page 9: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/9.jpg)
Evaluación Automática de Accesibilidad
![Page 10: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/10.jpg)
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.
![Page 11: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/11.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 12: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/12.jpg)
¿Como interpretar los resultados?
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta clase?
![Page 13: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/13.jpg)
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
![Page 14: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/14.jpg)
www.examinator.ws
![Page 15: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/15.jpg)
¿Cómo interpretar los resultados?
![Page 16: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/16.jpg)
Puede rendir más
![Page 17: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/17.jpg)
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.
![Page 18: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/18.jpg)
Errores más comunes
Evaluación automática de accesibilidad
![Page 19: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/19.jpg)
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.
![Page 20: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/20.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
Usar medidas relativas (% y em) para elementos y fuentes.
Además: Probar que no desborde al ampliar utilizando “control” “+”.
![Page 21: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/21.jpg)
Si dice: Primer enlace no conduce al contenido
Perceptible | Operable | Distinguible | Robusto
Agregar un enlace para saltar al contenido.
Además: Probar que funcionen
![Page 22: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/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
Titular las páginas.
Además: Probar que sea adecuado y único
![Page 23: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/23.jpg)
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.
![Page 24: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/24.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
Controles de formularios.
Perceptible | Operable | Distinguible | Robusto
![Page 25: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/25.jpg)
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
![Page 26: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/26.jpg)
Uso de colores
Perceptible | Operable | Distinguible | Robusto
Herramienta para verificar contraste Simulador
http://www.paciellogoup.com/resources/contrast-analyser.html
![Page 27: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/27.jpg)
Simuladores
Evaluación automática de accesibilidad
![Page 28: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/28.jpg)
Simulador del lector de pantalla
http://www.usamos.es/accesibilidadWeb/herramientas/lector.html
![Page 29: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/29.jpg)
Simuladores - Ejemplohttp://www.snap.gub.uy/
![Page 30: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/30.jpg)
Resultado de simulación
![Page 31: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/31.jpg)
Simuladores - Ejemplohttp://www.mrree.gub.uy/
![Page 32: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/32.jpg)
Resultado de simulación
![Page 33: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/33.jpg)
Simuladores - Ejemplohttp://www.boe.es/
![Page 34: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/34.jpg)
Resultado de simulación
![Page 35: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/35.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
• Es necesario realizar pruebas manuales y test de usuarios
• Información de contacto para que el usuario reporte barreas de acceso.
![Page 36: Evaluacion de accesibilidad](https://reader035.vdocumento.com/reader035/viewer/2022081412/54573ac5af795997098ba4d9/html5/thumbnails/36.jpg)
Muchas gracias
www.agesic.gub.uy