accesibilidad en el diseño de aplicaciones webaccesibilidad en el diseño de aplicaciones web...

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