En curso lleva a: Índice estamos en: Pauta 2

En curso...

Imagen

Comunicación

Diseño

Accesibilidad

Nuevas Tecnologías

 

Aplicando las Pautas

 

2.- Mapas de imagen. Use MAP de tipo cliente y texto para las zonas activas.

Un mapa de imagen es una imagen que tiene zonas activas y que cuando el usuario selecciona una de ellas ocurre algo, como por ejemplo, se enlaza con otra página.

La directriz indica que se utilicen mapas de tipo cliente (con "USEMAP") que hacen que el navegador directamente procese la dirección URL de destino de cada zona activa, en vez de aquellos en los que el servidor calcula la dirección URL de destino del hipervínculo según las coordenadas del puntero del ratón, llamados de tipo servidor ("ISMAP"), porque esto últimos requieren de un periférico de entrada específico. En cualquier caso tanto unos como otros pueden y deben hacerse accesibles.

Tanto si se usan mapas de tipo cliente como de tipo servidor, es conveniente ofrecer enlaces en formato texto a cada una de las direcciones a las que apuntan las zonas de los mapas, veasé el ejemplo. Si el usuario está utilizando un navegador que no descarga ima´genes, lo único que verá del mapa de imagen será: "[USEMAP]" si no se ha colocado el texto alternativo al mapa o en el mejor de los casos el texto alternativo del mismo, por tanto una relación de enlaces en formato texto será la única manera de que pueda acceder a las distintas páginas a las que apuntan las secciones del mapa.

 

Procedimiento para hacer accesibles los mapas de tipo cliente

En Frontpage: No he encontrado la manera se poner el texto alternativo automáticamente, pero se puede hacer yendo a la vista HTML e incluyendo: 'Alt=""' (con el texto alternativo correspondiente) en el código fuente de cada una de las zonas activas: "<area href=""...>"

En HotMetal: Al insertar la imagen, ya sea usando el menú insertar/imagen o bien el botón correspondiente, se selecciona y entonces aparece una barra de botones llamada "Image Mapping" en la que se ofrecen varias herramientas para crear las zonas activas, una vez creada una zona activa en la imagen base, automáticamente aparece un cuadro de diálogo llamado "Enter URL information" donde se indica la dirección a la que debe apuntar la zona y en el que hay un campo para poner el texto alternativo, al que se puede acceder con "alt+a".

En HomeSite: En la versión 4.5 hay una función para crear mapas de imagen, que se presenta en un botón [ Botón en HomeSite para crear mapas. ] y en el menú "Tools". Con "alt+t" más "alt+i" se llega al cuadro de diálogo para indicar el origen de la imagen base y ponerle un nombre al mapa, una vez hecho esto y aceptar, aparece el cuadro de diálogo: "Image map editor" en el que ya aparece la imagen base y los botones que permiten crear en ella las áreas o zonas activas. Al crear una zona activa en la imagen aparece el cuadro de diálogo llamado "Tag editor - AREA" en el que se debe indicar la dirección a la que apuntará el área y en el que hay un campo para el texto alternativo de ese área.

En Dreamwever: Insertar la imagen, desde el menú "insertar" o con ctrl+alt+i, una vez insertada seleccionarla y expandir el inspector de propiedades (pinchando en la flecha inferior derecha del mismo) que tiene un campo llamado "Map" en el que debe ponerse el nombre que se le quiere dar al mapa. Para crear las áreas activas seleccione, en el inspector de propiedades, una de las herramientas con forma de cuadrado, círculo o polígono; al marcar un área, con una de estas herramientas, aparece automáticamente el inspector de propiedades de puntos calientes o "hotspot property inspector", en el que hay un campo llamado "Alt" precisamente para poner el texto alternativo de ése área en concreto.

En Amaya: Insertar una imagen (desde el menú "types" o desde el botón a tal efecto o con ctrl+t) y para crear el área activa se selecciona en el menú "types" el submenú "area" y en él el tipo de polígono que se quiere usar para dar forma al área. En cuanto se crea el área sale automáticamente un cuadro de diálogo para poner el texto alternativo. Entonces se selecciona con el puntero el área creada y aparece un cuadro de diálogo para indicar la dirección a la que debe apuntar o enlazar ése área.

 

Buenas prácticas

