Professional Documents
Culture Documents
DISEÑO WEB
PARA TOD@S II
CREANDO UNA WEB ACCESIBLE
© De esta edición
Icaria editorial, s.a.
Arc de Sant Cristòfol, 11-23 - 08003 Barcelona
www.icariaeditorial.com
Prólogo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
13
• http://usuarios.discapnet.es/disweb2000/WCAG2003/index.htm
• http://www.technosite.es/document_accesibilidad.asp
14
Los materiales que recoge este libro sirven de referencia para la segunda
parte del módulo sobre «Diseño para todos», dentro del Programa Modu-
lar en Tecnologías Digitales y Sociedad del Conocimiento de la Universi-
dad Nacional de Educación a Distancia (UNED). Sin el conocimiento y la
comprensión de los materiales correspondientes a la primera parte de este
módulo,1 puede que el contenido de este documento no sea entendido.
Con el nombre genérico de Creando páginas web accesibles, presen-
tamos en este documento una serie de capítulos que tratan de orientar al
desarrollador sobre qué tareas debe realizar para conseguir este objetivo.
Comenzaremos por ver cómo hacer que nuestra hoja de estilos haga
que los contenidos de nuestras páginas web sean accesibles. El segundo
capítulo recoge uno de los apartados claves: el referido a la creación de
imágenes, de todo tipo, que sean accesibles. Los dos siguientes capítulos
se dedican a la correcta y accesible aplicación de marcos (frames) y tablas
(tanto de maquetación como de datos).
La creación de formularios accesibles, el procedimiento para hacer un
javascript siguiendo los criterios de accesibilidad y la forma de realizar un
flash que no suponga una barrera insalvable para aquellos que manejan
aplicaciones de usuario especiales, son los contenidos que tratamos en los
siguientes tres capítulos.
El capítulo «Verificando la accesibilidad en páginas web» lo dedica-
mos a describir herramientas y procedimientos para la evaluación y valida-
ción de la accesibilidad de las páginas web. Su correcto uso nos propor-
ciona indicadores de la accesibilidad de un sitio web, lo que nos permitirá,
1. Egea García, C., (2007), Diseño Web para Todos I, Icaria, Barcelona.
15
16
Traducción y adaptación
sobre textos de WebAIM por
CARLOS EGEA GARCÍA Y ALICIA SARABIA SÁNCHEZ
17
Introducción
19
20
Del mismo modo, si se declara más de una vez un estilo para el mis-
mo elemento, se aplicará el último estilo que se declare. Echemos un vis-
tazo a los mismos atributos de estilo de abajo:
h1
{
color:red;
background-color:yellow;
}
h1
{
color:blue;
background-color:red;
}
h1
{
color:white;
background-color:black;
}
21
El hecho de que el usuario final sea quien tiene el máximo control sobre
los estilos de una página web beneficia la accesibilidad. Ello significa que
una persona con una visión extremadamente baja puede convertir el color
de fondo de todas las páginas web en negro, y la fuente en un texto blanco
en negrita aumentado al 300% (o cualquier otro estilo que beneficie las
necesidades de ese individuo). Algunos diseñadores son reticentes a en-
tregar el control sobre el aspecto y sensación de sus creaciones. La ver-
dad es que ellos nunca han tenido ese control. La web es un formato elec-
trónico. La gente puede verla con cualquier navegador que elija y puede
manipularla tanto como quiera.
Por ejemplo, estamos acostumbrados a ver el sitio web de Google así:
22
Cuando uno cae en ello, se da cuenta que la idea de que los desarro-
lladores de web tienen control sobre cómo se muestran sus contenidos
es una mera ilusión.
23
24
Una de las cosas buenas de las hojas de estilo es que no se tiene que
alterar el formateo visual de una página web cuando se altera el orden de
lectura alineada. Esto puede ser útil cuando se quiera asegurar que los
usuarios de lectores de pantalla acceden al contenido de la página en un
cierto orden.
Mediante la etiqueta <div> que rodea el contenido principal podemos
colocarlo al principio del documento, poniéndolo al inicio del orden de ali-
neación. Este ejemplo es un poco simple, pero esperamos que dé una
pista de algunas de las posibilidades que tiene usar hojas de estilo.
Sin embargo, no se debe suponer que siempre es mejor colocar el conte-
nido principal al inicio. La mayoría de los usuarios de lectores de pantalla es-
tán acostumbrados a tener la navegación al principio de la página. Es siempre
mejor proporcionar los medios para saltarse los elementos de navegación.
El vínculo que permite a los usuarios saltarse la barra de navegación
suele estar oculto a la vista y sólo se puede acceder a él con un lector de
pantalla. Ello nos lleva al asunto del uso de CSS oculto con fines de acce-
sibilidad.
25
#skipnav a
{
color:#FFFFFF;
}
26
#skipnav a
{
display:none;
}
#skipnav a:active,
#skipnav a:focus
{
background-color:#ffffcc;
color:#000000;
display:inline;
}
27
Dificultades de CSS
Revolver el contenido
Algunas de las fortalezas de las hojas de estilo son también sus debilida-
des. Por ejemplo, la posibilidad de cambiar el orden de lectura alineada de
su contenido sin cambiar la maquetación visual puede conducir a algunas
soluciones de accesibilidad maravillosas, pero también puede crear un te-
rrible desorden. Si, sin darnos cuenta, creamos un orden de lectura alinea-
da contrario al orden lógico de lectura de la página, habremos creado una
barrera de accesibilidad más que una solución de accesibilidad.
Los problemas con el orden de lectura alineada surgen principalmente
cuando se usan posicionamientos absolutos. En CSS esto se llama
«position: absolute». Con el posicionamiento absoluto, tendremos un con-
trol total y absoluto sobre la maquetación visual, así que podemos encon-
trarnos a nosotros mismos recolocando elementos posicionados de forma
absoluta hasta no tener ni idea de cuál es el orden de lectura alineada. Es
fácil encontrar salida a esto: simplemente hay que ir al código y mirar el
orden de lectura literal del contenido. Si ese orden tiene sentido, no se
necesita cambiar nada. Si no lo tiene, tendremos que mover algunas eti-
quetas hasta que el orden tenga sentido.
28
Pautas aplicables
Prioridad 1:
• 6.1. Organice el documento de forma que pueda ser leído sin hoja
de estilo. Por ejemplo, cuando un documento HTML es interpretado
sin asociarlo a una hoja de estilo, tiene que ser posible leerlo.
Prioridad 2:
• 3.3. Utilice hojas de estilo para controlar la maquetación y la pre-
sentación.
• 3.4. Utilice unidades relativas en lugar de absolutas al especificar
los valores en los atributos de los marcadores de lenguaje y en los
valores de las propiedades de las hojas de estilo.
Prioridad 3:
• 14.3. Cree un estilo de presentación que sea coherente para todas
las páginas.
29
Introducción
Algunas personas piensan que los gráficos son malos para la accesibili-
dad. La verdad es que los gráficos pueden ser un gran beneficio para la
accesibilidad de una página web, porque proporcionan ilustraciones, iconos,
animaciones y otras claves visuales que facilitan la comprensión a quienes
ven la página. También, a menudo, olvidamos que cuando diseñamos para
personas con discapacidades, no estamos diseñando sólo para ciegos.
Debemos considerar discapacidades de todo tipo. Los gráficos pueden ser
especialmente útiles para individuos con ciertas dificultades para la lectura
o discapacidades del aprendizaje, como desórdenes por déficit de aten-
ción y discapacidades cognitivas.
Ilustraciones
31
Animaciones
Animaciones que distraen
Las animaciones raras veces se usan para realzar la accesibilidad del con-
tenido web. La mayoría de las veces son simplemente molestas. Los anun-
cios mediante «banners» se aprovechan de las cualidades de las anima-
ciones con el propósito de distraernos del tema principal del documento.
En las escuelas elementales es habitual usar animaciones atractivas que
no sirven para su propósito real, sin embargo quizá se puede argumentar
que las animaciones capturan la atención de los niños. Esto puede ser
cierto, pero la mayoría de estas animaciones en realidad distraen la aten-
ción de los niños del propósito real de la página.
Por ejemplo, una animación muy usada es la de un buzón de correos
que se abre y se cierra. La pregunta que debemos hacernos es si la ani-
mación es o no el contenido central de la página. ¿El propósito de la pági-
na es animar a la gente a enviar correos electrónicos? Es posible, pero
probablemente no. Este tipo de animación se encuentra muy a menudo en
la parte baja de una página cuyo propósito principal no tiene nada que ver
32
Que los gráficos sean usados muy a menudo para distraer la visión no
quiere decir que no puedan servir a propósitos más útiles. Las animacio-
nes pueden ilustrar movimientos o procedimientos de una forma que sería
muy difícil de hacer con un texto. Supongamos, por ejemplo, que quere-
mos aprender los pasos de una danza. Podríamos tener una descripción
de los pasos en un texto y quizá esto funcionaría, pero para mucha gente
resultará más fácil ver una animación de cada uno de los pasos, para po-
der imitar los movimientos de la animación. En el caso de individuos con
discapacidades de lectura o cognitivas, el beneficio de las animaciones es
incluso más acentuado.
Naturalmente, la descripción textual sería necesaria para quienes son
ciegos, pero trataremos de este tema un poco más tarde.
Iconos
33
34
Vídeo y multimedia
Color y contraste
Color
35
Imagen 10. Trozo del plano del metro de Madrid, en blanco y negro.
36
Contraste
37
A menudo, los gráficos contienen texto como parte de la imagen. Por ejem-
plo, el gráfico de más abajo contiene la palabra «Universidad». Algunos
usuarios con baja visión utilizan programas para ampliar los elementos en
su pantalla para poder verlos más fácilmente. Desafortunadamente, cuan-
do se amplía el texto de una imagen, a menudo se vuelve «pixelado» y de
más difícil lectura. Veamos un ejemplo:
38
Imagen 16. Cubierta del libro Diseño accesible de páginas web aumentada
desde una imagen muy pequeña.
No hay mucho que decir sobre este tema, pero es muy importante. El
punto esencial es:
2. Efecto que permite ver como lentos o inmóviles objetos que se mueven de forma rápida y
periódica, mediante su exposición intermitente.
39
40
41
42
43
EJEMPLO 1
Supongamos un sitio dedicado al cine que usa imágenes para su navega-
ción principal, tal como muestra la imagen de abajo.
44
EJEMPLO 2
Tomaremos de nuevo la imagen del retrato de Silvia que aparece abajo:
45
En una escuela primaria la profesora crea un sitio web para explicar las
diferencias entre pintura, dibujo y escultura e incluye algunos ejemplos
diferentes de cada tipo de arte. En el texto de la página, describe las
diferencias entre estos tres medios y utiliza el retrato de Silvia como
uno de los cuatro ejemplos de pintura. Un posible texto alternativo en
este caso podría ser «Pintura de una joven dama». Esto es probable-
mente suficiente, ya que la profesora ha descrito adecuadamente que
el gráfico es un ejemplo de una pintura.
El miembro de una familia está recopilando una lista de la gente de su
familia, a través de los retratos de los individuos de ésta. Ya que todas
las imágenes son retratos, un texto alternativo apropiado podría ser
«Silvia Álvarez».
Un profesor de arte de enseñanza secundaria crea un sitio web para
mostrar diferentes tipos de pintura. Utiliza la pintura como ejemplo de
un retrato y explica en el texto de la página qué es un retrato. Un texto
alternativo apropiado en este caso sería «Retrato».
Un estudioso de historia del arte está creando un catálogo de retratos
de diferentes artistas. El texto alternativo debería incluir información re-
levante para la historia del arte, tal como el título del trabajo, el nombre
del artista, el medio utilizado y la fecha. El texto alternativo debería
decir «Silvia Álvarez, óleo sobre lienzo, de Paul Bohman, 2002».
Como podemos ver, no hay un texto alternativo concreto para una ima-
gen en particular, ello depende del contexto y del propósito de la imagen.
Esto es un criterio que debe decidir el autor de la página.
Precisión y brevedad
La alternativa textual para las imágenes debe ser tan precisa y tan sucinta
como sea posible. Hay que asegurar que el texto transmite toda la infor-
mación relevante para su propósito, pero sin cargar al usuario con un texto
alternativo excesivamente largo. Los lectores de pantalla y los dispositivos
Braille siempre leen el texto alternativo, lo cual puede hacer la imagen más
46
Los lectores de pantalla ignorarán los gráficos con texto alternativo vacío,
que es lo que queremos en este caso. Podríamos preguntarnos por qué es
necesario especificar un texto alternativo nulo. ¿No tendría más sentido
simplemente dejar la imagen sin el atributo alt? Ésta es una buena pregun-
ta, pero la respuesta es que eliminar el texto alternativo es peor que poner
47
IMÁGENES REDUNDANTES
Algunas veces, los desarrolladores web añaden a una imagen un texto
alternativo que es exactamente el mismo que el texto del contenido de la
48
Mapas de imagen
Mapas de imagen del lado del cliente
49
Hay una sola imagen, pero tiene 5 puntos sensibles. Cada uno de és-
tos dirige a una diferente localización en el sitio web, así que es necesario
transmitir el propósito de navegación de cada uno de ellos. El texto alter-
nativo de estos puntos sensibles podría ser exactamente el mismo texto
que en la imagen: Inicio, Productos, Servicios, Contacto e Índice. Ahora
tenemos el texto alternativo para los puntos sensibles, pero, ¿qué hay de
la imagen en sí misma? Aparte de los puntos sensibles, esta imagen no
transmite una información significativa. El texto alternativo más apropiado
para la imagen completa sería un texto nulo. Éste sería el código para la
imagen y los puntos sensibles:
50
No hay forma de hacer mapas de imagen del lado del servidor accesibles,
el consejo más simple es no usarlos. A algunos diseñadores les preocupa
que los mapas de imagen del lado del cliente no puedan crear las formas
de las figuras geométricas que quieren diseñar y saben que es posible
hacerlo con los mapas de imagen del lado del servidor. La verdad es que
los mapas de imagen del lado del cliente pueden dibujar cualquier forma,
siempre que el desarrollador tenga la paciencia de crear todas las coorde-
nadas.
Imágenes de fondo
Descripciones largas
Cuándo proporcionar descripciones largas
51
Hay varias maneras de proporcionar una descripción larga para las imáge-
nes. Las distintas opciones se detallan a continuación, de la más a la me-
nos recomendable:
52
1.800.000
1.600.000
1.400.000
1.200.000
1.000.000
800.000
600.000
400.000
200.000
0
Chimpancés
• China: 1.545.458
• Birmania: 945.421
• Laos: 545.845
• Vietnam: 785.752
• Bangladesh: 352.548
• Tailandia: 489.238
• Camboya: 885.465»
53
2.000.000
1.500.000
1.000.000
500.000
0
Chimpancés
El atributo <longdesc>
54
El vínculo «D»
2.000.000
1.500.000
1.000.000
500.000
0
Chimpancés
55
Pautas aplicables
Prioridad 1:
• 1.1 - Proporcione un texto equivalente para todo elemento no tex-
tual (Por ejemplo, a través de «alt», «longdesc» o en el contenido
del elemento). Esto incluye: imágenes, representaciones gráficas del
texto, mapas de imagen, animaciones (Por ejemplo, GIFs anima-
dos), «applets» y objetos programados, «ascii art», marcos, scripts,
imágenes usadas como viñetas en las listas, espaciadores, botones
gráficos, sonidos (ejecutados con o sin interacción del usuario), ar-
chivos exclusivamente auditivos, banda sonora del vídeo y vídeos.
• 1.2 - Proporcione vínculos redundantes en formato texto para cada
zona activa de un mapa de imagen del servidor.
• 1.4 - Para toda presentación multimedia tempo dependiente (por
ejemplo, una película o animación) sincronice alternativas equiva-
lentes (por ejemplo, subtítulos o descripciones de la banda visual)
con la presentación.
• 2.1 - Asegúrese de que toda la información transmitida a través de
los colores también esté disponible sin color, por ejemplo mediante
el contexto o por marcadores.
• 6.2 - Asegúrese de que los equivalentes de un contenido dinámico
son actualizados cuando cambia el contenido dinámico.
• 7.1 - Hasta que las aplicaciones de usuario permitan controlarlo, evite
56
Prioridad 2:
• 2.2 - Asegúrese de que las combinaciones de los colores de fondo y
primer plano tengan el suficiente contraste para que sean percibidas
por personas con deficiencias de percepción de color o en pantallas
en blanco y negro [Prioridad 2 para las imágenes. Prioridad 3 para
los textos].
• 3.1 - Cuando exista un marcador apropiado, use marcadores en vez
de imágenes para transmitir la información.
• 7.2 - Hasta que las aplicaciones de usuario permitan controlarlo, evite
el parpadeo del contenido (por ejemplo, cambio de presentación en
periodos regulares, así como el encendido y apagado).
Prioridad 3:
• 1.5 - Hasta que las aplicaciones de usuario interpreten el texto equi-
valente para los vínculos de los mapas de imagen de cliente, pro-
porcione vínculos de texto redundantes para cada zona activa del
mapa de imagen de cliente.
• 9.5 - Proporcione atajos de teclado para los vínculos más importan-
tes (incluidos los de los mapas de imagen de cliente), los controles
de formulario y los grupos de controles de formulario.
• 14.2 - Complemente el texto con presentaciones gráficas o auditivas
cuando ello facilite la comprensión de la página.
57
Introducción
• Proporcione títulos con sentido para los marcos en los que se descri-
ba el propósito del marco.
• Proporcione contenido con sentido para <noframes>.
59
Una de las cosas más importantes que podemos hacer para aumentar
la accesibilidad de los marcos es dar un título («title») a cada marco:
60
Pautas aplicables
Prioridad 1:
• 12.1 -Titule cada marco para facilitar su identificación y navegación.
Prioridad 2:
• 12.2 - Describa el propósito de los marcos y cómo éstos se relacio-
nan entre sí, si no resulta obvio solamente con el título del marco.
61
Tablas de maquetación
Introducción
Si como alumnos tenemos que consultar un sitio web para saber dónde va
a tener lugar la clase 205 de biología, iremos a una página web que tiene
esta información en formato tabla. Aunque algo abigarrada, no será com-
plicado averiguar la información deseada (se celebrará en el aula 6).
Código
de Matricu- Matricu- Hora
Depar- Número lación lación Número Hora de de fina-
tamento de clase Sección máxima actual de aula Días comienzo zación Profesor
BIO 100 1 15 13 5 Lun, Mié, 10:00 11:00 Martínez
Vie
100 1 15 7 5 Mar, Jue 11:00 12:30 López
205 1 15 9 6 Mar, Jue 9:00 10:30 Martínez
63
Hay dos usos básicos de las tablas en la web: como tablas de datos y
como tablas de maquetación. El uso original de las tablas HTML era para
datos. Una tabla es una tabla de datos cuando hay encabezamiento de
filas, encabezamiento de columnas o ambos. Por ejemplo, he aquí una
tabla de datos simple:
Hijas de Sonia
Nombre Edad Cumpleaños
María 5 5 de abril
Isabel 8 14 de enero
64
Alineación de contenidos
65
Como vemos, las citas del lado derecho se han leído antes que las
citas del lado izquierdo. En el orden de alineación de lectura de esta tabla,
hemos terminado leyendo las frases en el orden equivocado. El resultado
es probablemente el contrario al orden en que pensamos que se leería el
contenido. Cuando miramos la tabla, la revisamos visualmente de izquier-
da a derecha, sin embargo, el lado derecho es leído antes que el izquier-
do. Esto es debido a las filas y columnas cruzadas que componen esta
tabla. La tabla no es tan sencilla cuando miramos el código.
Muchos de los sitios de internet usan tablas para maquetar, y muchos
usan filas y columnas cruzadas para conseguir efectos de formato. El re-
sultado final es que el orden de lectura alineada puede no ser el mismo
que el orden de lectura visual. Esto puede llevar a confusión a aquellos
que acceden al orden de lectura alineada, como las personas que utilizan
lectores de pantalla.
66
Imagen 32- Contenido sobre el uso del inodoro, maquetado con tablas.
El lector vidente leerá: «Los aseos del sótano deben limpiarse tirando
de la cadena hacia arriba».
El usuario de lector de pantalla oirá (o notará en el Braille) «Los aseos
hacia arriba del sótano limpiarse tirando de la cadena deben».
¿Por qué existe esta diferencia entre el orden visual y el orden del
lector de pantalla? Para responder a esta cuestión, tenemos que mirar la
estructura de la tabla. He aquí la misma tabla, a la que se han añadido los
67
Imagen 33. Orden de lectura de la tabla utilizada para maquetar los contenidos.
68
69
Etiquetas de encabezado
Los documentos de internet y las páginas web son distintos de sus corres-
pondientes impresos en papel. Las páginas impresas tienen un tamaño
absoluto, que no se puede cambiar. Las páginas web no. Podemos exten-
der nuestro navegador hacia arriba, abajo, a la derecha, a la izquierda y
conseguir casi cualquier tamaño. La maquetación web debe ser fluida para
encajar con la naturaleza fluida del navegador web.
Una tabla de maquetación con un ancho prefijado no varía su tamaño
para encajar con el área de visión de la ventana del navegador. Si el área
de visión es muy pequeña, exigirá al usuario que se desplace demasiadas
veces de un lado para otro utilizando la barra de desplazamiento (scroll
bar). Puede ser bastante molesto para las personas con baja visión que
deben usar un programa especial para ampliar el área de visión. Este pro-
grama, que suele ser denominado programa de magnificación, puede am-
pliar los contenidos de la pantalla mucho más de lo que puede hacerlo el
sistema operativo. Algunas personas tienen una ampliación tan alta que
70
71
Tablas de datos
Marcado de tablas de datos
El primer paso para crear una tabla de datos accesible es designar los
encabezados de fila y/o columna. Esto es fácil de hacer. La mayoría de las
herramientas de autor proporcionan un método para convertir las celdas
de datos en celdas de encabezado. En el marcado, la etiqueta <td> se usa
para las celdas de la tabla de datos y la etiqueta <th> se usa para las
celdas de encabezado de la tabla. Volviendo a nuestro ejemplo de tabla
«Hijas de Sonia», los encabezados de columna para esta tabla son Nom-
bre, Edad y Fecha de Nacimiento. Los encabezados de fila son María e
Isabel.
Hijas de Sonia
Nombre Edad Cumpleaños
María 5 5 de abril
Isabel 8 14 de enero
72
Ahora que hemos creado los encabezados, necesitamos asociar las cel-
das con los encabezados adecuados. Hay dos maneras de asociar las
celdas de datos con sus encabezados.
Scope (alcance)
Deberíamos usar el atributo «scope» en las tablas simples de datos, como
la del ejemplo. He aquí el marcador para la tabla, usando el atributo
«scope»:
73
Hijas de Sonia
Nombre Edad Fecha de nacimiento
María 5 5 de abril
Por nacimiento
Isabel 8 14 de enero
Por matrimonio Juana 12 12 de febrero
<table border="1">
<caption>Hijas de Sonia</caption>
<tr>
<td> </td>
<th id="nombre">Nombre</th>
<th id="edad">Edad</th>
<th id="nacio">Fecha de nacimiento</th>
</tr>
<tr>
<th rowspan="2" id="nacimiento">Por nacimiento</th>
<th id="maria">María</th>
<td headers="nacimiento maria edad">5</td>
<td headers="nacimiento maria nacio">5 de abril</td>
</tr>
<tr>
74
Las tablas deben tener algún tipo de título o «caption». Esto se hace co-
rrectamente usando la etiqueta «caption» justo después de la etiqueta de
apertura <table>, de la siguiente manera:
75
76
Pautas aplicables
Prioridad 1:
• 5.1 - En las tablas de datos, identifique los encabezamientos de fila
y columna.
• 5.2 - Para las tablas de datos que tienen dos o más niveles lógicos
de encabezamientos de fila o columna, utilice marcadores para aso-
ciar las celdas de encabezamiento y las celdas de datos.
Prioridad 2:
• 5.3 - No utilice tablas para maquetar, a menos que la tabla tenga
sentido cuando se alinee. Por otro lado, si la tabla no tiene sentido,
proporcione una alternativa equivalente (la cual debe ser una ver-
sión alineada).
• 5.4 - Si se utiliza una tabla para maquetar, no utilice marcadores
estructurales para realizar un efecto visual de formato.
Prioridad 3:
• 5.5 - Proporcione resúmenes de las tablas.
• 5.6 - Proporcione abreviaturas para las etiquetas de encabezamiento.
• 10.3 - Hasta que las aplicaciones de usuario (incluidas las ayudas
técnicas) interpreten correctamente los textos contiguos, proporcio-
ne un texto lineal alternativo (en la página actual o en alguna otra)
para todas las tablas que maquetan texto en paralelo, en columnas
de palabras.
77
Hay dos medios principales en la web para recibir información de un sitio web:
el correo electrónico y los formularios. El correo electrónico no suele tener
ningún gran problema de accesibilidad, y permitir a los usuarios de un sitio
web acceder a una dirección de correo electrónico de contacto es una gran
herramienta para la usabilidad y accesibilidad. Los formularios proporcionan, a
menudo, un medio de comunicación mejor. Pueden ser enviados fácilmente y
no requieren de un programa de correo o un servicio web. Con los formularios
también se puede obtener la información específica que se necesita. Pero los
formularios también suponen algunos problemas de accesibilidad.
Cuando hablamos de la accesibilidad de los formularios, solemos refe-
rirnos a su accesibilidad para los lectores de pantalla y las personas con
discapacidades visuales. Las personas con otros tipos de discapacidades
suelen verse menos afectadas por los formularios defectuosos que care-
cen de algunas de las características de accesibilidad de HTML. Debemos
puntualizar, no obstante, que todo el mundo resulta beneficiado si los for-
mularios están bien organizados, especialmente las personas con
discapacidades cognitivas. La maquetación visual puede ser importante para
los usuarios videntes. Cuanta menos explicación precise el formulario, mejor.
Sin embargo, el objetivo de este ejercicio es básicamente la elaboración
de un formulario que pueda ser leído por un lector de pantalla.
Muchos usuarios tienen que utilizar el teclado para navegar y usar la web.
Hay que asegurarse de que los formularios de un sitio web pueden
79
80
Imagen 36. Opción para visualizar en orden de los controles del formulario
con el navegador Opera 7.
Otra herramienta que nos puede servir para revisar el orden de alinea-
ción de los ítems de la página es la barra de accesibilidad de NILS, que se
ejecuta con el navegador IExplorer de Microsoft (se puede encontrar en
castellano en: http://www.technosite.es/software.asp).
81
82
Hay dos cosas que podemos hacer para arreglar la tabla anterior:
83
84
85
86
Nombre:
<label for="nombre">Nombre
<input id="nombre" type="text" name="textfield" />
</label>
87
<fieldset>
<legend>Elija un color:</legend>
<label for="azul">
<input id="azul" type="checkbox" name="checkbox1"
value="checkbox" />Azul</label>
<label for="verde">
<input id="verde" type="checkbox" name="checkbox1"
value="checkbox" />Verde</label>
<label for="amarillo">
88
<fieldset>
<legend>Elija un coche:</legend>
<label for="seat">
<input id="seat" type="radiobutton" name="radiobutton1"
value="seat" />Seat Toledo</label>
<label for="reanult">
<input id="renault" type="radiobutton"
name="radiobutton1" value="renault" />Renault
Espace</label>
<label for="peugeot">
<input id="peugeot" type="radiobutton"
name="radiobutton1" value="peugeot" />Peugeot 607</
label>
</fieldset>
89
90
No hay etiquetas de HTML especiales para los botones. Éstos serán acce-
sibles en tanto se use el botón estándar.
Enviar Reiniciar
91
92
93
Prioridad 2:
• 10.2 - Hasta que las aplicaciones de usuario soporten explícitamen-
te la asociación entre control de formulario y etiqueta, para todos los
controles de formularios con etiquetas asociadas implícitamente,
asegúrese de que la etiqueta está colocada adecuadamente.
• 12.4 - Asocie explícitamente las etiquetas con sus controles.
Prioridad 3:
• 10.4 - Hasta que las aplicaciones de usuario manejen correctamen-
te los controles vacíos, incluya caracteres por defecto en los cua-
dros de edición y áreas de texto.
94
¿Qué es JavaScript?
95
1. Utilizamos, a partir de este momento, el término inglés «script» sin referir su traducción al
castellano (guión), ya que es un término muy común entre los desarrolladores y diseñadores de
páginas web y no queremos enmarañar demasiado este documento.
96
97
Tal y como hemos expuesto más arriba, nuestras páginas web deberían ser
totalmente accesibles si se deshabilita JavaScript. Éste es uno de los requeri-
mientos de las Pautas de Accesibilidad al Contenido en la Web de W3C/WAI
con Prioridad 1. La Sección 508 no exige que la página funcione si el JavaScript
está deshabilitado, pero exige que el script sea por sí mismo originalmente
accesible. Este documento enseñará estrategias para hacer los script accesi-
bles desde el inicio y asume que si nosotros, como desarrolladores, queremos
alcanzar un alto grado de accesibilidad para cumplir las Pautas de Accesibili-
dad al Contenido en la Web, también evaluaremos las páginas para asegurar-
nos de que funcionan igualmente con JavaScript deshabilitado.
98
<script type="text/javascript">
<!—
function doit();
—>
</script>
99
onMouseOver y onMouseOut
onFocus y onBlur
onClick y onDblClick
100
onChange y onSelect
101
Usando document.write
102
103
104
Alternativas a JavaScript
105
106
<script type="text/javascript">
<!—
document.write("La hora actual es " + currenttime)
—>
</script>
<noscript>
<!—vinculo a la página que muestra la hora mediante
script del lado del servidor —>
<a href="hora.htm">Vea la hora actual</a>
</noscript>
Resumen de JavaScript
107
onMouseOver y onMouseOut:
• Dependientes del dispositivo (requieren el uso de ratón).
• Tenemos que asegurarnos de que no se introducen contenido o
funcionalidad importantes con estos manejadores de evento.
• Debemos utilizarlos junto con los manejadores de evento onFocus
y onBlur para permitir la accesibilidad desde el teclado.
• Tenemos que proporcionar una alternativa accesible si el contenido
o la funcionalidad no pueden hacerse accesibles de por sí.
onFocus y onBlur:
• Independientes del dispositivo (funcionan tanto con el teclado como
con el ratón).
• Hemos de verificar para asegurarnos de que no se afecta la accesi-
bilidad.
onClick y onDblClick:
• Dependientes del dispositivo (requieren el uso de ratón).
• onClick se activa con la tecla «Intro» cuando se usa en vínculos y
elementos de formulario.
• No hay equivalentes independientes del dispositivo o accesibles desde
el teclado para estos manejadores de eventos.
108
109
Pautas aplicables
Prioridad 1:
• 6.3 - Asegúrese de que las páginas son usables cuando estén des-
conectados o no se soporten scripts, applets u otros objetos de pro-
gramación. Si no es posible, proporcione información equivalente en
una página accesible alternativa.
Prioridad 2:
• 6.4 - Para los scripts y applets, asegúrese de que los manejadores
de evento son independientes del dispositivo de entrada.
• 6.5 - Asegúrese de que el contenido dinámico es accesible o pro-
porcione una presentación o página alternativas.
• 7.4 - Hasta que las aplicaciones de usuario proporcionen la posibili-
dad de detener el refresco, no cree páginas que se auto-refresquen.
• 7.5 - Hasta que las aplicaciones de usuario proporcionen la posibili-
dad de detener el auto-redireccionamiento, no use marcadores para
redireccionar páginas automáticamente. En lugar de eso, configure
el servidor para que realice los redireccionamientos.
110
111
113
114
115
116
117
Equivalentes textuales
118
119
Etiquetado automático:
Esta opción ordena a Flash que asocie botones con texto que está en, o
cerca de, el botón. Si todos los botones tienen texto dentro o adyacente,
«Etiquetado automático» puede asociarlos automáticamente y leerá el tex-
to como una alternativa textual al botón. Los resultados no son siempre los
esperados y debemos llevar cuidado cuando utilicemos «Auto-etiquetado».
Nombre:
Aquí es donde debemos insertar el texto alternativo para un objeto Flash,
ya que esto es lo que leerá el lector de pantalla en lugar del objeto selec-
cionado. Podemos introducir un nombre o descripción breve del objeto (una
o dos frases cortas).
Descripción:
Se usa para descripciones más largas de los objetos Flash y no es nece-
sario a menos que se precise una descripción adicional a la que permite
«Nombre». Si proporcionamos tanto «Nombre» como «Descripción», el
lector de pantalla leerá primero el nombre y luego la descripción.
Funcionalmente, no hay diferencia entre ambas.
120
121
122
1. Colocar el texto dentro del símbolo del botón. El texto se leerá cuando
se acceda al botón.
2. Proporcionar una alternativa equivalente en los campos de «Nombre»
y/o «Descripción» del panel de Accesibilidad.
3. Colocar el texto adyacente al botón y utilizar la característica de «Eti-
quetado automático» del panel de Accesibilidad.
123
124
125
126
127
128
_root.Homepage.tabIndex = 1
_root.Contact.tabIndex = 2
_root.FirstName.tabIndex = 3
_root.LastName.tabIndex = 4
_root.SubmitButton.tabIndex = 5
129
<object ...>
<param name="wmode" value="opaque">
<embed wmode="opaque" ...>
</embed>
</object>
130
if (Accessibility.isActive()) {
_root.selfVoicing.play();
}
AVISO: Puesto que hay un pequeño retraso entre que empieza la pre-
sentación y se detecta el lector de pantalla, Accessibility.isActive()puede
devolver un mensaje de «falso» durante los primeros momentos de eje-
cución de la presentación. La presentación Flash tiene que estar enfoca-
da para que esto funcione. Podemos resolver esto asociando el
ActionScript con un botón de la presentación Flash. El método para de-
tectar un lector de pantalla no detecta todos los lectores de pantalla.
Sólo detectará las versiones más recientes de lectores de pantalla que
soportan MSAA y tienen instalado el programa Flash 6+.
131
if (Accessibility.isActive()) {
getURL(screenreaderpage.htm);
} else {
getURL(normalpage.htm);
}
132
• Botón (button)
• Caja de verificación (check box)
• Botón de radio (radio button)
• Etiqueta (label)
• Entrada de texto (text input)
• Área de texto (text area)
• Caja de combo (combo box)
• Lista (list)
• Ventana (window)
• Alerta (alert)
• Rejilla de datos (data gris)
import mx.accessibility.ButtonAccImpl;
ButtonAccImpl.enableAccessibility();
Este código sólo necesita ser incluido una vez para cada tipo de com-
ponente y debería agregarse en el primer marco de la presentación.
Cuando usemos los componentes, debemos hacer un test para asegu-
rar que se ha logrado la accesibilidad.
Epilepsia fotosensible
133
134
135
Debemos dar al usuario el control sobre los cambios del contenido impor-
tantes y permitir que el usuario controle cuándo se presenta el contenido
nuevo. Las personas con discapacidades cognitivas o del aprendizaje pue-
den necesitar más tiempo para llevar a cabo una tarea o comprender una
parte del contenido. Un lector de pantalla tiene que tener tiempo suficiente
para completar la lectura del contenido de una sección antes de que cambie.
Escalar el contenido
136
Pautas aplicables
Prioridad 1:
• 1.1 - Proporcione un equivalente textual para todo elemento no tex-
tual (por ejemplo, a través de «alt», «longdesc» o en el contenido
del elemento). Ello incluye imágenes, representaciones gráficas de
texto (incluyendo símbolos), regiones de mapas de imágenes, ani-
maciones (por ejemplo, GIFs animados), applets y objetos de pro-
gramación, ascii art, marcos, scripts, imágenes usadas como listas
de viñetas, espaciadores, botones gráficos, sonidos (mostrados con
o sin interacción del usuario), archivos de sólo sonido, bandas sono-
ras de vídeo y vídeos.
• 1.3 - Hasta que los agentes de usuario puedan leer automáticamente
en voz alta el equivalente textual de una banda visual, proporcione
una descripción sonora de la información importante de la banda
visual de una presentación multimedia.
• 1.4 – Para cualquier presentación multimedia basada en tiempo (por
ejemplo, una película o animación) sincronice con la presentación
137
Prioridad 3:
• 14.2 - Complemente el texto con presentaciones gráficas o sonoras
cuando ello mejore la comprensión de la página.
138
Los esfuerzos por hacer páginas web accesibles pueden resultar estériles
si no tenemos la posibilidad de verificar que nuestro trabajo se está reali-
zando correctamente. W3C/WAI nos proporciona, junto con el documento
normativo de las «Pautas de Accesibilidad al Contenido en la web 1.0»,
una tabla de verificación que nos puede ser útil para una revisión manual
del grado de cumplimiento con esta norma técnica. La versión en castella-
no de esta tabla de verificación la podemos encontrar en:
• http://usuarios.discapnet.es/disweb2000/WCAG2003/wcag10/full-checklist.html
• http://www.technosite.es/accesibilidad/recursos/documentos/wcag10/full-checklist.html
139
140
141
142
Examinator
143
Bobby - WebXACT
144
Cynthia Says
145
WAVE
146
Torquemada
147
148
149
Función Descripción
Accessible Information Enlaces a información sobre los servicios de AIS
Solutions (AIS)
Technosite Enlace a información sobre Technosite, empresa que ha
realizado la traducción y adaptación de esta barra de
herramientas.
Contactar con Technosite Enviar un mensaje a Technosite.
150
Función Descripción
Validador HTML del W3C Comprobar el código HTML de la página (o páginas)
• Validar HTML actual con el Validador HTML del W3C.
• Validar HTML Nota: Validar HTML (enviar el archivo), cuando se abre
(nueva ventana) un archivo HTML local, con el recuadro de diálogo
• Validar HTML Archivo/Abrir (no a través de un servidor web, por
(enviar el archivo) ejemplo, c:\ejemplo.html) en Internet Explorer, esta
opción envía el código HTML al validador de forma
automática.
Validador CSS del W3C Comprobar las definiciones CSS en la página actual
• Validar CSS de la con el Validador CSS del W3C.
página actual
• Validar CSS
(nueva ventana)
151
152
Función Descripción
Activar y desactivar CSS Activar y desactivar las hojas de estilo externas.
Desactivar CSS en Suprimir el atributo ‘style’ (si existe) de todos los
elementos HTML elementos de la página actual.
Mostrar hojas de estilo En una ventana nueva, muestra todos los estilos
aplicadas asociados con el contenido actualmente debajo del
puntero del ratón.
Script de Simon Willison.
Mostrar hoja de estilo Muestra el contenido de la hoja de estilo vinculada con
la página actual (en una ventana nueva).
Verificar hojas de estilo Editar y aplicar estilos a la página actual de forma
dinámica (en ventana nueva)
Script de Simon Willison
HTML desaconsejado Mostrar los elementos de la página actual desaconseja-
dos en HTML 4.0. En la versión actual, no indica los
atributos desaconsejados.
Función Descripción
Lista de imágenes Mostrar (en ventana nueva) una lista de imágenes con
el elemento <img> correspondiente. Desarrollado a partir
de un script de Lioren.
Intercambiar imagen y Sustituir los elementos <img> en la página actual con el
texto ALT contenido de sus atributos «alt» entre comillas. Si un
elemento <img> no lleva el atributo «alt» la imagen se
sustituye con el texto «NoAlt!»
153
Función Descripción
Escala de grises Mostrar la página actual en blanco y negro.
Nota: no funciona con imágenes en formato PNG.
Colores empleados Mostrar (en ventana nueva) una lista de todos los
colores encontrados en el CSS asociado con la página
actual. Origen milov.nl.
Analizar contraste Abre el Analizador de contraste de colores de Juicy
Studio (en ventana nueva).
Función Descripción
Encabezados Muestra todos los elementos de encabezado en la
página actual.
Estructura de Muestra el título del documento, los encabezados (<h1>
encabezados a <h6> con sus contenidos) en ventana nueva. Basado
en una función de The Wave 3.5.
Ítems de listas Muestra los elementos de las listas ordenadas (<ol>),
no ordenadas (<ul>) y de definiciones (<dl>) de la
página actual.
Fieldset y label Muestra los elementos fieldset, legend y label de la
página actual. Muestra el atributo for de los elementos
label si existen, y el texto «¡Ningun For!» si este no
existe. Muestra el atributo ID (id=»») de cada control de
formulario si existe.
Acrónimos y abreviaturas Muestra los elementos <acronym> y <abbr>, y el valor
del atributo title, de la página actual.
AccessKey Muestra el valor del atributo accesskey en elementos de
la página actual.
154
155
Función Descripción
TAW (Test de Enviar el URL de la página actual a la herramienta de
Accesibilidad Web, comprobación de accesibilidad TAW (dos opciones:
español) ventana actual o nueva).
The Wave (inglés) Enviar el URL de la página actual a la herramienta de
comprobación de accesibilidad Wave (dos opciones:
ventana actual o nueva).
Torquemada (italiano) Enviar el URL de la página actual a la herramienta de
comprobación de accesibilidad Torquemada (dos
opciones: ventana actual o nueva).
Cynthia Says (inglés) Enviar el URL de la página actual a la herramienta de
comprobación de accesibilidad Cynthia Says (dos
opciones: ventana actual o nueva).
Bobby (inglés) Enviar el URL de la página actual a la herramienta de
comprobación de accesibilidad Bobby (dos opciones:
WCAG 1.0 (ventana nueva) o Sección 508 (ventana
nueva)). NOTA: Actualmente funciona en el mismo sitio
de Webxact.
156
Función Descripción
Desactivar plugins Suprimir Applets Java, Flash, música de fondo, y
elementos iframe de terceros. Desarrollado a partir de
un script en Jesse’s Bookmarklets Site.
Desactivar el ratón Impide el acceso por parte del usuario a la funcionalidad
de la página actual mediante el ratón con el botón
secundario y eventos de selección (la versión actual no
deshabilita los eventos basados en mouseover o
onmouse). Cuando el usuario aprieta el botón secunda-
rio se muestra una advertencia.
Nota: el botón primario no se deshabilita.
157
158
Función Descripción
Información página Muestra (en ventana nueva) información sobre la página
actual: titulo (<title>), tamaño de archivo, fecha de
creación, número de imágenes, enlaces, formularios,
scripts. Desarrollado a partir de un script en el sitio web
de Oregon State University.
Metadatos Muestra (en ventana nueva) una lista de todos los
elementos meta en la página actual, y su contenido.
Tamaño y tiempo de Muestra (en un recuadro de alerta) el tamaño del
descarga documento y el tiempo aproximado de descarga a
diferentes velocidades de transmisión. Desarrollado a
partir de un script en sam-i-am.com.
Informe tiempo de Envía el URL de la página actual al analizador en línea
descarga web Page Analyser (en ventana nueva) proporcionado
por websiteoptimazation.com.
Lista de marcos Muestra (en ventana nueva) una lista de los URLs de
las páginas en marcos y los nombres de los elementos
<frame>, de la página actual.
Lista de enlaces Muestra (en ventana nueva) una lista del URL, el
contenido y el valor del atributo <title> (si existe) de
cada enlace encontrado en la página actual.
Lista de enlaces a PDFs Muestra (en ventana nueva) una lista a de enlaces a
documentos PDF encontrados en la página actual.
159
Función Descripción
Activar imágenes Activar y desactivar imágenes mediante el recuadro de
[ctrl + alt + I] diálogo de Internet Explorer > Herramientas > Opciones
de internet > Opciones avanzadas > Mostrar imágenes.
Activar JavaScript Activar y desactivar Javascript mediante el recuadro de
[ctrl + alt + J] diálogo de Internet Explorer > Herramientas > Opciones
de internet > Seguridad > Nivel personalizado >
Secuencias de comandos ActiveX.
Nota: Dado que mucha de la funcionalidad de la barra
de herramientas está basada en JavaScript, muchas
funciones no funcionarán mientras está deshabilitado
JavaScript.
Activar ActiveX Habilitar o deshabilitar ActiveX mediante el recuadro de
[ctrl + alt + A] diálogo de Internet Explorer > Herramientas > Opciones
de internet > Seguridad > Nivel personalizado > Ejecutar
controles y complementos ActiveX. Es útil para compro-
bar páginas con Flash, etc.
Opciones de Abrir el recuadro de diálogo de Internet Explorer >
accesibilidad Herramientas > Opciones de internet > Accesibilidad.
[ctrl + alt + D]
Activar CSS Activar y desactivar soporte CSS en Internet Explorer.
[ctrl + alt + C] Nota: Esta no es una función proporcionada por
Microsoft. Desactivar el soporte para CSS puede afectar
la apariencia de las ventanas y recuadros de diálogo
fuera de Internet Explorer que dependen del soporte
CSS. No olvide volver a habilitar el soporte para
CSS antes de cerrar el navegador. Si nota efectos
extraños abra IE y vuelva a habilitar CSS.
Tamaño de texto La misma funcionalidad que el menú de IE Ver >
Tamaño de texto. Se proporcionan atajos de teclado:
Menor (ctrl + alt + X), Mediana (ctrl + alt + Y), Mayor
(ctrl + alt + Z).
Función Descripción
Tamaño de texto Ampliar y reducir el tamaño (25% a 600%) del contenido
de la página actual.
160
161
Información general
• http://www.w3.org
Sitio del Consorcio Mundial de la Web, imprescindible referencia en
materia de normativa y desarrollo de la web (inglés).
• http://www.w3.ogr/WAI
Páginas de la Iniciativa de Accesibilidad en la Web con amplia informa-
ción sobre sus actividades y todos los documentos que elaboran, de
especial interés las WCAG 1.0 (inglés).
• http://www.technosite.es/recursos.asp
Páginas de Technosite (Fundosa Teleservicios) sobre recursos en ma-
teria de accesibilidad web, incluyendo las traducciones de las WCAG
1.0 y la barra de herramientas de accesibilidad web AIS (castellano).
• http://usuarios.discapnet.es/disweb2000/webaccesible/index.htm
Páginas sobre accesibilidad web en el sitio de Carlos Egea:
DisWeb2000. Información y acceso a la traducción de las WCAG 1.0,
incluyendo el formato PDF de las dos ediciones impresas (castellano).
• http://www.webaim.org
Sitio de la iniciativa Web Accessibility in Mind en la que podemos en-
contrar recursos, técnicas, artículos y material formativo sobre accesibi-
lidad web (inglés).
163
• http://www.ni4.org/
AFANIAS y el Instituto de Apoyo Empresarial mantienen esta web so-
bre “Navegación fácil” que toca la accesibilidad web desde el punto de
vista de la discapacidad intelectual. Han elaborado un protocolo de cum-
plimiento de criterios de accesibilidad web para este colectivo (castella-
no).
• http://www.sidar.org
Sitio de la Fundación SIDAR y de su Seminario Iberoamericano sobre
Discapacidad y Accesibilidad en la Red con mucha información sobre
el tema (castellano).
• http://accesibleweb.com.ar/default.htm
Andrea Stiparo mantiene, desde Argentina, este sitio con información
sobre accesibilidad web (castellano).
• http://www.webaccessibile.org/
Mucha información sobre accesibilidad web en este sitio italiano, pero
de fácil lectura por hispano parlantes (italiano).
• http://www.webxtutti.it
Sitio de la Fundación Ugo Bordoni con información, normativa y reco-
mendaciones de accesibilidad, incluyendo una herramienta de evalua-
ción (italiano).
• http://www.seraccesible.net/
Bitácora de Marco Giacomuzzi sobre accesibilidad en la web (castella-
no e italiano).
• http://www.webposible.com/
Sitio de Alejandro Gonzalo Bravo García con información, recursos y
artículos sobre accesibilidad web (castellano).
• http://ferguweb.tx.com.ru/
Bitácora de Fernando Gutiérrez Ferreira sobre temas de accesibilidad y
usabilidad en la web (castellano).
164
165
• http://www.tawdis.net
TAW: Verificador de sitios y páginas, incluye versión descargable (cas-
tellano).
• http://www.sidar.org/hera
HERA: Verificador de páginas (castellano).
• http://webxact.watchfire.com
BOBBY: Verificador de páginas gratuito en su versión web, de pago la
versión descargable (inglés).
• http://www.wave.webaim.org
WAVE: Herramienta de evaluación de páginas web (inglés).
• http://www.webxtutti.it/testa.htm
TORQUEMADA: Herramienta de evaluación de páginas web (italiano).
• http://www.technosite.es/software.asp
Páginas de Technosite (Fundosa Teleservicios) sobre recursos en ma-
teria de accesibilidad web, incluyendo la extensión Web Developer para
Firefox, la barra de herramientas de accesibilidad web AIS (castellano)
y una versión de evaluación de JAWS.
• http://www.visionaustralia.org.au/info.aspx?page=959
Analizador de Contraste de Color 1.0, descargable (castellano).
• http://www.wat-c.org/tools/CCA/1.1/
Analizador de Contraste de Color 1.1, descargable. Evolución del ante-
rior (inglés).
166