PDF de programación - Herramientas - Accesibilidad en la Web: de WCAG 1.0 a WCAG 2.0

Accesibilidad en la Web: de

WCAG 1.0 a WCAG 2.0

Universidad de Colima

México

Departamento de Lenguajes y
Sistemas Informáticos

Herramientas
Herramientas

Departamento de Lenguajes y Sistemas Informáticos

Sergio Luján Mora

Universidad de Alicante

DLSI – Universidad de Alicante

1

Contenido

• Diseño
• Conversores
• Navegadores
• Extensiones de los navegadores
• Revisores
• Otras
• Tecnología asistiva

Diseño

• Macromedia Dreamweaver MX
• Diversas opciones:

Di
– Preferencia de accesibilidad: solicita información

de accesibilidad en algunos elementos HTML

i

– Validación: permite verificar la accesibilidad de un

– Documentación: incluye documentación sobre

sitio web

accesibilidad
accesibilidad

accesibles

– Plantillas: posee plantillas para crear sitios web

– Entorno accesible: proporciona facilidades para

ser usado por gente con discapacidades

DLSI – Universidad de Alicante

2

DLSI – Universidad de Alicante

3

DLSI – Universidad de Alicante

4

DLSI – Universidad de Alicante

5

Diseño

• Extensión de Macromedia

Dreamweaver: Accessibility Suite for
W3C/WCAG
– Extensión gratuita que ayuda a cumplir las

pautas de prioridad 1 y 2.

Ejercicio:
- Crear un sitio web sencillo
- Verificar su accesibilidad

DLSI – Universidad de Alicante

6

Conversores

• Permiten convertir distintos recursos a

páginas web accesibles

Conversores

• Illinois Accessible Web Publishing

Wizard

• http://cita.rehab.uiuc.edu/software/office/
• Convierte documentos de Microsoft Office

a páginas web accesibles

DLSI – Universidad de Alicante

7

Ejercicio:
- Transformar el documento Word disponible en
la sección de ejemplos a página HTML
- Comparar con la versión del conversor
ibilid d
- Verificar su accesibilidad
V ifi

DLSI – Universidad de Alicante

8

Conversores

• SWAP - The Semantic Web

Accessibility Platform

• http://www.ubaccess.com/swap.html
• Convierte un sitio web a accesible

DLSI – Universidad de Alicante

9

Conversores

• ART simulator
• Permite experimentar de primera mano
las barreras de accesibilidad que sufren
algunas personas

DLSI – Universidad de Alicante

10

DLSI – Universidad de Alicante

11

Ejercicio:
- Probar a navegar mediante el simulador por
diversas web

Conversores

• ART Guide
• Verifica la accesibilidad de acuerdo a

distintas normas

DLSI – Universidad de Alicante

12

Navegadores

• Los navegadores actuales proporcionan

poco soporte de cara a la accesibilidad

• La mayoría:

– Navegación por teclado
– Zoom de texto
Pantalla completa (F11)
– Pantalla completa (F11)

DLSI – Universidad de Alicante

13

Navegadores

• Internet Explorer
• Pocas opciones:

– Accesos rápidos de teclado
– Un par de opciones de configuración

Navegadores

DLSI – Universidad de Alicante

14

Navegadores

• Cómo expandir siempre el texto ALT para las imágenes

– Para asegurarse que el texto ALT no se corta si la cantidad es

g

q

más amplia que el área de la imagen, las personas que lo
utilizan deberían seleccionar la opción Expandir siempre el
texto ALT para las imágenes. Actívela, y el espacio de la
imagen se ampliará para que se adapte al texto.

• Cómo mover el cursor del sistema con cambios de foco y

selección
Cuando activa esta opción de accesibilidad el cursor o
– Cuando activa esta opción de accesibilidad el cursor o
dispositivo señalador cuando hay cambios de foco y selección.
Gracias a esta opción se mejora la legibilidad de la pantalla y se
dispone de amplificador que usa el cursor para determinar que
área de la pantalla se puede leer o ampliar.

DLSI – Universidad de Alicante

15

Navegadores

• Cómo incrementar la accesibilidad gracias a

i

las opciones avanzadas:
l
– Internet Explorer 6 ofrece una serie de opciones

d

avanzadas que le pueden ayudar a tener una
experiencia más accesible y conveniente para sus
necesidades y gustos personales

– Con tan solo activar o desactivar algunas de estas
configuraciones avanzadas podrá sacar un mayor
partido a la tecnología de asistencia y las
opciones de accesibilidad que ha seleccionado

Activar:
•

Expandir siempre el
texto ALT para las
imágenes
Cómo mover el cursor
del sistema con cambios
de foco y selección

y

Para usuarios que:
Dependen de los textos ALT
(textos alternativos que
describen imágenes)

Utilizan lectores de pantalla o

ampliadores de pantalla

•

Utilizan programas de

reconocimiento de voz

Padecen de visión baja

Sufren trastornos cognitivos

Son sensitivos a las lucen

demasiado fuertes

Desactivar:
• Mostrar las imágenes

• Utilizar el desplazamiento

suave

• Habilitar las transiciones de

páginas
Reproducir sonidos

•
• Utilizar el desplazamiento

• Habilitar las transiciones de

suave

páginas

• Mostrar las imágenes
•
•
•
•

Reproducir las animaciones
Reproducir videos
Reproducir videos
Imprimir las imágenes y los
colores de fondo
Reproducir sonidos

•

• Mostrar las imágenes
•
•

Reproducir las animaciones
Reproducir videos

DLSI – Universidad de Alicante

16

Navegadores

• Internet Explorer 7
• Incorpora nuevas opciones:

