Addaw, ir a inicio Donar

Técnica HTML WCAG 2.2

H24Dar texto alternativo a cada zona clicable de un mapa de imagen

Nombre oficial en el W3C: Proporcionar alternativas textuales para los elementos area de los mapas de imagen

En pocas palabras

Un mapa de imagen es una imagen dividida en zonas que son enlaces, como un mapa con las sedes de una entidad. Cada zona se marca con un elemento area, y cada area necesita un atributo alt que diga adónde lleva. La imagen completa también necesita su propio alt.

Por qué es importante

Una persona ciega no ve las zonas de la imagen. El lector de pantalla (programa que lee en voz alta la pantalla) solo puede anunciar cada zona por su alt.

Si falta, anuncia la dirección del enlace o nada. La persona no sabe qué es cada zona. Tampoco sirve un texto genérico como «zona 1».

Cómo se hace

  1. Ponga en la etiqueta <img> un alt que diga qué es la imagen en conjunto, por ejemplo «Mapa de sedes».
  2. Añada a cada <area> con href un alt que diga el destino del enlace: «Sede de Murcia».
  3. Use textos breves y distintos para cada zona.
  4. Si el mapa es complejo, valore sustituirlo por una lista de enlaces normales. Es más fácil de usar en el móvil y al ampliar.

Cómo comprobarlo

  1. Busque en el código los elementos <map> y <area>.
  2. Compruebe que cada <area> tiene un alt que describe su destino.
  3. Compruebe que la imagen asociada (la que lleva usemap) también tiene alt.
  4. Recorra las zonas con Tab y un lector de pantalla: cada una debe anunciar su texto.

Ejemplo

Mapa de sedes en el que cada zona lleva a la página de una oficina.

<img src="mapa-sedes.png" alt="Mapa de sedes" usemap="#sedes">
<map name="sedes">
  <area shape="rect" coords="10,10,120,80"
        href="/sedes/murcia" alt="Sede de Murcia">
  <area shape="rect" coords="130,10,240,80"
        href="/sedes/cartagena" alt="Sede de Cartagena">
  <area shape="rect" coords="10,90,120,160"
        href="/sedes/lorca" alt="Sede de Lorca">
</map>
Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica H24 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

Documentos HTML que contienen elementos area.

Descripción

El objetivo de esta técnica es proporcionar alternativas textuales que cumplan el mismo propósito que las regiones seleccionables de un mapa de imagen. Un mapa de imagen es una imagen dividida en regiones seleccionables definidas mediante elementos area. Cada área es un enlace a otra página web o a otra parte de la página web actual. El atributo alt de cada elemento area cumple el mismo propósito que el área seleccionable de la imagen.

Ejemplos

Este ejemplo usa el atributo alt del elemento area para proporcionar un texto que describe el propósito de las áreas del mapa de imagen.

<img src="welcome.gif" usemap="#map1" 
     alt="Areas in the library. Select an area for more information on that area."> 
<map id="map1" name="map1">
  <area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference">
  <area shape="rect" coords="34,34,100,100" href="media.html" alt="Audio visual lab">
</map>

Pruebas

Procedimiento

Para cada elemento area de un mapa de imagen:

  1. Comprobar que el elemento area tiene un atributo alt.
  2. Comprobar que la alternativa textual especificada por el atributo alt cumple el mismo propósito que la parte de la imagen del mapa de imagen a la que hace referencia el elemento area del mapa de imagen.

Resultados esperados

  • Las comprobaciones anteriores son verdaderas.

Recursos

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica H24 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.