1
Accesibilidad en el Diseño de Aplicaciones Web
Sergio Luján Mora
Accesibilidad en el Diseño de Aplicaciones Web
HERRAMIENTAS
2
Accesibilidad en el Diseño de Aplicaciones Web
Contenido
• Revisores
• Complementos de los navegadores
• Ayudas técnicas
• Simuladores
Accesibilidad en el Diseño de Aplicaciones Web
REVISORES
3
Accesibilidad en el Diseño de Aplicaciones Web
Revisores
• TAW: Test de Accesibilidad Web con W3C
• Analiza WCAG 1.0 y 2.0
• Analiza los niveles de prioridad 1, 2 y 3 y sus niveles de adecuación
• Cuatro posibilidades:– Versión instalable
– Versión online
– Complemento para Firefox
– Integrado en el editor de contenidos de un CMS
Accesibilidad en el Diseño de Aplicaciones Web
Revisores
• Analiza el sitio web, no solo la página de inicio y muestra errores manuales y automáticos de nivel 1, 2 y 3
– Los errores automáticos incumplen las pautas y deben ser corregidos
– Los errores manuales deben ser revisados, no se puede asegurar que sean errores
• Logotipos de TAW dependiendo de la categoría y tipo de los errores:
4
Accesibilidad en el Diseño de Aplicaciones Web
Revisores
• WAI-A: Sin problemas automáticos ni manuales de nivel 1
• WAI-AA: sin problemas automáticos ni manuales de nivel 1 y 2
• WAI-AAA: sin problemas manuales ni automáticos de ningún tipo
Accesibilidad en el Diseño de Aplicaciones Web
5
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
6
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
Revisores
• examinator:
– Usa WCAG 2.0
– Califica cada prueba en una escala de 1 al 10
– Proporciona un resultado numérico general
7
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
8
Accesibilidad en el Diseño de Aplicaciones Web
COMPLEMENTOS DE LOS NAVEGADORES
Accesibilidad en el Diseño de Aplicaciones Web
Complementos de los navegadores
• Fangs:
– http://www.standards-schmandards.com/projects/fangs/
• Emulador de lector de pantalla
9
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
Complementos de los navegadores
• HeadingsMap:
– https://addons.mozilla.org/es-es/firefox/addon/headingsmap/
10
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
11
Accesibilidad en el Diseño de Aplicaciones Web
Complementos de los navegadores
• Longdesc:
– https://addons.mozilla.org/es-ES/firefox/addon/273
• Añade al menú contextual la opción “View image longdesc”
Accesibilidad en el Diseño de Aplicaciones Web
Complementos de los navegadores
• Textise:
12
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
13
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
14
Accesibilidad en el Diseño de Aplicaciones Web
Complementos de los navegadores
• Webdeveloper:
Accesibilidad en el Diseño de Aplicaciones Web
AYUDAS TÉCNICAS
15
Accesibilidad en el Diseño de Aplicaciones Web
Ayudas técnicas
• WebbIE
– http://www.webbie.org.uk/
• Navegador web destinado a usuarios ciegos o con problemas de visión que utilizan un lector de pantallas
• Ofrece navegación en modo texto/visual y magnificador de la página web
Accesibilidad en el Diseño de Aplicaciones Web
16
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
17
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
18
Accesibilidad en el Diseño de Aplicaciones Web
SIMULADORES
Accesibilidad en el Diseño de Aplicaciones Web
Simuladores
• Simulador de lector de pantallas:
– http://www.usamos.es/accesibilidadWeb/herramientas/lector.html
• Genera un versión lineal de una página web con la información adicional (enlace, tabla, lista, …) que proporciona un lector de pantallas
19
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
20
Accesibilidad en el Diseño de Aplicaciones Web
Simuladores
• WebAnywhere:
– http://webanywhere.cs.washington.edu/
• Lector de pantallas basado en página web que no necesita instalación
• Emplea Flash y otros reproductores disponibles (Quicktime y Windows Media Player)
Accesibilidad en el Diseño de Aplicaciones Web
21
Accesibilidad en el Diseño de Aplicaciones Web
Simuladores
• Vischeck:
– http://www.vischeck.com/vischeck/
• Simulador de ceguera a algunos colores (daltonismo)
Accesibilidad en el Diseño de Aplicaciones Web
22
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
23
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
Simuladores
• dotMobi:
– http://mtld.mobi/emulator.php
• Simulador de teléfono móvil
24
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
Simuladores
• Opera:
– Simulador de dispositivo con pantalla pequeña
25
Accesibilidad en el Diseño de Aplicaciones Web