O atributo “longdesc” no elemento “img” está obsoleto. Use um elemento “a” normal para fazer ligação à descrição.

O atributo longdesc remonta ao HTML4, onde aceitava um URL que apontava para uma página separada (ou secção de uma página) contendo uma descrição detalhada da imagem. A ideia era complementar o texto curto do atributo alt com uma explicação mais abrangente, particularmente útil para imagens complexas como gráficos, diagramas ou infográficos.

O HTML5 tornou o longdesc obsoleto por várias razões. O suporte dos navegadores era inconsistente — a maioria dos navegadores nunca expôs o atributo de uma forma facilmente descobrível pelos utilizadores. Muitos programadores fizeram mau uso dele ao colocar descrições literais no atributo em vez de URLs, ou deixaram-no a apontar para ligações quebradas. Como o atributo era invisível na página renderizada, não havia indicação visual de que existia uma descrição mais longa, tornando-o praticamente inútil para utilizadores com visão e pouco fiável para utilizadores de tecnologia assistiva.

As substituições recomendadas são mais robustas e acessíveis:

• Envolva a imagem num elemento a (ou coloque uma ligação por perto) que aponte para a página de descrição. Isto torna a ligação visível e utilizável por todos.
• Use aria-describedby para referenciar uma descrição que já existe na mesma página. Isto é ideal quando a descrição detalhada é exibida junto com a imagem.
• Use figure com figcaption para associar diretamente uma legenda ou descrição visível à imagem.

Estas abordagens são melhores para acessibilidade porque funcionam de forma fiável em todos os navegadores e tecnologias assistivas, e tornam a descrição descobrível para todos os utilizadores, não apenas para aqueles que usam leitores de ecrã específicos que por acaso suportavam longdesc.

Exemplos

❌ Obsoleto: usando longdesc

<img
  src="cat.jpg"
  alt="Smiling cat sitting on a windowsill"
  longdesc="descriptions/smiling-cat.html">

Isto desencadeia o erro de validação porque longdesc já não é um atributo válido em img no HTML5.

✅ Correção: envolva a imagem numa ligação

A substituição mais simples é fazer da própria imagem uma ligação para a descrição:

<a href="descriptions/smiling-cat.html">
  <img src="cat.jpg" alt="Smiling cat sitting on a windowsill">
</a>

✅ Correção: forneça uma ligação separada perto da imagem

Se não quiser que a própria imagem seja clicável, coloque uma ligação visível por perto:

<figure>
  <img src="chart.png" alt="Quarterly revenue chart for 2024">
  <figcaption>
    Quarterly revenue chart.
    <a href="descriptions/revenue-chart.html">Ver descrição detalhada</a>
  </figcaption>
</figure>

✅ Correção: use aria-describedby para descrições na página

Quando a descrição longa já está na mesma página, referencie-a com aria-describedby:

<figure>
  <img
    src="chart.png"
    alt="Quarterly revenue chart for 2024"
    aria-describedby="chart-description">
  <figcaption id="chart-description">
    Revenue grew from $2.1M in Q1 to $3.8M in Q4, with the largest
    quarter-over-quarter increase occurring between Q2 and Q3.
  </figcaption>
</figure>

Esta abordagem mantém a descrição visível na página e associa-a programaticamente à imagem para leitores de ecrã.

Escolher a abordagem certa

Em todos os casos, certifique-se de que o atributo alt ainda fornece uma descrição curta significativa. A descrição longa complementa o alt — não o substitui.

Saiba mais:

MDN Reference

MDN: longdesc property

→