Validación HTML: Valor incorrecto "polygon" para el atributo "shape" en el elemento "area".

Acerca de este problema HTML

El atributo shape en un elemento <area> le dice al navegador qué tipo de región clicable definir dentro de un mapa de imagen. El estándar HTML actual (WHATWG) limita estrictamente este atributo a cuatro valores:

rect — un rectángulo, definido por cuatro coordenadas: x1,y1,x2,y2 (esquinas superior-izquierda e inferior-derecha)
circle — un círculo, definido por tres valores: x,y,r (punto central y radio)
poly — un polígono, definido por una serie de pares de coordenadas x,y que trazan los vértices de la forma
default — toda el área de la imagen (no se necesita coords)

El valor "polygon" es un error común — es intuitivo y se usa en otros contextos como SVG — pero no es HTML válido. Los navegadores pueden volver silenciosamente a default o ignorar la región completamente cuando encuentran un valor shape no reconocido, lo que significa que los usuarios podrían perder la capacidad de hacer clic en esa área del mapa de imagen.

Por qué esto importa

Compatibilidad del navegador: Los navegadores no están obligados a manejar valores shape inválidos de manera elegante. Mientras algunos pueden adivinar tu intención, otros pueden renderizar la región clicable incorrectamente o no hacerlo en absoluto.
Accesibilidad: Los lectores de pantalla y tecnologías de asistencia dependen de un marcado válido para transmitir las regiones del mapa de imagen a los usuarios. Un valor shape inválido puede hacer que una región sea invisible para estas herramientas, rompiendo la navegación por teclado y los anuncios de texto alternativo.
Cumplimiento de estándares: Usar valores de atributo válidos asegura que tu marcado se comporte de manera predecible en todos los navegadores y pase las verificaciones de validación automatizada.

Cómo solucionarlo

Reemplaza shape="polygon" con shape="poly". La sintaxis del atributo coords se mantiene igual — una lista separada por comas de pares x,y que representan cada vértice del polígono, en orden. Los valores de coordenadas están en píxeles CSS relativos a las dimensiones intrínsecas (naturales) de la imagen.

También asegúrate de que cada elemento <area> incluya:

Un atributo href para hacer que la región sea un enlace
Un atributo alt para accesibilidad (requerido cuando href está presente)

Ejemplos

Inválido: usando `shape="polygon"`

<img src="plan.png" usemap="#floormap" alt="Floor plan" width="400" height="300">
<map name="floormap">
  <area shape="polygon" coords="10,10,80,10,80,60,10,60" href="room-a.html" alt="Room A">
</map>

El validador reporta: Valor incorrecto “polygon” para el atributo “shape” en el elemento “area”.

Corregido: usando `shape="poly"`

<img src="plan.png" usemap="#floormap" alt="Floor plan" width="400" height="300">
<map name="floormap">
  <area shape="poly" coords="10,10,80,10,80,60,10,60" href="room-a.html" alt="Room A">
</map>

Cambiar "polygon" por "poly" resuelve el error. Los cuatro pares de coordenadas (10,10, 80,10, 80,60, 10,60) definen un polígono rectangular. El navegador automáticamente cierra la forma conectando el último punto de vuelta al primero.

Referencia: todos los valores `shape` válidos

<img src="diagram.png" usemap="#shapes" alt="Shape examples" width="500" height="400">
<map name="shapes">
<!-- Rectángulo: superior-izquierda (10,10) a inferior-derecha (100,80) -->

  <area shape="rect" coords="10,10,100,80" href="rect.html" alt="Rectangle region">

<!-- Círculo: centro (200,60), radio 40 -->

  <area shape="circle" coords="200,60,40" href="circle.html" alt="Circle region">

<!-- Polígono: triángulo con tres vértices -->

  <area shape="poly" coords="350,10,400,80,300,80" href="triangle.html" alt="Triangle region">

<!-- Por defecto: cubre cualquier área no reclamada por otras regiones -->

  <area shape="default" href="elsewhere.html" alt="Everything else">
</map>

Este ejemplo demuestra los cuatro valores shape válidos con su sintaxis coords correspondiente. Ten en cuenta que default no requiere un atributo coords ya que cubre el resto de la imagen.