Validación HTML: El atributo "shape" en el elemento "a" es obsoleto. Usa "area" en lugar de "a" para los mapas de imagen.

Acerca de este problema HTML

En versiones anteriores de HTML, el elemento <a> soportaba un atributo shape (con valores como rect, circle, poly, y default) para definir regiones de puntos de acceso clicables dentro de un mapa de imagen. Esta funcionalidad fue eliminada de la especificación HTML, y el atributo shape ahora se considera obsoleto en elementos <a>.

La forma moderna y correcta de crear mapas de imagen es usar el elemento <map> que contenga uno o más elementos <area>. Cada elemento <area> acepta un atributo shape junto con coords para definir regiones clicables, y un href para especificar el destino del enlace. El elemento <img> se asocia entonces con el mapa a través de su atributo usemap.

Por qué esto importa

Cumplimiento de estándares: El atributo shape en <a> no es parte del estándar HTML vivo actual. Usarlo produce un error de validación y depende de comportamiento obsoleto que los navegadores no están obligados a soportar.
Compatibilidad del navegador: Los navegadores modernos implementan mapas de imagen a través de <map> y <area>. Usar la sintaxis obsoleta <a shape="..."> puede no funcionar de forma confiable en todos los navegadores.
Accesibilidad: El elemento <area> está diseñado para trabajar con tecnologías de asistencia en el contexto de mapas de imagen. Soporta el atributo alt, que proporciona alternativas de texto para cada región clicable — algo esencial para usuarios de lectores de pantalla.

Cómo solucionarlo

Elimina el atributo shape de cualquier elemento <a>.
Crea un elemento <map> con un atributo name único.
Dentro del <map>, añade elementos <area> con los atributos shape, coords, href, y alt apropiados.
Asocia el mapa con un elemento <img> usando el atributo usemap, haciendo referencia al name del mapa con un prefijo #.

Ejemplos

Incorrecto: usar `shape` en un elemento `<a>`

<img src="workspace.png" usemap="#workspace" alt="Workspace diagram" width="400" height="300">
<map name="workspace">
  <a shape="rect" coords="0,0,200,150" href="/monitor.html">Monitor</a>
  <a shape="circle" coords="300,200,50" href="/lamp.html">Desk lamp</a>
</map>

Esto desencadena el error de validación porque el atributo shape es obsoleto en elementos <a>.

Correcto: usar elementos `<area>` en su lugar

<img src="workspace.png" usemap="#workspace" alt="Workspace diagram" width="400" height="300">
<map name="workspace">
  <area shape="rect" coords="0,0,200,150" href="/monitor.html" alt="Monitor">
  <area shape="circle" coords="300,200,50" href="/lamp.html" alt="Desk lamp">
</map>

Cada elemento <area> define una región clicable con shape y coords, enlaza a un destino con href, y proporciona una etiqueta accesible con alt. El elemento <area> es un elemento vacío (no necesita etiqueta de cierre), y el atributo alt es requerido cuando href está presente.

Valores de `shape` soportados en `<area>`

Valor	Descripción	Formato de `coords`
`rect`	Un rectángulo	`x1,y1,x2,y2`
`circle`	Un círculo	`centroX,centroY,radio`
`poly`	Un polígono definido por múltiples puntos	`x1,y1,x2,y2,...,xn,yn`
`default`	Toda el área de imagen no cubierta por otras formas	No se necesita `coords`

Ejemplo con múltiples tipos de forma

<img src="floorplan.png" usemap="#floorplan" alt="Office floor plan" width="600" height="400">
<map name="floorplan">
  <area shape="rect" coords="10,10,200,150" href="/conference-room.html" alt="Conference room">
  <area shape="circle" coords="400,300,60" href="/break-room.html" alt="Break room">
  <area shape="poly" coords="300,10,350,80,250,80" href="/lobby.html" alt="Lobby">
  <area shape="default" href="/office-overview.html" alt="General office area">
</map>

Este ejemplo demuestra los cuatro tipos de forma trabajando juntos en un solo mapa de imagen, con texto alt apropiado para cada región clicable.