evaluación de accesibilidad web
DESCRIPTION
Taller de 3 horas de evaluacion de accesibilidad webTRANSCRIPT
![Page 1: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/1.jpg)
Accesibilidad Web
Evaluación
CC www.diseñoaccesible.es
![Page 2: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/2.jpg)
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/
![Page 3: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/3.jpg)
3
Introducción
![Page 4: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/4.jpg)
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
![Page 5: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/5.jpg)
5
Evaluación automática
![Page 6: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/6.jpg)
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
![Page 7: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/7.jpg)
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
![Page 8: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/8.jpg)
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
![Page 9: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/9.jpg)
9
Pautas de Accesibilidad
http://www.tawdis.net/ http://examinator.ws/
http://www.totalvalidator.com/
![Page 10: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/10.jpg)
10
Evaluación manual
![Page 11: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/11.jpg)
11
Herramientas de apoyo
• Pendule (Chrome)
• WebDeveloper (Chrome, Firefox)
Ejercicio
Instala una
herramienta
![Page 12: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/12.jpg)
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/
![Page 13: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/13.jpg)
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/
![Page 14: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/14.jpg)
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/
![Page 15: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/15.jpg)
15
Imágenes de texto: EjemploEjemplo
Fuente: https://www.bcu.gub.uy/
![Page 16: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/16.jpg)
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
![Page 17: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/17.jpg)
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
![Page 18: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/18.jpg)
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>
![Page 19: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/19.jpg)
19
Subtítulos• El contenido multimedia que transmite información en la pista de
audio tiene subtítulos.
• Evaluación manual
![Page 20: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/20.jpg)
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/
![Page 21: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/21.jpg)
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
![Page 22: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/22.jpg)
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
![Page 23: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/23.jpg)
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
![Page 24: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/24.jpg)
24
Sliders
Permitir parar, pausar y reiniciar
![Page 25: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/25.jpg)
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
![Page 26: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/26.jpg)
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
![Page 27: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/27.jpg)
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
![Page 28: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/28.jpg)
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
![Page 29: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/29.jpg)
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
![Page 30: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/30.jpg)
30
Epilepsia fotosensitiva• Photosensitive Epilepsy Analysis Tool
– Enlace a la herramienta: http://trace.wisc.edu/peat/
![Page 31: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/31.jpg)
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
![Page 32: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/32.jpg)
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!
![Page 33: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/33.jpg)
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
![Page 34: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/34.jpg)
34
Conclusiones
![Page 35: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/35.jpg)
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.
![Page 36: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/36.jpg)
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
![Page 37: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/37.jpg)
37
Cualquier parecido es mera coincidencia…
• Estas técnicas no son simulaciones de discapacidad
• No se puede recrear la situación exacta
![Page 38: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/38.jpg)
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.
![Page 39: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/39.jpg)
39
Hagamos nuestra parte por una Web para todas y todos
![Page 40: Evaluación de accesibilidad web](https://reader033.vdocuments.net/reader033/viewer/2022042715/559d552f1a28abe3258b4680/html5/thumbnails/40.jpg)
40CC http://www.flickr.com/photos/wwworks