Taller de 3 horas de evaluacion de accesibilidad web

1. Evaluación
CC www.diseñoaccesible.es
Accesibilidad Web

2. 2
Agenda
1. Introducción
2. Evaluación automática
3. Evaluación manual
Break CC https://www.flickr.com/photos/otacke/
4. Evaluación manual
5. Conclusiones

3. 3
Introducción

4. 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. 5
Evaluación automática

6. 6
Estándares: (X) HTML
• Garantiza portabilidad
• Facilita mantenibilidad del código
Fuente: http://validator.w3.org/
Objetiva - Rápida - Económica
Ejercicio
Recomendado
en Pauta 4 de
WCAG 2.0

7. 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. 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. 9
Pautas de Accesibilidad
http://www.tawdis.net/ http://examinator.ws/
http://www.totalvalidator.com/

10. 10
Evaluación manual

11. 11
Herramientas de apoyo
• Pendule (Chrome)
• WebDeveloper (Chrome, Firefox)
Ejercicio
Instala una
herramienta

12. 12
Texto alternativo de imágenes
• Verificar que los textos alternativos sean adecuados
alt = “Mafalda leyendo”
alt = “Imagen 344”
alt = “Ingrese el texto alternativo aquí”
alt = “Mafalda”
alt = “Niña leyendo”
• Pendule / Web Developer (Images → Display Alt Attributes)
Ejemplo
CC https://www.flickr.com/photos/vladimix/

13. 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
CC https://www.flickr.com/photos/vladimix/
• Pendule / Web Developer (Images → Display Alt Attributes)

14. 14
Imágenes de texto
• Las imágenes que transmiten información textual tienen un texto alternativo que
proporciona la misma información textual.
alt = “igualdad” alt = “Stay alive and avoid zombies”
• Pendule / Web Developer (Images → Display Alt Attributes)
Ejemplo
CC https://www.flickr.com/photos/daquellamanera/ CC http://en.wikipedia.org/

15. 15
Imágenes de texto: Ejemplo
Ejemplo
Fuente: https://www.bcu.gub.uy/

16. 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";
Ejemplo
alt="Página principal del sitio",
alt="Contacto“
alt="Versión imprimible"
alt="Ayuda".
• Pendule / Web Developer (Images → Display Alt Attributes)

17. 17
Imágenes: resumen
• Verifica todas las imágenes:
– Texto alternativo adecuado
– Imágenes decorativas: desde CSS o con alt
vací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. 18
Objetos
• Los elementos <object> (Flash) tienen una alternativa textual que
proporcione la misma información y/o funcionalidad (contenido del
elemento <object>).
<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>
• 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.

19. 19
Subtítulos
• El contenido multimedia que transmite información en la pista de
audio tiene subtítulos.
• Evaluación manual

20. 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. 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).
http://www.paciellogoup.com/resources/contrast-analyser.html
• Colour Contrast Analyzer, WCAG Contrast Checker, Contrast Analyser Firebug
Ejercicio
Ejemplo

22. 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. 23
Control con el teclado
• 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.
Ejercicio
• Recorrer la página usando el tabulador

24. 24
Sliders
Permitir parar, pausar y reiniciar

25. 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. 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
Ejemplo
• Web Developer (Outline → Outline Headings)
• HeadingsMap
Ejercicio

27. 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. 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. 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. 30
Epilepsia fotosensitiva
• Photosensitive Epilepsy Analysis Tool
– Enlace a la herramienta: http://trace.wisc.edu/peat/

31. 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. 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. 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. 34
Conclusiones

35. 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. 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. 37
Cualquier parecido es mera
coincidencia…
• Estas técnicas no son simulaciones de
discapacidad
• No se puede recrear la situación exacta

38. 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. 39
Hagamos nuestra parte por
una Web para todas y todos

40. CC http://www.flickr.com/photos/wwworks 40