Paso 17.- Mapas de imagen accesibles.
Es sorprendente la cantidad de sitios donde podemos encontrar mapas de imagen. Muchos desarrolladores de sitios Web piensan que colocar uno de estos mapas de imagen es garantía de que la apariencia que ellos quieren dar a su Web llega al visitante tal como él la concibió. Esto puede ser cierto para un gran número de usuarios de la Web que utilizan el navegador más difundido en su última versión. Pero no es válido para todos. El espíritu de la Web va en contra de este rígido pensamiento. Su intención apunta más hacia el control por parte del usuarios de los contenidos que otros han colocado en Internet.
Tampoco sería correcto renunciar a una de las posibilidades que nos ofrece el diseño de páginas Web. Lo importante es hacerlo bien y eso es lo que vamos a ver ahora.
La primera norma es crear mapas de imagen del lado del usuario (del cliente, como gusta decir en ciertos ámbitos). Deberemos hacerlo con el atributo "usemap" (que define en la imagen que el mapa es controlado por el dispositivo del usuario) y no con "ismap" (que lo define como controlado por el servidor). Esto debe ser así para que la distinta manera de presentar la imagen que tienen los navegadores sea la que defina el área de la imagen que dispondrá de un vínculo y que sea el servidor quien defina dichas coordenadas de forma absoluta sin conocer el tipo de navegador y resolución que esta empleando el visitante. Si el servidor, por ejemplo, piensa que el usuario utiliza una resolución de 800 x 600 pixels, pero éste la utiliza mayor o menor, puede estar definiendo el área sensible con el vínculo fuera de la imagen que lo presenta o un lugar distinto, con lo que puede provocar graves equivocaciones.
La segunda cuestión es dar alternativas textuales tanto a la imagen de la que haremos el mapa, como a cada una de las zonas sensibles que éste contenga. Veamos como se hace con un ejemplo:
Supongamos que, por la razón que sea, queremos colocar como pie de nuestra bitácora y en todas sus páginas un mapa de imagen que sirva para contener los vínculos de navegación principales de nuestro bitácora. Blogger nos permite hacer esto, ya que podemos colocar una imagen y definir áreas o zonas sensibles que sirvan como vínculos (aunque lo tendremos que hacer mediante el editor HTML, insertando manualmente el código fuente). Por hacerlo sencillo, supongamos que en la imagen colocamos tres zonas sensibles para enlazar con la página principal de la bitácora, con la que contiene el currículo del autor y con otra que tiene la tabla de contenidos ordenados por temas. En principio podríamos tener un código fuente similar a este (recordemos que siempre se utilizará un mapa de imagen del lado del usuario):
Todas las reglas para escribir un buen texto alternativo para las imágenes, como vimos en el paso 15, son aplicables a los mapas de imagen. También se puede añadir un title="" a la imagen principal y a cada área para si queremos eliminar el "toolpip" [cuadro emergente] en los navegadores visuales.
Una última advertencia. Los navegadores sólo texto no son capaces de mostrar los textos alternativos de las zonas sensibles de un mapa de imagen. La única posibilidad de hacerlo accesible es proporcionar un listado de los enlaces del mapa de imagen en forma textual anexo al mismo. Y ¿entonces para que hago el mapa de imagen si al final tengo que poner una lista de enlaces? Ese es uno de los problemas de hacer un mapa de imagen. Es posible que la mejor opción sea no ponerlo y buscar una alternativa vistosa y más accesible.
Tampoco sería correcto renunciar a una de las posibilidades que nos ofrece el diseño de páginas Web. Lo importante es hacerlo bien y eso es lo que vamos a ver ahora.
La primera norma es crear mapas de imagen del lado del usuario (del cliente, como gusta decir en ciertos ámbitos). Deberemos hacerlo con el atributo "usemap" (que define en la imagen que el mapa es controlado por el dispositivo del usuario) y no con "ismap" (que lo define como controlado por el servidor). Esto debe ser así para que la distinta manera de presentar la imagen que tienen los navegadores sea la que defina el área de la imagen que dispondrá de un vínculo y que sea el servidor quien defina dichas coordenadas de forma absoluta sin conocer el tipo de navegador y resolución que esta empleando el visitante. Si el servidor, por ejemplo, piensa que el usuario utiliza una resolución de 800 x 600 pixels, pero éste la utiliza mayor o menor, puede estar definiendo el área sensible con el vínculo fuera de la imagen que lo presenta o un lugar distinto, con lo que puede provocar graves equivocaciones.
La segunda cuestión es dar alternativas textuales tanto a la imagen de la que haremos el mapa, como a cada una de las zonas sensibles que éste contenga. Veamos como se hace con un ejemplo:
Supongamos que, por la razón que sea, queremos colocar como pie de nuestra bitácora y en todas sus páginas un mapa de imagen que sirva para contener los vínculos de navegación principales de nuestro bitácora. Blogger nos permite hacer esto, ya que podemos colocar una imagen y definir áreas o zonas sensibles que sirvan como vínculos (aunque lo tendremos que hacer mediante el editor HTML, insertando manualmente el código fuente). Por hacerlo sencillo, supongamos que en la imagen colocamos tres zonas sensibles para enlazar con la página principal de la bitácora, con la que contiene el currículo del autor y con otra que tiene la tabla de contenidos ordenados por temas. En principio podríamos tener un código fuente similar a este (recordemos que siempre se utilizará un mapa de imagen del lado del usuario):
Para hacer nuestro mapa accesible tendremos que colocar atributo "alt" tanto a la imagen completa, como a cada una de las zonas sensibles definidas dentro del mismo mediante la etiqueta <area>. Tendría que quedarnos algo así:
<img src:"MiMapa.jpg" width="500" height="200" usemap="#map">
<map name="Map">
<area shape="rect" coords="203,114,258,129" href="principal.html">
<area shape="rect" coords="277,114,348,129" href="autor.html">
<area shape="rect" coords="364,114,401,129" href="contenidos.html">
</map>
Es algo relativamente sencillo y que en herramientas de diseño, como Dreamweaver de Macromedia, se puede hacer de forma interactiva en el inspector de preferencias.
<img src:"MiMapa.jpg" width="500" height="200" usemap="#map" alt="Navegación por mi bitácora">
<map name="Map">
<area shape="rect" coords="203,114,258,129" href="principal.html" alt="Página principal">
<area shape="rect" coords="277,114,348,129" href="autor.html" alt="Conoce al autor">
<area shape="rect" coords="364,114,401,129" href="contenidos.html" alt="Tabla de contenidos">
</map>
Todas las reglas para escribir un buen texto alternativo para las imágenes, como vimos en el paso 15, son aplicables a los mapas de imagen. También se puede añadir un title="" a la imagen principal y a cada área para si queremos eliminar el "toolpip" [cuadro emergente] en los navegadores visuales.
Una última advertencia. Los navegadores sólo texto no son capaces de mostrar los textos alternativos de las zonas sensibles de un mapa de imagen. La única posibilidad de hacerlo accesible es proporcionar un listado de los enlaces del mapa de imagen en forma textual anexo al mismo. Y ¿entonces para que hago el mapa de imagen si al final tengo que poner una lista de enlaces? Ese es uno de los problemas de hacer un mapa de imagen. Es posible que la mejor opción sea no ponerlo y buscar una alternativa vistosa y más accesible.
<< Home