Introducción a la evaluación de accesibilidad

Desarrollo de un Portal

Accesibilidad

22 de octubre, 2010

Silvia Da Rosasilvia.darosa@agesic.gub.uy

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