– Todas las características son accesibles a

través del teclado

– Zoom completo de página: Ctrl+ y Ctrl-
múltiples niveles de zoom, Ctrl0 (100%)
múltiples niveles de zoom, Ctrl0 (100%)

– Algunas opciones de configuración nuevas

Navegadores

• Si presiona TAB o MAYÚS+TAB, puede

desplazarse por las siguientes partes
de la pantalla:
– Vínculos que son texto o imágenes
– Zonas activas en mapas de imágenes
– La barra de direcciones
La barra de direcciones
– La barra de pestañas
– Marcos

DLSI – Universidad de Alicante

17

DLSI – Universidad de Alicante

18

Navegadores

• Mozilla
• http://www.mozilla.org
• Zoom de texto: Ctrl+ y Ctrl- múltiples

niveles de zoom, Ctrl0 (100%)

• Colabora con:

– JAWS
– Dragon Naturally Speaking
– …

DLSI – Universidad de Alicante

19

DLSI – Universidad de Alicante

20

Navegadores

• Firefox
• http://www mozilla com/firefox/
• http://www.mozilla.com/firefox/
• Basado en Mozilla:

– Zoom de texto: Ctrl+ y Ctrl- múltiples niveles de zoom
– Colabora con: JAWS, Dragon Naturally Speaking, …

• Permite desactivar las hojas de estilo en cascada

(CSS)
• Primer navegador que soporta “DHTML accessibility”
Primer navegador que soporta DHTML accessibility
• Primer navegador que cumple requisitos del gobierno

federal de los EE.UU. sobre software accesible:
– http://www.mozilla.com/firefox/vpat.html

Navegadores

DLSI – Universidad de Alicante

21

DLSI – Universidad de Alicante

22

Navegadores

• Opera
• http://www.opera.com
//
• Incorpora una serie de opciones:

htt

– Zoom completo de página
– Diferentes estilos: navegador de texto, diseño de

accesibilidad, etc.

– Lista de enlaces
– Sintetizador/reconocedor de voz
– Acceso rápido por teclado
– Opciones avanzadas de navegación por teclado

DLSI – Universidad de Alicante

23

DLSI – Universidad de Alicante

24

DLSI – Universidad de Alicante

25

Navegadores

• Opciones avanzadas de navegación la

página por teclado:
página por teclado:
– Siguiente/anterior enlace: A y Q
– Siguiente/anterior Título/Cabecera (H1, H2, H3...):

S y W

– Siguiente/anterior marco: 3 y Mays+3
– Siguiente/anterior elemento: gráfico, párrafo,

celda de tabla etc : D y E
celda de tabla, etc...: D y E

• Activación/desactivación de gráficos: Mays+I
• Activación/desactivación de CSS: Mays+G

DLSI – Universidad de Alicante

26

Navegadores

• Lynx
• http://lynx.browser.org/
• Famoso navegador en modo texto
disponible para varias plataformas

DLSI – Universidad de Alicante

27

Navegadores

• Lynx Viewer
• http://www.delorie.com/web/lynxview.ht

ml

• Simulador del navegador Lynx a través

• Necesita que exista el fichero

de página web
N
delorie.htm en el sitio web a visitar

it

i t

l fi h

DLSI – Universidad de Alicante

28

Navegadores

• Otros:

– BrailleSurf:

• http://www.snv.jussieu.fr/inova/bs4/uk/

– MozBraille:

• http://mozbraille.mozdev.org/

DLSI – Universidad de Alicante

29

Extensiones de los navegadores
• Internet Explorer:

– Accessibility Extension for Internet

Explorer
– CheckIE
– Internet Explorer Developer Toolbar
– Web Accessibility Toolbar
Web Accessibility Toolbar

Extensiones de los navegadores
• Accessibility Extensions for Internet

Explorer

• http://cita.rehab.uiuc.edu/software/ieacc

essible/overview.html

• Enfocada a usuarios discapacitados,

añade funcionalidades nuevas al
añade funcionalidades nuevas al
navegador para facilitar la navegación

DLSI – Universidad de Alicante

30

Extensiones de los navegadores
• Características:

– Lista de enlaces (ALT-F12)
)
– Lista de encabezados (ALT-F11, destaca los encabezados y

(

desplaza el foco al enlace más cercano)

– Lista de los elementos <map> (ALT-F10, lista los enlaces de

tipo <area> o <a> contenidos en un elemento <map>)

– Lista de atajos (ALT-F9)
– Propiedades (ALT-F8)
– Hoja de estilo del usuario, opciones avanzadas (escoger

entre la hoja de estilo del autor o del usuario) (ALT-F7)

– Lista de eventos, lista de elementos con eventos y el tipo del

manejador del evento (ALT-F6)

– Lista de marcos, basada en title (ALT-F5)
– Lista de los controles de los formularios agrupados por la

etiqueta <label> (ALT-F3)

DLSI – Universidad de Alicante

31

Extensiones de los navegadores
• CheckIE
• http://checkie.orange-soft.com/index.htm
• De OrangeSoft, uno de los referentes en

// h ki

/i d

htt

accesibilidad en España

ft

ht

• Desarrollo de la versión para Internet

Explorer de la extensión Checky (Mozilla)
• Reune diversos servicios de evaluación y
• Reune diversos servicios de evaluación y
reparación disponibles en línea, a los que
permite acceder a través del menú contextual
del navegador

Extensiones de los navegadores
• La versión actual de CheckIE incluye acceso a los siguientes

servicios:
– Revisores automáticos de accesibilidad:

• Access Valet
• Bobby
• Cynthia Says
• TAW
• WAVE

– Validadores de especificaciones:

p

• Page