25
1 Accesibilidad en el Diseño de Aplicaciones Web Sergio Luján Mora Accesibilidad en el Diseño de Aplicaciones Web HERRAMIENTAS

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

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

25

Accesibilidad en el Diseño de Aplicaciones Web