Verificação HTML: Valor inválido "polygon" para o atributo "shape" no elemento "area".

Sobre este problema HTML

O atributo shape num elemento <area> indica ao browser que tipo de região clicável deve definir dentro de um mapa de imagem. O padrão HTML living standard (WHATWG) limita estritamente este atributo a quatro valores:

rect — um retângulo, definido por quatro coordenadas: x1,y1,x2,y2 (cantos superior-esquerdo e inferior-direito)
circle — um círculo, definido por três valores: x,y,r (ponto central e raio)
poly — um polígono, definido por uma série de pares de coordenadas x,y que traçam os vértices da forma
default — toda a área da imagem (não necessita de coords)

O valor "polygon" é um erro comum — é intuitivo e usado noutros contextos como SVG — mas não é HTML válido. Os browsers podem silenciosamente voltar ao default ou ignorar completamente a região quando encontram um valor de shape não reconhecido, o que significa que os utilizadores podem perder a capacidade de clicar nessa área do mapa de imagem.

Por que isto importa

Compatibilidade com browsers: Os browsers não são obrigados a lidar graciosamente com valores de shape inválidos. Enquanto alguns podem adivinhar a sua intenção, outros podem renderizar a região clicável incorretamente ou não renderizar de todo.
Acessibilidade: Leitores de ecrã e tecnologias assistivas dependem de marcação válida para transmitir regiões de mapa de imagem aos utilizadores. Um valor de shape inválido pode tornar uma região invisível para estas ferramentas, quebrando a navegação por teclado e anúncios de texto alternativo.
Conformidade com padrões: Usar valores de atributo válidos garante que a sua marcação se comporta previsivelmente em todos os browsers e passa verificações de validação automática.

Como corrigir

Substitua shape="polygon" por shape="poly". A sintaxe do atributo coords mantém-se igual — uma lista separada por vírgulas de pares x,y representando cada vértice do polígono, por ordem. Os valores das coordenadas estão em píxeis CSS relativos às dimensões intrínsecas (naturais) da imagem.

Certifique-se também de que cada elemento <area> inclui:

Um atributo href para tornar a região um link
Um atributo alt para acessibilidade (obrigatório quando href está presente)

Exemplos

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>

O validador reporta: Valor inválido “polygon” para o atributo “shape” no elemento “area”.

Corrigido: 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>

Alterar "polygon" para "poly" resolve o erro. Os quatro pares de coordenadas (10,10, 80,10, 80,60, 10,60) definem um polígono retangular. O browser fecha automaticamente a forma conectando o último ponto de volta ao primeiro.

Referência: todos os valores de `shape` válidos

<img src="diagram.png" usemap="#shapes" alt="Shape examples" width="500" height="400">
<map name="shapes">
<!-- Rectangle: top-left (10,10) to bottom-right (100,80) -->

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

<!-- Circle: center (200,60), radius 40 -->

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

<!-- Polygon: triangle with three vertices -->

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

<!-- Default: covers any area not claimed by other regions -->

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

Este exemplo demonstra todos os quatro valores de shape válidos com a sintaxe coords correspondente. Note que default não requer um atributo coords uma vez que cobre o restante da imagem.