PDF de programación - HERRAMIENTAS - Accesibilidad en el Diseño de Aplicaciones Web

Accesibilidad en el Diseño de

Aplicaciones Web

Sergio Luján Mora

Accesibilidad en el Diseño de Aplicaciones Web

HERRAMIENTAS

1

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

2

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:

3

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

4

Accesibilidad en el Diseño de Aplicaciones Web

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

Revisores

• examinator:

– Usa WCAG 2.0
– Califica cada prueba en una escala de 1 al

10

– Proporciona un resultado numérico general

6

Accesibilidad en el Diseño de Aplicaciones Web

Accesibilidad en el Diseño de Aplicaciones Web

7

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

8

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/

9

Accesibilidad en el Diseño de Aplicaciones Web

Accesibilidad en el Diseño de Aplicaciones Web

10

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:

11

Accesibilidad en el Diseño de Aplicaciones Web

Accesibilidad en el Diseño de Aplicaciones Web

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

Complementos de los

navegadores

• Webdeveloper:

Accesibilidad en el Diseño de Aplicaciones Web

AYUDAS TÉCNICAS

14

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

15

Accesibilidad en el Diseño de Aplicaciones 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

SIMULADORES

Accesibilidad en el Diseño de Aplicaciones Web

Simuladores

• Simulador de lector de pantallas:

– http://www.usamos.es/accesibilidadWeb/h

erramientas/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

18

Accesibilidad en el Diseño de Aplicaciones Web

Accesibilidad en el Diseño de Aplicaciones Web

19

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

20

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

21

Accesibilidad en el Diseño de Aplicaciones Web

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

Simuladores

• dotMobi:

– http://mtld.mobi/emulator.php

• Simulador de teléfono móvil

23

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

24

Accesibilidad en el Diseño de Aplicaciones Web

25