Hace unos días me topé con la página de Meteorología de la web de la Confederación Hidrográfica del Segura. En esa página me llamó la atención el mapa de imagen, porque tiene una barra de enlaces que proporciona la misma funcionalidad.
¿Por qué habían puesto esa barra de enlaces los desarrolladores de ese sitio web? ¿Para ofrecer una alternativa y que el mapa de imagen fuera accesible? Seguramente, casi seguro que sí... pero desde hace tiempo no hace falta hacer eso: un mapa de imagen bien hecho es accesible. Pero claro, este mapa de imagen NO ESTABA BIEN HECHO.
Todo eso lo explico en el vídeo ¿Por qué es importante escribir código correcto? El extraño caso de la CHS:
Y la transcripción del vídeo:
Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y este vídeo forma parte de una serie de videotutoriales dedicados a la accesibilidad web. En este vídeo vamos a ver un error que tiene una página del sitio web de la Confederación Hidrográfica del Segura, y cómo afecta este error al funcionamiento de la página y a su accesibilidad.
Recientemente me he topado con el sitio web de la Confederación Hidrográfica del Segura.
En el pie de página de este sitio web podemos ver todos estos logos, que nos dicen que el HTML y el CSS de la página son válidos y que cumple el nivel AA de accesibilidad del W3C.
¿Es verdad que el código es válido? ¿Es verdad que la página es accesible?
Vamos a revisar esta página, la página que permite consultar la meteorología de las provincias que pertenecen a la Confederación Hidrográfica del Segura. En esta página podemos encontrar este mapa.
Al ver este mapa me llamó la atención esta barra de navegación.
¿Para qué incluir esta barra de navegación si un mapa de imagen es accesible si está bien hecho?
Vamos a probar este mapa de imagen con dos navegadores, con Google Chrome y con Microsoft Internet Explorer.
Con Google Chrome podemos ver que al situar el cursor del ratón encima del mapa, aparece el típico “tool tip” que nos proporciona información sobre el destino del enlace.
Por ejemplo, aquí estoy situado sobre Albacete y me dice “Ver predicción meteorológica de Albacete”. Y si aquí me sitúo sobre la provincia de Alicante me dice “Ver predicción meteorológica de Alicante/Alacante”. Además, al pulsar fíjate en la barra de direcciones del navegador, cómo cambia la dirección y se desplaza al destino, el destino que está situado en la misma página web.
Sin embargo, al realizar lo mismo en el navegador Microsoft Internet Explorer 10, fíjate que al situar el cursor del ratón encima del mapa no aparece ninguna información, y el cursor no cambia a una mano para indicar que se puede pulsar. Además, si pulso, fíjate que no pasa nada.
El mapa de imagen no está funcionando. ¿Qué está ocurriendo?
Aquí tenemos el código del mapa de imagen. Podemos ver que hay un error: la referencia al mapa de imagen en la imagen está mal, porque le falta la almohadilla en el nombre.
¿Cómo?
El sitio web de la Confederación Hidrográfica del Segura emplea XHTML 1.0, que son las mismas etiquetas y la misma semántica que HTML 4.01, pero escrito con la sintaxis más estricta de XML.
Si consultamos la recomendación oficial de HTML 4.01 y buscamos la definición del atributo usemap, vemos que nos dice que el valor de usemap debe coincidir con el valor del atributo name del elemento map asociado. Por tanto, podría parecer que está bien hecho, porque en la página sí que coincide el valor.
Pero nos dice algo más, también nos dice que tiene que ser una URI. Y por ser una URI, si hace referencia a un elemento que está en la misma página, debe comenzar con el carácter almohadilla.
Si no nos queda claro, se pueden consultar los ejemplos que hay en la misma página de la recomendación de HTML. Podemos ver que en todos los ejemplos se hace uso del carácter almohadilla.
En la especificación de HTML5 se explica mejor el uso del atributo usemap.
Ahora se indica que el valor de usemap debe ser una referencia de tipo “hash-name”,
que significa que debe comenzar con el símbolo almohadilla.
Vamos a comprobar que al añadir la almohadilla, el mapa de imagen funciona correctamente en todos los navegadores.
Para estudiar este error he aislado el código de la página web que crea el mapa de imagen. Aquí está el código HTML que he copiado de la página de la Confederación Hidrográfica del Segura.
El problema está en este atributo usemap que no lleva la almohadilla. Coincide su valor con el atributo name del mapa de imagen, pero debe de llevar una almohadilla.
Vamos a comprobar este ejemplo en Google Chrome. Recargo la página y fíjate como sí que funciona, se activan las distintas zonas del mapa, pero si pulso la tecla tabulador no puedo desplazarme al mapa de imagen, el mapa de imagen tiene que ser accesible por teclado.
Y en este caso fíjate como los enlaces, que simplemente se van destacando son los de esta barra pero no se activa el mapa de imagen.
Lo mismo ocurre en Internet Explorer. Recargo la página, fíjate que no funciona el mapa de imagen. Y si pulso la tecla tabulador, solamente me desplazo sobre esta barra.
Ahora voy a modificar el mapa de imagen y en el atributo usemap simplemente le voy a poner la almohadilla. Y ahora verás como todo cambia.
¿Moraleja?
Hasta los mismos validadores pueden fallar. En caso de duda, consulta siempre las especificaciones oficiales.
Si quieres saber más sobre la importancia de escribir código HTML correcto, te recomiendo que veas mi vídeo “HTML5: ¿Por qué es importante escribir código correcto?”, compuesto de tres partes.
Y con esto finaliza este videotutorial que ha mostrado un error extraño que presenta una página de la Confederación Hidrográfica del Segura.
Si necesitas más información o quieres contactar conmigo, en mis páginas web http://accesibilidadweb.dlsi.ua.es y en http://desarrolloweb.dlsi.ua.es podrás encontrar más información sobre la accesibilidad web y el desarrollo web o también puedes contactar directamente conmigo a través de mi dirección de correo electrónico sergio.lujan@ua.es o a través de mi cuenta de Twitter @sergiolujanmora.
Muchas gracias por tu atención.
No hay comentarios:
Publicar un comentario