Post on 03-Nov-2014
description
Accesibilidad Web
Accesibilidad
¿Cómo se hace un portal web?
Planificació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 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
¿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
¿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.
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 | Distinguible | Robusto
Utilizar 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/]
¿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.tawdis.net
AccessMonitor: http://www.acesso.umic.pt/accessmonitor/ Portugués
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 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.
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 | Operable | Distinguible | Robusto
alt = “Mafalda escuchando música en la radio”
Además: Probar que sean correctos.
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” “+”.
Si dice: Primer enlace no conduce al contenido
Perceptible | Operable | Distinguible | Robusto
Agregar un enlace para saltar al contenido.
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
Titular las páginas.
Además: Probar que sea adecuado y único
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.
<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
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
Uso de colores
Perceptible | Operable | Distinguible | Robusto
Herramienta para verificar contraste Simulador
http://www.paciellogoup.com/resources/contrast-analyser.html
Simuladores
Evaluación automática de accesibilidad
Simulador del lector de pantalla
http://www.usamos.es/accesibilidadWeb/herramientas/lector.html
Simuladores - Ejemplohttp://www.snap.gub.uy/
Resultado de simulación
Simuladores - Ejemplohttp://www.mrree.gub.uy/
Resultado de simulación
Simuladores - Ejemplohttp://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
• Es necesario realizar pruebas manuales y test de usuarios
• Información de contacto para que el usuario reporte barreas de acceso.
Muchas gracias
www.agesic.gub.uy