Ejemplo:

Golf Tenis. Motociclismo. Natación. Nuestras secciones: Golf, Motociclismo, Natación y Ténis; seleccione una de las fotos o el enlace en texto de debajo.

|Golf| |Motos| |Natación| |Tenis|

El código de este ejemplo es:

<map name="entrada">
<area alt="Golf" shape="poly"
coords="147,36,167,36,183,53,197,68,197,82,198,178,167,
175,159,164,173,153,178,146,177,140,172,130,172,122,
172,118,154,123,162,86,159,65,152,61,146,51"
href="ejmap.htm#golf">
<area alt="Tenis." shape="poly"
coords="76,39,85,37,92,37,102,46,101,54,107,54,124,67,
134,83,132,99,123,112,132,133,137,143,129,160,99,160,
102,147,109,142,97,120,96,108,89,116,82,116,72,105,
78,88,78,78,78,67,80,64,75,58,75,56,70,48"
href="ejmap.htm#tenis">
<area alt="Motociclismo." shape="poly"
coords="34,102,28,115,27,127,26,142,32,156,34,177,45,
181,59,171,68,176,85,178,92,181,105,185,105,175,93,
164,96,151,81,130,71,119,61,118,55,115,52,105,45,102,
40,102" href="ejmap.htm#motos">
<area alt="Natación." shape="poly"
coords="19,7,17,22,25,38,25,49,25,53,21,62,16,75,10,89,
7,100,8,122,8,137,4,160,4,176,12,179,20,173,22,160,
26,147,25,120,27,109,35,99,41,96,42,84,46,73,58,63,
68,53,65,43,49,19,35,19" href="ejmap.htm#nata">
</map>
<img src="depor.jpg" width="200" height="200"
border="0" usemap="#entrada" alt="Nuestras secciones: Golf, Motociclismo, Natación y Ténis; seleccione una de las fotos o el enlace en texto de debajo.">
<p>|<a href="ejmap.htm#golf" title="Información para Golfistas.">Golf</a>| |<a href="ejmap.htm@moto" title="Información para motociclistas">Motos</a>| |<a href="ejmap.htm@nata" title="información para nadadores.">Natación</a>| |<a href="ejmap.htm@tenis" title="Información para tenistas.">Tenis</a>|</p>

Fin del ejemplo

 

Malas prácticas

Lo que es totalmente incorrecto e inaccesible es presentar un mapa sin texto alternativo para las zonas activas y no ofrecer una acceso alternativo a las zonas a través de enlaces en formato texto.

Ejemplo:

El código de este ejemplo es:

<map name="Barradenavegación">
<area alt="" shape="poly"
coords="238,3,220,16,227,36,188,55,200,76,221,78,235,
82,246,88,272,83,290,72,290,56,292,32,300,22,296,8,
284,4,266,10,252,19,249,5" href="mapas.htm#malas">
<area alt="" shape="poly"
coords="185,74,177,63,182,45,178,41,195,12,181,2,162,2,
137,27,127,12,104,36,114,42,88,56,87,76,116,80,126,
88,149,88,157,78" href="mapas.htm#malas">
<area alt="" shape="poly"
coords="80,80,87,47,61,34,81,18,33,2,29,23,1,16,0,55,
12,78,24,86,49,86" href="mapas.htm#malas">
</map>
<img src="navbar.jpg" width="300" height="90"
border="0" usemap="#Barradenavegación">

Fin del ejemplo

 

Para verificar el trabajo

Con Internet Explorer, al poner el puntero del ratón sobre una zona activa aparecerá una etiqueta, junto al puntero, con el texto alternativo de esa zona, si existe; pero hay que recordar que hay una gran variedad de navegadores y no todos funcionan igual, razón por la cual al diseñar una página debemos asegurarnos de que será igulmente accesible con cualquier navegador. Por tanto, lo mejor es utilizar las herramientas de verificación que recomendamos: el TAW, Lynxme, Wave y Bobby.

Anterior Flecha que apunta hacia la izquierda. Índice Flecha que apunta a la derecha. Siguiente

Para hacer sus aportaciones, comentarios o sugerencias, envíe un mensaje a la autora: Emmanuelle Gutiérrez y Restrepo


Creada: 15 de diciembre de 2000