Evaluación de accesibilidad web
40
Accesibilidad Web Evaluación CC www.diseñoaccesible.es
description
Taller de 3 horas de evaluacion de accesibilidad web
Transcript of Evaluación de accesibilidad web
Accesibilidad Web
Evaluación
CC www.diseñoaccesible.es
2
Agenda
1. Introducción
2. Evaluación automática
3. Evaluación manual
4. Evaluación manual
5. Conclusiones
BreakCC https://www.flickr.com/photos/otacke/
3
Introducción
4
Evaluación de Accesibilidad
• 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
Evaluación manual
Técnicas de filtrado
Pruebas con usuarios
5
Evaluación automática
6
Estándares: (X) HTML• Garantiza portabilidad
• Facilita mantenibilidad del código
Fuente: http://validator.w3.org/
Objetiva - Rápida - Económica
Recomendado en Pauta 4 de WCAG 2.0
Ejercicio
7
Estándares: CSS• Garantiza portabilidad
• Facilita mantenibilidad del código
Fuente: http://jigsaw.w3.org/css-validator/ Recomendado en Pauta 4 de WCAG 2.0
Objetiva - Rápida - Económica
Ejercicio
8
Pautas de Accesibilidad
• Herramientas evalúan ciertos aspectos de la accesibilidad
• Algunos aspectos no son automatizables
• No es una evaluación completa
• Tener en cuenta: falsos positivos y negativos
• Utilizar al menos dos herramientas
Objetiva - Rápida - Económica
9
Pautas de Accesibilidad
http://www.tawdis.net/ http://examinator.ws/
http://www.totalvalidator.com/
10
Evaluación manual
11
Herramientas de apoyo
• Pendule (Chrome)
• WebDeveloper (Chrome, Firefox)
Ejercicio
Instala una
herramienta
12
Texto alternativo de imágenes• Verificar que los textos alternativos sean adecuados
• Pendule / Web Developer (Images → Display Alt Attributes)
alt = “Mafalda leyendo”
alt = “Imagen 344”
alt = “Ingrese el texto alternativo aquí”
alt = “Mafalda”
alt = “Niña leyendo”
Ejemplo
CC https://www.flickr.com/photos/vladimix/
13
Imágenes decorativas• Imágenes decorativas: no aportan información
– Incluirlas mediante la hoja de estilos
– Si no es posible, usar texto alternativo vacío (alt=””) y no usar title
– Ejemplo: imágenes empleadas como viñetas
Ejemplo
• Pendule / Web Developer (Images → Display Alt Attributes)
CC https://www.flickr.com/photos/vladimix/
14
• Las imágenes que transmiten información textual tienen un texto alternativo que proporciona la misma información textual.
Imágenes de texto
• Pendule / Web Developer (Images → Display Alt Attributes)
alt = “igualdad” alt = “Stay alive and avoid zombies”
Ejemplo
CC https://www.flickr.com/photos/daquellamanera/ CC http://en.wikipedia.org/
15
Imágenes de texto: EjemploEjemplo
Fuente: https://www.bcu.gub.uy/
16
Imágenes en enlaces• Las imágenes que funcionan como enlaces tienen un texto
alternativo que describe el destino del enlace (de forma conjunta con el texto del enlace) y no la imagen.
alt=“Icono de una casa", alt=“Sobre", alt=“Impresora" alt=“Signo de interrogación";
alt="Página principal del sitio", alt="Contacto“alt="Versión imprimible" alt="Ayuda".
• Pendule / Web Developer (Images → Display Alt Attributes)
Ejemplo
17
Imágenes: resumen
• Verifica todas las imágenes:
– Texto alternativo adecuado
– Imágenes decorativas: desde CSS o con altvacío
– Imágenes de texto: alt con texto de la imagen
– Imágenes que son enlaces: destino del enlace
Ejercicio
Evalúa imágenes
de un sitio que
hayas desarrollado
Prueba:
www.bcu.gub.uy
18
Objetos• Los elementos <object> (Flash) tienen una alternativa textual que
proporcione la misma información y/o funcionalidad (contenido del elemento <object>).
• Colocar siempre una alternativa (puede ser en otra pagina independiente, en la misma o dentro del elemento).
• No todo los objetos Flash transmiten contenido.• Usar FlashBlock• Habilitar / deshabilitar el plugin flash.
<object classid="java:Press.class" width="500" height="500"> <object data="Pressure.mpeg" type="video/mpeg">
<object data="Pressure.gif" type="image/gif"> As temperature increases, the molecules in the balloon...
</object> </object>
</object>
19
Subtítulos• El contenido multimedia que transmite información en la pista de
audio tiene subtítulos.
• Evaluación manual
20
Uso del color• El color no se emplea como único medio para transmitir
información.– Observar el uso del color en la página para verificar que se puede
interpretar toda la información sin depender del color.
– Verificar la página sin estilos
• Evaluación manual
Ejercicio
Corrija los campos marcados en rojo Bienvenido!Para ingresar presione el botón violeta
CC https://www.flickr.com/photos/rowan__ashlar/
21
Contrastes de colores• El contraste entre el color del texto y el color de fondo (en texto e
imágenes de texto) es el suficiente según las características del texto (normal o grande).
• Colour Contrast Analyzer, WCAG Contrast Checker, Contrast Analyser Firebug
http://www.paciellogoup.com/resources/contrast-analyser.html
Ejemplo
Ejercicio
22
Control con el teclado • Accesible por teclado
• Todos los elementos de interacción son accesibles y operables mediante teclado.
• Recorrer toda la página utilizando el tabulador y verificar que todos los elementos son accesibles y operables.
• Sin trampas• Sin trampas para el foco del teclado
• Recorrer la página mediante el tabulador y verificar que no se bloquea la tabulación por la página
• Recorrer la página usando el tabulador
Ejercicio
23
• Orden del foco• Los elementos de interacción reciben el foco en el orden correcto.• Recorrer la página mediante el tabulador y verificar que el orden por los
elementos de interacción es el adecuado
• Foco Visible• Es visible el indicador del foco del teclado sobre todo elemento de
interacción.• Recorrer toda la página mediante el tabulador y verificar que todos los
elementos de interacción son visibles y el indicador del foco es visible.
Control con el teclado
Ejercicio
• Recorrer la página usando el tabulador
24
Sliders
Permitir parar, pausar y reiniciar
25
Ampliar• Permitir aumentar hasta un 200% el texto
• sin desarmar la estructura
• sin scroll horizontal para leer una línea de texto.
• Probar que no desborde al ampliar utilizando “control” “+”.
Ejemplo
Ejercicio
26
Encabezados• Los títulos (y sólo los títulos) de cada sección de contenido se
identifican como encabezados (<h1> - <h6>)
• Si existen encabezados, – Deben corresponderse con secciones reales.
– Deben tener un orden lógico
• Web Developer (Outline → Outline Headings)
• HeadingsMap
Ejemplo
Ejercicio
27
Listas
• Los listados de elementos se marcan con los elementos de lista correspondientes (<ol>, <ul>, <dl>).
• Si existen grupos de 3 o más elementos, verificar que se marcan como listas.
• Web Developer (Outline → Outline Custom Elements → Ol, UL, DL, LI, DT)
Ejercicio
28
Título de la página• La página posee un título (<title>) que identifica su contenido
Los títulos deben:• Identificar el tema• Entenderse fuera de contexto• Ser cortos• Únicos dentro del sitio
Ejemplo
Ejercicio
29
Múltiples vías• Existe un mapa web o bien una función de búsqueda en el sitio.
• Si existe un mapa web, todas las secciones deben estar enlazadas. Ejercicio
30
Epilepsia fotosensitiva• Photosensitive Epilepsy Analysis Tool
– Enlace a la herramienta: http://trace.wisc.edu/peat/
31
Validación de contraste de sonido
• Es necesario asegurar que ruidos o música de fondo sean lo suficientemente bajos como para comprender el sonido de primer plano.
• Enlace a la herramienta: http://www.eramp.com/WCAG_2_audio_contrast_tool_help.htm
32
Legibilidad• Stilus. Es una herramienta en línea gratuita que ayuda a detectar errores
ortográficos en una página web.– Enlace a la herramienta: http://stilus.daedalus.es/stilus-es.php
• Readability index calculator. Es una herramienta en línea que calcula el “nivel de lectura” de un texto
– Enlace a la herramienta: http://www.standards-schmandards.com/exhibits/rix/index.php
Principalmente: sentido común!
33
Evaluación manual (resumen)1. Imágenes
a. Texto alternativo
b. Imágenes decorativas
c. Imágenes de texto
d. Imágenes que son enlaces
2. Objetos
3. Subtítulos
4. Uso del color
5. Contraste mínimo
6. Control con teclado
1. Accesibles por teclado
2. Sin trampas para el foco del teclado
3. Orden del foco.
4. Foco visible
7. Sliders
8. Ampliar
9. Encabezados
10.Listas
11.Título de página
12.Múltiples vías
13.Epilepsia fotosensitiva
14.Validación de contraste de sonido
15.Legibilidad
34
Conclusiones
35
Probar, probar, probar…• Navegar con las imágenes deshabilitadas
– comprobando que tienen texto alternativo y que es posible navegar normalmente.
• Navegar con el sonido desconectado– comprobando que el contenido de audio tiene disponible contenido textual.
• Modificar el tamaño de las fuentes utilizando las funciones del navegador – para comprobar que la página es usable en tamaños de fuente más grandes.
• Visualizar en escala de grises (o imprimir en blanco y negro la página) – para comprobar que es posible comprender el contenido.
• Navegar sin CSS, – comprobando que se mantiene todo el contenido y en un orden que permite
comprenderlo.
• Utilizar distintos navegadores, sistemas operativos y pantallas.
• Con conexiones lentas.
• Utilizar otros dispositivos como celulares.
36
Sin monitor• Navegar con el monitor apagado utilizando un lector de pantalla
– NVDA
– Jaws
– Orca
• Simuladores de lectores de pantalla:
Fangs - the screen reader emulator
37
Cualquier parecido es mera coincidencia…
• Estas técnicas no son simulaciones de discapacidad
• No se puede recrear la situación exacta
38
Cumplir las pautas no es lo mismo que ser accesible
Un contenido 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.
39
Hagamos nuestra parte por una Web para todas y todos
40CC http://www.flickr.com/photos/wwworks
