Criterios de accesibilidad de páginas web
Según la W3C-WAI (Web Accesibility Initiative
del World Wide Web Consortium) las causas más importantes de falta
de accesibilidad muchas páginas web para todos los usuarios,
y a las que los diseñadores deben prestar por tanto mayor
atención, son las siguientes:
- Falta de estructuración en las páginas que
desorienta al usuario y dificulta la navegación.
- Abuso de los elementos estructurales de
HTML con el único propósito de la maquetación y distribución en
pantalla del contenido de la página.
- Basarse excesivamente en la información
gráfica (imágenes, mapas de imagen, tablas usada para formatear
columnas, marcos, scripts Java, elementos multimedia, etc) sin proporcionar
adecuadas alternativas de texto u otro formato complementario.
Los problemas de accesibilidad causados por
este tipo de páginas se acentúan especialmente para aquellos usuarios
que por su discapacidad u otros motivos,
- utilizan lectores de pantalla que dirigen
el contenido de la imagen a una síntesis de voz, una línea Braille
o un emisor de morse,
- utilizan navegadores de síntesis de voz
(como pwWebSpeak) que interpretan directamente el código html, en
lugar de su representación en la pantalla,
- utilizan navegadores sólo-texto (como Lynx
o Net-Tamer) que sólo pueden mostrar el texto de las páginas web.
Desde distintas entidades preocupadas por el
tema de la accesibilidad en la red se han elaborado guías para el
diseño de páginas web accesibles. Todas estas guías son muy similares
en sus recomendaciones y varían únicamente en la presentación y organización
de dichas recomendaciones, así como en el énfasis que hacen sobre
cada una de ellas. En general se pueden agrupar estas recomendaciones
en las siguientes áreas:
- Diseño general de la página y sitio web.
- Presentación del texto
- Características gráficas
- Características especiales, programación
y multimedia
Conviene tener en cuenta que la nueva especificación
de HTML 4 ha introducido nuevos elementos que no existían en el momento
en que se redactaron las guías pero que facilitan la accesibilidad
en los siguientes aspectos:
- Mejor estructuración de las páginas con
nuevos elementos descriptores como ABBR (abreviación) y ACRONYM
(acrónimo) y elementos para facilitar la presentación linear de
las tablas en los navegadores.
- Separación de contenido y formato mediante
hojas de estilo en cascada y más posibilidades de maquetación.
- Nuevos elementos para definir contenido
alternativo para los formatos que puedan ser innaccesibles. Por
ejemplo aparece la etiqueta LONGDESC para proporcionar un párrafo
o enlace a una página donde aparezca la descripción textual de un
objeto o imagen y la etiqueta TITLE para proporcionar el título
del elemento.
- Navegación y orientación más fáciles. Por
ejemplo el atributo ACCESSKEY permite especificar una tecla para
activar un enlace, campo de formulario o similar cuando el usuario
pulsa dicha tecla.
Diseño general de la página y sitio web
- Estructurar bien las páginas, mediante títulos
y subtítulos (etiquetas H1, H2, H3...), manteniendo una presentación
clara y consistente a lo largo de todo el sitio web.
- Utilizar html estándar aprobado por el W3C
evitando las extensiones propietarias como texto deslizante ( marquee)
y texto parpadeante ( blink ) que sólo son interpretadas
correctamente por un navegador.
- Incluir una nota sobre accesibilidad del
sitio web para concienciar a los usuarios y promover su uso en otros
sitios web.
- Especificar en cada página una dirección
de email para comentarios y la fecha de última actualización.
- Proporcionar alternativas o evitar a las
páginas con marcos pues no son accesibles para algunos navegadores.
- Utilizar hojas de estilo en cascada
para aplicar el formato a las páginas web de manera consistente
a lo largo de todo el sitio web, separando desde el momento del
diseño el contenido delformato
de la página.
La WAI pone mucho énfasis en promover el uso por parte de los diseñadores de páginas web de Hojas de Estilo
en Cascada (CSS2). Se trata un estándar de reciente aparición
pero para el que se prevé una gran difusión, sobre todo de cara al
mantenimiento de sitios web completos.
Se espera que CSS2 aporte soluciones interesantes
para algunos problemas de accesibilidad pues existe la posibilidad
de presentar la misma página al usuario de distintas maneras eligiendo
una hoja de estilo asociada distinta en función de las necesidades
o situación específica del usuario. Así, por ejemplo, un usuario con
visibilidad reducida puede aumentar el tamaño de fuente del documento
y/o el color de los enlaces y especificar una combinación de colores
de máximo contraste, mientras que a un usuario ciego se le puede presentar
el texto de manera que esté ya preparado para ser impreso en una impresora
Braille, sin más que usar hojas de estilo personalizadas para cada
caso.
En otro ejemplo, los usuarios con deficiencias
cognitivas pueden beneficiarse de una presentación del contenido más
espaciado en la pantalla y reforzado por el uso de colores y viñetas
de imagen asociadas a los títulos.
Presentación del texto
Recomendaciones:
- Presentar un tamaño suficientemente grande
de fuentes en pantalla para mejorar la legibilidad.
- Evitar el uso de tablas para formatear texto
en pantalla porque esto confunde a veces a los programas lectores
de pantalla.
- Proporcionar texto significativo en los
enlaces. Evitar el enlace que dice únicamente "pincha aquí", ya
que algunos navegadores de acceso alternativo tienen la opción de
listar únicamente los enlaces de la página para acelerar la navegación.
- Diferenciar claramente los enlaces consecutivos
en la misma línea mediante un carácter de separación como "|".
- Mantener la forma habitual de presentar los enlaces subrayados y no utilizar subrayado en texto
que no sea enlace, para no confundir al usuario.
Características gráficas
Recomendaciones:
- Proporcionar siempre un breve texto alternativo
(ALT tag) o descripciones textuales más amplias (enlace D o atributo
LONGDESC) de las imágenes empleadas.
- Utilizar fondos simples, preferiblemente
planos y con suficiente contraste.
- Diseñar los botones y enlaces grandes para
facilitar su selección con el ratón.
- Incluir alternativas de menu solo texto
para los mapas de imagen para garantizar la accesibilidad de los
enlaces.
- Si es necesario proporcionar una página
alternativa en modo texto para las páginas con carga visual excesiva.
Respecto a la longitud de las descripciones
textuales de las imágenes hay una cierta polémica entre los expertos.
Si son demasiado breves pueden dejar al usuario con una comprensión
incompleta de la página, mientras que si son demasiado largas pueden
sobrecargar el texto de la página y dificultar la navegación.
En este sentido nos parece clarificador el siguiente comentario de un usuario ciego:
"No intentes describirme lo maravillosa que es la Mona Lisa. No podrás hacerlo, pero puedes decirme cómo conseguir
una copia e imprimirla para mi hija."
Gary Wunder, programador de ordenadores en el Hospital de la Universidad de Missouri. University of Missouri
Hospitals and Clinics. Citado del New York Times, 26 de marzo de 1998.
Características especiales, programación
y multimedia
Recomendaciones:
- Subtitular los videos y transcribir el audio
a formato texto.
- Avisar de la presencia de audio de fondo
a los usuarios con deficiencias auditivas.
- Proporcionar alternativas a los formularios
de recogida de información, pues éstos pueden dar problemas con
algunos navegadores y/o lectores de pantalla. Proporcionar una dirección
de correo electrónico al que se pueda enviar directamente la información.
- Utilizar con cuidado las applets (programas incrustados) para garantizar su accesibilidad. Proporcionar alternativas
en formato html estándar con la misma funcionalidad.
- Aprovechar las posibilidades de los nuevos formatos multimedia para emitir la información con redundancia
de canal (video, audio, subtítulos, descripción textual, video
alternativo...) de manera que el usuario pueda escoger los canales
a los que tiene acceso.
- Existe una iniciativa para garantizar que
los nuevos estándares VRML (realidad virtual a través de la web)
y DHTML (html dinámico) sean lo más accesible posible, pero de momento
no hay recomendaciones concretas.
7 recomendaciones
básicas para el diseño de páginas web
En esta sección se recoge un resumen de 7 recomendaciones
que a nuestro juicio suponen aumentar de forma considerable la accesibilidad
de las páginas web para todos los usuarios, incluyendo las personas
con discapacidad.
Una comprensión del problema de accesibilidad
de páginas web a personas con discapacidad exige por supuesto la lectura
del documento completo y no sólo de esta sección. No es nuestra intención
crear un nuevo conjunto de guías de accesibilidad pues esto ya ha
sido hecho con profundidad y exhaustividad por otras instituciones
como el W3C-WAI a nivel mundial (Vanderheiden, G. et al.; 1998) y
el SIDAR del Real Patronato de Prevención y Atención a Personas con
Minusvalía a nivel nacional (Gutiérrez, E. y Romañac, J.; 1997). De
hecho todas estas recomendaciones se encuentran recogidas de una u
otra forma en los documentos publicados por dichas instituciones.
Sin embargo, si el lector dispone de poco tiempo
aquí puede encontrar un resumen de las recomendaciones más importantes
a implementar en el diseño de sus páginas web. Se ha hecho hincapié
en aquellos aspectos que de acuerdo con nuestra experiencia constituyen
las faltas de accesibilidad más comunes en las páginas web existentes
actualmente.
Las 4 primeras recomendaciones son de aplicación
fácil e inmediata y facilitarán el acceso a nuestras páginas web a
todos los usuarios, y especialmente a aquellos con deficiencias visuales
que utilizan navegadores "sólo-texto" para navegar por Internet.
Las 3 siguientes recomendaciones hacen referencia
al planteamiento de estrategia general que debe seguir el desarrollador
y exigen más tiempo por parte del mismo para lograr un diseño que
sea fácilmente accesible por todo tipo de usuarios, independientemente
del modo de navegación que estén empleando.
Recomendaciones específicas
- Poner texto alternativo en todas las imágenes
y mapas de imágenes . (etiqueta ALT). Esta es la recomendación más
importante para el acceso a las páginas web de los usuarios con
deficiencias visuales, pero también de aquellos usuarios con conexiones
lentas y para los que esperar a la carga completa de las imágenes
supone a veces una inversión de tiempo innecesaria.
- No usar imágenes de fondo y buscar máximo
contraste entre los colores de fondo y primer plano . Nuestra experiencia
indica que el fondo de la página debe ser un color plano para facilitar
la legibilidad, aunque esto implique perder algo de vistosidad en
la página.
- Usar enlaces con texto significativo . Evitar
el enlace que dice únicamente " Pincha aquí " o algo similar.
Cada vez más los navegadores ofrecen al usuario la posibilidad de
listar los enlaces en una ventana aparte para facilitar la navegación,
como una de las opciones de accesibilidad para los usuarios con
deficiencia de navegación ( print impaired users).
- Evitar elementos no estándar como texto
parpadeante (BLINK) y texto móvil (MARQUEE) . Estos
dos elementos en particular, además de no ser bien interpretados
por algunos navegadores, causan mal funcionamiento en lectores de
pantalla de Windows usados por usuarios con deficiencia visual.
Nota adicional: con posterioridad a la publicación
de este estudio, distintas aportaciones nos han hecho ver la necesidad
de incluir una 5ª recomendación a la lista anterior:
- No usar marcos (frames). Algunos navegadores
usados habitualmente por ciegos como NetTamer y Lynx, no interpretan
bien los marcos por lo que lo único que verán de la página es el
texto situado entre las marcas de <NOFRAME>, que normalmente
suele ser algo así como " Esta página usa marcos, pero su explorador
no los admite ." Una solución de compromiso, en el caso de páginas
estructuradas con un índice a la izquierda (o arriba) y el contenido
del apartado seleccionado a la derecha (o abajo), es incluir entre
las marcas de <NOFRAME> y </NOFRAME> un enlace a la
página del índice, lo que en la mayoría de los casos permitirá una
mínima navegación a pantalla completa y usando la tecla de Retroceder
Página del navegador, sin necesidad de desarrollar una 2ª versión
de las páginas sin marcos.
Recomendaciones
generales
- Estructurar bien el documento con estilo
de títulos (H1, H2, H3...) para diferenciar las secciones y subsecciones
y usar hojas de estilo en cascada (CSS2) para separar el contenido
del formato. Los usuarios con deficiencias visuales se benefician
de un documento estructurado, porque pueden pasar de una sección
a la siguiente, leyendo únicamente los títulos y sin necesidad de
revisar detalladamente cada una de ellas. Por otra parte, CSS2 es
el nuevo estándar recomendado por el W3C y será ampliamente utilizado
en Internet en un futuro inmediato, aunque actualmente sólo lo soportan
las recientes versiones de los navegadores más populares como Explorer
y Netscape.
- Utilizar una herramienta de autor para desarrollar
las páginas web que facilite la incorporación a las mismas de las
opciones de accesibilidad y que no introduzca elementos no estándar
de HTML. Lamentablemente en estos momentos no existe ningún editor
de páginas web que cumpla este requisito al 100%.
- Validar la página con herramientas como
Bobby ( http://www.cast.org/bobby/
) y el validador para HTML 4 del W3C ( http://validator.w3.org/
) para detectar fallos de accesibilidad y elementos no estándar.
Diseño para Todos
Para terminar deseamos enfatizar el hecho de
que una página diseñada teniendo en cuenta los criterios de accesibilidad
es una página mejor para todos los usuarios. Por
ejemplo,
- Las mismas soluciones que facilitan el acceso
a las personas con deficiencia visual pueden proporcionar la base
necesaria para los interfaces sonoros que se requieren cada vez
más para la navegación por la web desde equipos móviles.
- El mismo texto de descripción de video o
audio que proporciona acceso a un usuario sordo, puede ser una eficiente
herramienta de indexación o búsqueda para cualquier usuario. Además
permite que alguien que esté utilizando un kiosco de Internet, o
un cibercafé en un entorno ruidoso pueda navegar correctamente.
Este es el concepto de Diseño para
Todos , que en América se conoce como Universal Design
y en Europa como Design for All . Según esta filosofía
los equipos y servicios deben ser diseñados para satisfacer las necesidades
de todos los usuarios; tanto el usuario medio como usuarios
con distintos perfiles funcionales deben ser capaces de usar el producto
en la medida de lo posible y con el máximo de prestaciones, sin necesidad
de adaptación o diseño especializado adicional.
Según el Trace Center (Connell BR et al.;1995)
los 7 principios que debe cumplir un diseño para ser un verdadero
diseño para todos son los siguientes:
- El diseño debe ser igualmente utilizable
por cualquier tipo de usuario.
- El diseño debe tener la suficiente flexibilidad
para acomodar el mayor rango de preferencias o capacidades
individuales.
- Debe ser simple e intuitivo ,
fácil de comprender independientemente de la experiencia, conocimientos,
idioma, o nivel de concentración del usuario,
- El diseño proporciona la información
necesaria para su uso al usuario independientemente de
las condiciones ambientales y sus capacidades sensoriales.
- El diseño es resistente a los errores.
Minimiza los riesgos y las consecuencias adversas de los
errores accidentales e inintencionados.
- Bajo esfuerzo físico.
El diseño puede ser usado eficientemente y comfortablemente con
un mínimo de fatiga.
- Ergonomía. El entorno proporciona
un espacio y condiciones adecuados para su uso con independencia
del tamaño corporal, postura y movilidad del usuario.
Estos son los criterios que definen un diseño
utilizable por todos. Por supuesto que otros aspectos como
la estética, el coste, la seguridad, o el respeto a la diversidad
deben ser tenidos también en cuenta en el proceso de diseño.
Por tanto, nuestro esfuerzo en facilitar la
accesibilidad a nuestras páginas web redundará en beneficio de todos
los usuarios, y finalmente en una mejor aceptación de nuestro sitio
web a todos los niveles y por todos los grupos de usuarios.