O atributo "shape" no elemento "a" está obsoleto. Use "area" em vez de "a" para mapas de imagem.

Em versões mais antigas do HTML, o elemento <a> suportava um atributo shape (com valores como rect, circle, poly e default) para definir regiões de hotspot clicáveis dentro de um mapa de imagem. Esta funcionalidade foi removida da especificação HTML, e o atributo shape é agora considerado obsoleto em elementos <a>.

A forma moderna e correta de criar mapas de imagem é usar o elemento <map> contendo um ou mais elementos <area>. Cada elemento <area> aceita um atributo shape juntamente com coords para definir regiões clicáveis, e um href para especificar o destino do link. O elemento <img> é então associado ao mapa através do seu atributo usemap.

Por que isto importa

• Conformidade com padrões: O atributo shape em <a> não faz parte do padrão HTML atual. Usá-lo produz um erro de validação e baseia-se em comportamento descontinuado que os navegadores não são obrigados a suportar.
• Compatibilidade de navegador: Os navegadores modernos implementam mapas de imagem através de <map> e <area>. Usar a sintaxe obsoleta <a shape="..."> pode não funcionar de forma fiável em todos os navegadores.
• Acessibilidade: O elemento <area> foi concebido para funcionar com tecnologias assistivas no contexto de mapas de imagem. Suporta o atributo alt, que fornece alternativas de texto para cada região clicável — algo essencial para utilizadores de leitores de ecrã.

Como corrigir

1. Remova o atributo shape de quaisquer elementos <a>.
2. Crie um elemento <map> com um atributo name único.
3. Dentro do <map>, adicione elementos <area> com os atributos shape, coords, href e alt apropriados.
4. Associe o mapa a um elemento <img> usando o atributo usemap, referenciando o name do mapa com um prefixo #.

Exemplos

Incorreto: usar shape num 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>

Isto desencadeia o erro de validação porque o atributo shape está obsoleto em elementos <a>.

Correto: usar elementos <area>

<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 uma região clicável com shape e coords, liga a um destino com href, e fornece uma etiqueta acessível com alt. O elemento <area> é um elemento vazio (não precisa de etiqueta de fecho), e o atributo alt é obrigatório quando href está presente.

Valores de shape suportados em <area>

Exemplo com múltiplos 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 exemplo demonstra os quatro tipos de forma funcionando juntos num único mapa de imagem, com texto alt adequado para cada região clicável.

Saiba mais:

MDN Reference

MDN: area element

→