Análisis técnico de Accesibilidad web

Para hacer este análisis, tomamos como ejemplo la página Web del Ayuntamiento de Lugo. Antes de empezar queremos reconocer la gran labor realizada día a día por los profesionales que crean y gestionan este sitio web en concreto. Sabemos que es un trabajo complicado y en constante evolución.

Ficha técnica de la localidad:

  • País: España
  • Comunidad Autónoma: Galicia
  • Provincia: Lugo
  • Comarca: Lugo
  • Geolocalización: 43°01 ′ N, 7°33 ′ O
  • Altitud: 465m
  • Superficie:  9.856 km²
  • Fundación: Siglo I adC
  • Población:  93.853 hab. (INE 2007)
  • Densidad: 9,52 hab./km²
  • Gentilicio: Lucense
  • Web del ayuntamiento: www.lugo.es
  • fuente: wikipedia

Parte técnica, con el fin de definir buenas prácticas en Accesibilidad y Usabilidad genérica de sitios web de e-administración.

El código:

El código es XHTML 1.0 Estricto, en general bien formado. Sin embargo, si pasamos el validador W3C nos encontramos 1661 Errores y 1999 advertencias, aunque estos errores no son graves: "Error: Una entidad de referencia se encontró en el documento, pero no hay referencia de ese nombre definido. La causa más común de este error es no codificar el símbolo de unión en las URL, tal como se describe por el WDG en "símbolo de unión en las URL". Tenga en cuenta que en la mayoría de los documentos, los errores relacionados con la entidad referencias activarán hasta 5 mensajes separados de la Validator. Por lo general, todos estos desaparecen cuando el original se corrija el problema."

Si limpiamos las URL, nos quedamos con 173 errores de validación. Usar elementos obsoletos de HTML para dar formato de presentación como <font>, y estilos CSS en línea suponen un importante inconveniente, porque los lectores de pantalla5 los leen, aportando información redundante y carente de sentido a los usuarios invidentes que visitan la Web con este tipo de software.

5 Lectores de pantalla: “Un lector de pantalla es una aplicación software que trata de identificar e interpretar aquello que se muestra en pantalla. Esta interpretación se representa al usuario mediante sintetizadores de texto a voz, iconos sonoros, o una salida braille.” - http://es.wikipedia.org/wiki/Lector_de_pantalla

En cuanto a la usabilidad, en la home hay espacios desaprovechados y mal aprovechados. Siempre se deben reservar los espacios más importantes, como son los cuadrantes laterales superiores y el cuadrante central superior-medio para incluir la información más relevante para los usuarios, ya sean estos ciudadanos, empresas o turistas.

Veamos un ejemplo (tomado de www.euskadi.net) de buena organización y disposición de elementos clave:

organización y disposición de elementos clave accesibilidad usabilidad

Donde:

  1. Barra de elección de Idioma. Target: (¿para quién es importante?) Turistas.
  2. Menú principal superior horizontal. Target: Todos.
  3. “breadcrumb” migas de pan – dónde se encuentra el usuario. Target: Todos.
  4. Submenú. Target: en este caso Ciudadanos.
  5. Buscador – Muy importante. Target: Todos.
  6. Menú vertical con accesos directos. Target: principalmente Turistas y Empresas.

Como vemos la Web de euskadi.net organiza muy bien la disposición de elementos clave no sólo para un target, sino para varios.

Objetos programados: El JavaScript.

El JavaScript (JS) es correcto en cuanto al uso de la etiqueta <noscript> cuya funcionalidad es informar a los usuarios que no tienen activado el JS en sus navegadores que éste es necesario.

Ejemplo:

<noscript> <p>Se desexa aumentar o tama&nacute;o do texto da web ou aumentar o contraste das cores, visite <a href="#" title=""> a secci&oacute;n de accesibilidade </a>da web, onde se lle falar&aacute; deste e doutros procedementos para mellorar a navegaci&oacute;n polo portal do concello.</p> </noscript>

Recomendamos que siempre que haya un elemento de JavaScript con su elemento <noscript> éste contenga información relacionada con su cometido, que es informar la necesidad de activar el JS en su navegador y, para enriquecer y esta información incluir un enlace con instrucciones sobre cómo activar JavaScript en distintos tipos de navegadores:

<noscript> Tiene el JavaScript deshabilitado, pinche <a href=" http://www.google.es/support/bin/answer.py?answer=23852">AQUI</a> para saber cómo habilitarlo. </noscript>

También nos encontramos con JS que activa enlaces en eventos del ratón y en zonas importantes de la página como es el buscador. Este es un tema muy importante a tener en cuenta, ya que si un usuario no tiene activado el JS y no usa ratón, no podrá buscar en la página.

El punto de verificación 6.3 de la pauta 6, y la pauta 8 nos lo explican:

6.3 Asegúrese de que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts, applets u otros objetos programados. Si esto no es posible, proporcione información equivalente en una página alternativa accesible.

Por ejemplo, asegúrese de que los enlaces que lanzan scripts funcionan cuando éstos se desconecten o no se soporten (Por ejemplo, no utilizar un "javascript" como objetivo de un enlace). Si no es posible hacer la página utilizable sin scripts, proporcione un texto equivalente con el elemento NOSCRIPT, utilice un script de servidor en lugar de un script de cliente o proporcione una página alternativa accesible.
http://www.discapnet.es/web_accesible/wcag10/WAI-WEBCONTENT-19990505_es.html#tech-dynamic-source

8.1 Haga los elementos de programación, tales como scripts y applets, directamente accesibles o compatibles con las ayudas técnicas [Prioridad 1 si la funcionalidad es importante y no se presenta en otro lugar; de otra manera, Prioridad 2.]
http://www.discapnet.es/web_accesible/wcag10/WAI-WEBCONTENT-19990505_es.html#gl-own-interface

El Buscador

http://www.lugo.es/
No existe buscador propiamente dicho, es decir, no existe una página programada para buscar en el sitio, sólo existe un campo de búsqueda en el que: Los resultados de la búsqueda no son demasiado claros, saca una lista bastante larga (puede llegar a 745 resultados) de titulares de secciones aparentemente no relacionadas y no muy claras porque:

  • 1º no marca la/s palaba/s clave buscadas en el resumen del resultado.
  • 2º no tiene paginador.
  • 3º no cuenta con búsqueda avanzada.

El modelo idóneo de búsqueda podría ser el siguiente (basado en euskadi.net): modelo de organizacion optimo en resultados de buscador
Donde:

  1. Nos muestra el número de resultados.
  2. Paginación, tanto arriba como abajo.
  3. Título del recurso enlazado.
  4. Categoría a la que pertenece.
  5. Subcategoría.

(Ver ejemplo funcional)

El mapa del sitio

http://www.lugo.es/cs/Satellite?c=Spark_SecNivel0&cid=1197452620799&color=Rojo&idioma=gl&pagename=Spark%2FSpark_SecNivel0%2FCLPlantMenuWeb&tipoLetra=Texto1

Debe ser un mapa del sitio muy claro, simple y bien categorizado, separado y agrupado por categorías, subcategorías y secciones, de ser posible aprovechando la zona superior central alineando los elementos.

En este sentido ha mejorado cualitativamente con respecto a la versión anterior.