Evaluación 
CC www.diseñoaccesible.es 
Accesibilidad Web
2 
Agenda 
1. Introducción 
2. Evaluación automática 
3. Evaluación manual 
Break CC 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...
5 
Evaluación automática
6 
Estándares: (X) HTML 
• Garantiza portabilidad 
• Facilita mantenibilidad del código 
Fuente: http://validator.w3.org/ ...
7 
Estándares: CSS 
• Garantiza portabilidad 
• Facilita mantenibilidad del código 
Fuente: http://jigsaw.w3.org/css-valid...
8 
Pautas de Accesibilidad 
• Herramientas evalúan ciertos 
aspectos de la accesibilidad 
• Algunos aspectos no son automa...
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 
alt = “Mafalda leyendo” 
alt = ...
13 
Imágenes decorativas 
• Imágenes decorativas: no aportan información 
– Incluirlas mediante la hoja de estilos 
– Si n...
14 
Imágenes de texto 
• Las imágenes que transmiten información textual tienen un texto alternativo que 
proporciona la m...
15 
Imágenes de texto: Ejemplo 
Ejemplo 
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 de...
17 
Imágenes: resumen 
• Verifica todas las imágenes: 
– Texto alternativo adecuado 
– Imágenes decorativas: desde CSS o c...
18 
Objetos 
• Los elementos <object> (Flash) tienen una alternativa textual que 
proporcione la misma información y/o fun...
19 
Subtítulos 
• El contenido multimedia que transmite información en la pista de 
audio tiene subtítulos. 
• Evaluación ...
20 
Uso del color 
• El color no se emplea como único medio para transmitir 
información. 
– Observar el uso del color en ...
21 
Contrastes de colores 
• El contraste entre el color del texto y el color de fondo (en texto e 
imágenes de texto) es ...
22 
Control con el teclado 
• Accesible por teclado 
• Todos los elementos de interacción son accesibles y operables media...
23 
Control con el teclado 
• Orden del foco 
• Los elementos de interacción reciben el foco en el orden correcto. 
• Reco...
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 u...
26 
Encabezados 
• Los títulos (y sólo los títulos) de cada sección de contenido se 
identifican como encabezados (<h1> - ...
27 
Listas 
• Los listados de elementos se marcan con los elementos de lista 
correspondientes (<ol>, <ul>, <dl>). 
• Si e...
28 
Título de la página 
• La página posee un título (<title>) que identifica su contenido 
Los títulos deben: 
• Identifi...
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 s...
30 
Epilepsia fotosensitiva 
• Photosensitive Epilepsy Analysis Tool 
– Enlace a la herramienta: http://trace.wisc.edu/pea...
31 
Validación de contraste de sonido 
• Es necesario asegurar que ruidos o música de fondo 
sean lo suficientemente bajos...
32 
Legibilidad 
• Stilus. Es una herramienta en línea gratuita que ayuda a detectar errores 
ortográficos en una página w...
33 
Evaluación manual (resumen) 
1. Imágenes 
a. Texto alternativo 
b. Imágenes decorativas 
c. Imágenes de texto 
d. Imág...
34 
Conclusiones
35 
Probar, probar, probar… 
• Navegar con las imágenes deshabilitadas 
– comprobando que tienen texto alternativo y que e...
36 
Sin monitor 
• Navegar con el monitor apagado utilizando un lector de pantalla 
– NVDA 
– Jaws 
– Orca 
• Simuladores ...
37 
Cualquier parecido es mera 
coincidencia… 
• Estas técnicas no son simulaciones de 
discapacidad 
• No se puede recrea...
38 
Cumplir las pautas no es lo mismo 
que ser accesible 
Un contenido web... 
• Puede cumplir con todas las pautas 
• Pue...
39 
Hagamos nuestra parte por 
una Web para todas y todos
CC http://www.flickr.com/photos/wwworks 40
Próxima SlideShare
Cargando en…5
×

Evaluación de accesibilidad web

548 visualizaciones

Publicado el

Taller de 3 horas de evaluacion de accesibilidad web

Publicado en: Educación
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
548
En SlideShare
0
De insertados
0
Número de insertados
4
Acciones
Compartido
0
Descargas
14
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.
  • La validación de estándares (X)HTML es recomendada en la Pauta 4.1 de accesibilidad de la WCAG2.0.

    Es más fácil realizar correcciones y modificaciones a un código bien formado y prolijo, por lo que se recomienda comenzar con la validación de HTML. Además, validar el código de las páginas garantiza la portabilidad a distintos dispositivos y mejora la indexación en buscadores.

    W3C dispone del servicio en línea gratuito de validación
  • La validación de estándares (X)HTML es recomendada en la Pauta 4.1 de accesibilidad de la WCAG2.0.

    Es más fácil realizar correcciones y modificaciones a un código bien formado y prolijo, por lo que se recomienda comenzar con la validación de HTML. Además, validar el código de las páginas garantiza la portabilidad a distintos dispositivos y mejora la indexación en buscadores.

    W3C dispone del servicio en línea gratuito de validación
  • Existen herramientas que ayudan a evaluar ciertos aspectos de la accesibilidad.
    Los validadores automáticos de accesibilidad revisan puntos conflictivos con la accesibilidad según pautas y estándares, y presentan un informe con los resultados.
    No es posible realizar una evaluación completa utilizando solamente herramientas automáticas, ya que algunos aspectos de la accesibilidad requieren una evaluación manual humana.
    Por otro lado, el evaluador se puede encontrar con falsos positivos y falsos negativos. La herramienta puede indicar que una página no contiene barreras y en una evaluación manual se detectan, o al contrario, la herramienta detecta algun problema que al revisar un experto encuentra que no existe.
    Se sugiere realizar la evaluación automática con al menos dos herramientas para cubrir los problemas detectables automáticamente.
  • Existen herramientas que ayudan a evaluar ciertos aspectos de la accesibilidad.
    Los validadores automáticos de accesibilidad revisan puntos conflictivos con la accesibilidad según pautas y estándares, y presentan un informe con los resultados. Brindan además información relacionada que ayudará a los técnicos a comprender el problema y buscar soluciones.

    No es posible realizar una evaluación completa utilizando solamente herramientas automáticas.
    Por otro lado, el evaluador se puede encontrar con falsos positivos y falsos negativos. La herramienta puede indicar que una página no contiene barreras y en una evaluación manual se detectan, o al contrario, la herramienta detecta algun problema que al revisar un experto encuentra que no existe.
    Se sugiere realizar la evaluación automática con al menos dos herramientas para cubrir los problemas detectables automáticamente.

    Estas son algunas de las herramientas que se pueden utilizar para este tipo de evaluaciones de Accesibilidad:

    TAW, Test de Accesibilidad Web y examinator son herramientas en línea gratuitas de evaluacion de pautas WCAG 2.0.

    La ventaja de Total validator es que puedes descargarla en tu pc para evaluar prototipos que no tienen una dirección pública para ser accedidas desde Internet.
  • Evaluación de accesibilidad web

    1. 1. Evaluación CC www.diseñoaccesible.es Accesibilidad Web
    2. 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. 3 Introducción
    4. 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. 5 Evaluación automática
    6. 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. 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. 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. 9 Pautas de Accesibilidad http://www.tawdis.net/ http://examinator.ws/ http://www.totalvalidator.com/
    10. 10. 10 Evaluación manual
    11. 11. 11 Herramientas de apoyo • Pendule (Chrome) • WebDeveloper (Chrome, Firefox) Ejercicio Instala una herramienta
    12. 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. 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. 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. 15 Imágenes de texto: Ejemplo Ejemplo Fuente: https://www.bcu.gub.uy/
    16. 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. 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. 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. 19 Subtítulos • El contenido multimedia que transmite información en la pista de audio tiene subtítulos. • Evaluación manual
    20. 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. 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. 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. 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. 24 Sliders Permitir parar, pausar y reiniciar
    25. 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. 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. 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. 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. 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. 30 Epilepsia fotosensitiva • Photosensitive Epilepsy Analysis Tool – Enlace a la herramienta: http://trace.wisc.edu/peat/
    31. 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. 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. 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. 34 Conclusiones
    35. 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. 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. 37 Cualquier parecido es mera coincidencia… • Estas técnicas no son simulaciones de discapacidad • No se puede recrear la situación exacta
    38. 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. 39 Hagamos nuestra parte por una Web para todas y todos
    40. 40. CC http://www.flickr.com/photos/wwworks 40

    ×