Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web...
Transcript of Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web...
![Page 1: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/1.jpg)
1
Accesibilidad en el Diseño de Aplicaciones Web
Sergio Luján Mora
Accesibilidad en el Diseño de Aplicaciones Web
HERRAMIENTAS
![Page 2: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/2.jpg)
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
![Page 3: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/3.jpg)
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:
![Page 4: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/4.jpg)
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
![Page 5: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/5.jpg)
5
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
![Page 6: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/6.jpg)
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
![Page 7: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/7.jpg)
7
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
![Page 8: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/8.jpg)
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
![Page 9: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/9.jpg)
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/
![Page 10: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/10.jpg)
10
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
![Page 11: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/11.jpg)
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:
![Page 12: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/12.jpg)
12
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
![Page 13: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/13.jpg)
13
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
![Page 14: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/14.jpg)
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
![Page 15: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/15.jpg)
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
![Page 16: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/16.jpg)
16
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
![Page 17: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/17.jpg)
17
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
![Page 18: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/18.jpg)
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
![Page 19: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/19.jpg)
19
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
![Page 20: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/20.jpg)
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
![Page 21: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/21.jpg)
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
![Page 22: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/22.jpg)
22
Accesibilidad en el Diseño de Aplicaciones Web
Accesibilidad en el Diseño de Aplicaciones Web
![Page 23: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/23.jpg)
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
![Page 24: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/24.jpg)
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
![Page 25: Accesibilidad en el Diseño de Aplicaciones WebAccesibilidad en el Diseño de Aplicaciones Web Revisores •TAW: Test de Accesibilidad Web con W3C •Analiza WCAG 1.0 y 2.0 •Analiza](https://reader033.fdocuments.co/reader033/viewer/2022060307/5f09e6287e708231d4290903/html5/thumbnails/25.jpg)
25
Accesibilidad en el Diseño de Aplicaciones Web