Día 24: Proveer texto equivalente para los mapas de imágenes
Me sorprendió el encontrar varios sitios de Internet de alto perfil que usan mapas de imágenes para los gestores. Yo no los uso, y pienso que no están incluidos en ninguna plantilla por defecto de registros de apuntes, pero aparentemente muchas personas los han entendido. Si no sabe lo que es un mapa de imagen, Leslie Harpold usa uno para los vínculos de navegación en la parte inferior de su sitio de Internet. Es solo una imagen, pero al hacer clic en la palabra "archivos" te lleva a una página, "por categoría", te lleva a otra página, y así en adelante.
Los mapas de imágenes suenan como una pesadilla de accesibilidad, pero en realidad no lo son. De la misma forma en que cada imagen necesita texto equivalente, cada mapa de imagen y cada área en que se puede hacer clic en un mapa de imagen necesita tener texto equivalente. Puede proveer texto alt para la imagen en si (en la etiqueta <img>), y para cada área en que se puede hacer clic en el mapa de imágenes (en la etiqueta <area> asociada con <map>, que define donde se encuentran las áreas de clic y hacia donde van).
Quién se beneficia?
Marcus se beneficia. Lynx muestra el texto
altde la imagen como un vínculo. Cuando Marcus presiona ENTER, Lynx muestra una página separada que enlista los vínculos del mapa de imágenes. Cada vínculo esta etiquetado por el textoaltde la etiquetaareaen el mapa de imágenes. Sin textoalt, Lynx muestra la dirección del vínculo de cadaarea, lo que puede ser incomprensible.Si Leslie no tuviese texto
alten su mapa de imágenes, este es el vínculo que vería Marcus en la parte inferior de su página:[USEMAP:hpfooter.gif]
Al seguir este vínculo Marcus iría a una página que enlista todos los vínculos del mapa de imágenes. Sin texto
alt, Lynx podría mostrar solamente cada URL, lo que se vería así:[USEMAP:hpfooter.gif] MAP: http://leslie.harpold.com/#Map 1. http://leslie.harpold.com/archives.html 2. http://leslie.harpold.com/category/ 3. http://leslie.harpold.com/links.html 4. http://leslie.harpold.com/leslie.html 5. http://www.moveabletype.orgSin embargo, en realidad, Leslie tiene texto
altapropiado para cada área de su mapa de imágenes. Así que esto es lo que Marcus realmente ve en la parte inferior de su página de inicio:Vínculos de navegación del sitio
Al seguir este vínculo Marcus va a una página que se ve así:
Vínculos de navegación del sitio MAP: http://leslie.harpold.com/#Map 1. previamente... 2. por categoría 3. acerca del sitio 4. acerca de leslie 5. Powered by Movable Type- Michael se beneficia. Links muestra el texto
altde la imagen como un vínculo. Cuando Michael presiona ENTER, Lynx muestra una página separada que enlista los vínculos del mapa de imágenes. Cada vínculo esta etiquetado por el textoaltde la etiquetaareaen el mapa de imágenes. Sin textoalt, Lynx muestra la dirección del vínculo de cadaarea, lo que puede ser incomprensible. - Jackie se beneficia. JAWS leerá el texto
altde cadaareadel mapa de imágenes, en el orden en el que están definidos en su código fuente HTML. Jackie puede presionar ENTER para seguir el vínculo. Sin el textoalt, JAWS lee la dirección de cadaarea, lo que es casi seguramente incomprensible (Alguna vez ha intentado leerle una dirección de correo larga a alguien por el teléfono?). - Lillian se beneficia. Internet Explorer Explorer muestra una información de herramienta sobre cada
areacon vínculos en el mapa de imágenes. - Google se beneficia. El Googlebot clasifica el texto
altde la imagen principal y de cadaareadentro del mapa de imágenes. El textoaltes un factor en la determinación la relevancia de su página con respecto a las palabras clave, y también la relevancia de cada vínculo con las palabras clave contenidas en textoaltdelarea.
Como hacerlo
Si tiene un mapa de imagen como este:
<img src="footer.gif" width="500" height="212" usemap="#Map">
<map name="Map">
<area shape="rect" coords="203,114,258,129" href="/archives.html">
<area shape="rect" coords="277,113,348,129" href="/category/">
<area shape="rect" coords="364,113,401,128" href="links.html">
<area shape="rect" coords="418,114,488,130" href="leslie.html">
<area shape="rect" coords="-4,190,131,210" href="http://www.moveabletype.org">
</map>
Añada texto alt a la imagen principal y a cada area vinculada del mapa de imágenes, como sigue:
<img alt="Vínculos de navegación del sitio" src="footer.gif" width="500" height="212" usemap="#Map">
<map name="Map">
<area alt="previamente..." shape="rect" coords="203,114,258,129" href="/archives.html">
<area alt="por categoría" shape="rect" coords="277,113,348,129" href="/category/">
<area alt="acerca del sitio" shape="rect" coords="364,113,401,128" href="links.html">
<area alt="acerca de leslie" shape="rect" coords="418,114,488,130" href="leslie.html">
<area alt="Powered by Movable Type" shape="rect" coords="-4,190,131,210" href="http://www.moveabletype.org">
</map>
Todas las reglas acerca de la escritura de texto alt escritura de texto alt apropiado para imágenes también aplican para los mapas de imágenes. También podría añadir title="" a la imagen principal y a cada <area> para suprimir la información de herramienta de los navegadores visuales.
Cosas que no debe hacer
No cree mapas de imágenes del lado del servidor, imágenes que pasan las coordenadas exactas de cada clic al servidor para procesamiento adicional. Son completamente inaccesibles a usuarios de JAWS como Jackie, usuarios de navegadores exclusivamente de texto como Michael y Marcus, usuarios que solo pueden usar el teclado como Bill, y buscadores como Google. Si debe usar obligatoriamente mapas de imágenes de servidor, añada una barra de navegación textual debajo de estos que incluya vínculos de texto real hacia cada página a la que pueda ir haciendo clic en el mapa de imágenes.
Lectura añadida
- Leslie Harpold: The Historical Present. Leslie generosamente me permitió usar su registro de apuntes como base de mi ejemplo de hoy.