El atributo “longdesc” en el elemento “img” está obsoleto. Usa un elemento “a” regular para enlazar a la descripción.

El atributo longdesc se remonta a HTML4, donde aceptaba una URL que apuntaba a una página separada (o sección de una página) que contenía una descripción detallada de la imagen. La idea era complementar el texto corto del atributo alt con una explicación más completa, particularmente útil para imágenes complejas como gráficos, diagramas o infografías.

HTML5 hizo que longdesc quedara obsoleto por varias razones. El soporte del navegador era inconsistente: la mayoría de los navegadores nunca expusieron el atributo de una manera que fuera fácilmente descubrible por los usuarios. Muchos desarrolladores lo usaban mal al colocar descripciones literales en el atributo en lugar de URLs, o lo dejaban apuntando a enlaces rotos. Porque el atributo era invisible en la página renderizada, no había indicación visual de que existiera una descripción más larga, lo que lo hacía prácticamente inútil para usuarios videntes y poco confiable para usuarios de tecnología de asistencia.

Las alternativas recomendadas son más robustas y accesibles:

• Envuelve la imagen en un elemento a (o coloca un enlace cerca) que apunte a la página de descripción. Esto hace que el enlace sea visible y utilizable por todos.
• Usa aria-describedby para hacer referencia a una descripción que ya existe en la misma página. Esto es ideal cuando la descripción detallada se muestra junto a la imagen.
• Usa un figure con figcaption para asociar un título o descripción visible directamente con la imagen.

Estos enfoques son mejores para la accesibilidad porque funcionan de manera confiable en todos los navegadores y tecnologías de asistencia, y hacen que la descripción sea descubrible para todos los usuarios, no solo para aquellos que usan lectores de pantalla específicos que por casualidad soportaban longdesc.

Ejemplos

❌ Obsoleto: usar longdesc

<img
  src="cat.jpg"
  alt="Gato sonriente sentado en el alféizar de una ventana"
  longdesc="descriptions/smiling-cat.html">

Esto desencadena el error de validación porque longdesc ya no es un atributo válido en img en HTML5.

✅ Solución: envolver la imagen en un enlace

El reemplazo más simple es hacer que la imagen misma sea un enlace a la descripción:

<a href="descriptions/smiling-cat.html">
  <img src="cat.jpg" alt="Gato sonriente sentado en el alféizar de una ventana">
</a>

✅ Solución: proporcionar un enlace separado cerca de la imagen

Si no quieres que la imagen misma sea clicable, coloca un enlace visible cerca:

<figure>
  <img src="chart.png" alt="Gráfico de ingresos trimestrales para 2024">
  <figcaption>
    Gráfico de ingresos trimestrales.
    <a href="descriptions/revenue-chart.html">Ver descripción detallada</a>
  </figcaption>
</figure>

✅ Solución: usar aria-describedby para descripciones en la página

Cuando la descripción larga ya está en la misma página, haz referencia a ella con aria-describedby:

<figure>
  <img
    src="chart.png"
    alt="Gráfico de ingresos trimestrales para 2024"
    aria-describedby="chart-description">
  <figcaption id="chart-description">
    Los ingresos crecieron de $2.1M en Q1 a $3.8M en Q4, con el mayor
    aumento trimestre tras trimestre ocurriendo entre Q2 y Q3.
  </figcaption>
</figure>

Este enfoque mantiene la descripción visible en la página y la asocia programáticamente con la imagen para los lectores de pantalla.

Elegir el enfoque correcto

En todos los casos, asegúrate de que el atributo alt todavía proporcione una descripción corta significativa. La descripción larga complementa alt, no lo reemplaza.

Más información:

MDN Reference

MDN: longdesc property

→