Validación HTML: El atributo "longdesc" en el elemento "iframe" está obsoleto. Usa un elemento "a" normal para enlazar a la descripción.

Acerca de este problema HTML

El atributo longdesc fue diseñado originalmente para apuntar a una URL que contenía una descripción detallada del contenido de un elemento, principalmente como una función de accesibilidad para usuarios de lectores de pantalla. En elementos <iframe>, se pensó para describir el contenido enmarcado para usuarios que no podían percibirlo directamente. Sin embargo, el atributo fue mal implementado en los navegadores, raramente usado por tecnologías asistivas, y finalmente fue eliminado de la especificación HTML para elementos <iframe>.

Usar atributos obsoletos causa errores de validación de W3C y puede crear una falsa sensación de accesibilidad. Dado que los navegadores y tecnologías asistivas no procesan de manera confiable longdesc en iframes, los usuarios que necesiten la descripción pueden nunca llegar a ella. Un enlace visible, por otro lado, es universalmente accesible — funciona para todos los usuarios independientemente de su navegador, dispositivo, o tecnología asistiva.

La solución es directa: elimina el atributo longdesc del <iframe> y coloca un elemento <a> normal cerca del iframe que enlace a la página de descripción. Este enfoque es más robusto porque el enlace es visible, descubrible, y funciona en todas partes.

Ejemplos

❌ Obsoleto: Usando `longdesc` en un `<iframe>`

<iframe src="report.html" title="Annual report" longdesc="report-description.html"></iframe>

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

✅ Corregido: Usando un enlace visible en su lugar

<iframe src="report.html" title="Annual report"></iframe>
<p>
  <a href="report-description.html">Leer una descripción detallada del informe anual</a>
</p>

El atributo longdesc se elimina, y se coloca un enlace descriptivo adyacente al iframe para que todos los usuarios puedan acceder a él.

✅ Alternativa: Envolviendo en un `<figure>` para mejor semántica

Para un enfoque más estructurado, puedes usar un elemento <figure> con un <figcaption> para asociar el enlace de descripción con el iframe:

<figure>
  <iframe src="report.html" title="Annual report"></iframe>
  <figcaption>
    Resumen del informe anual.
    <a href="report-description.html">Leer la descripción completa</a>.
  </figcaption>
</figure>

Esto agrupa el iframe y su título semánticamente, haciendo clara la relación entre ellos tanto para usuarios videntes como para tecnologías asistivas.

✅ Alternativa: Usando `aria-describedby` para contexto adicional

Si quieres proporcionar una descripción corta en línea que las tecnologías asistivas puedan anunciar automáticamente, puedes usar aria-describedby:

<p id="report-desc">
  Este iframe contiene el informe anual interactivo para 2024.
  <a href="report-description.html">Leer la descripción completa</a>.
</p>
<iframe src="report.html" title="Annual report" aria-describedby="report-desc"></iframe>

Esto enlaza el iframe al párrafo descriptivo programáticamente. Los lectores de pantalla anunciarán el contenido del elemento referenciado cuando el iframe reciba el foco, mientras el enlace visible permanece disponible para todos los usuarios.

Puntos clave

Siempre incluye un atributo title en elementos <iframe> para describir su propósito — esto es una práctica básica importante de accesibilidad.
Reemplaza longdesc con un elemento <a> visible que enlace a la descripción larga.
Coloca el enlace cerca del iframe para que los usuarios puedan encontrarlo fácilmente.
Considera usar <figure> y <figcaption> o aria-describedby para una asociación semántica más fuerte entre el iframe y su descripción.