DCU

Diseño Centrado en el Usuario

Diseño de páginas web accesibles

Tarea º3

21 de julio del 2005

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

  1. 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.
  2. 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.
  3. 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).
  4. 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

  1. 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.
  2. 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%.
  3. 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:

  1. El diseño debe ser igualmente utilizable por cualquier tipo de usuario.
  2. El diseño debe tener la suficiente flexibilidad para acomodar el mayor rango de preferencias o capacidades individuales.
  3. Debe ser simple e intuitivo , fácil de comprender independientemente de la experiencia, conocimientos, idioma, o nivel de concentración del usuario,
  4. El diseño proporciona la información necesaria para su uso al usuario independientemente de las condiciones ambientales y sus capacidades sensoriales.
  5. El diseño es resistente a los errores. Minimiza los riesgos y las consecuencias adversas de los errores accidentales e inintencionados.
  6. Bajo esfuerzo físico. El diseño puede ser usado eficientemente y comfortablemente con un mínimo de fatiga.
  7. 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.


GD |

Home | W3C | Escuela de Arquitectura y Diseño PUCV [e.ad] | mapa del sitio

Ultima actualización 17 de Agosto del 2005