Verificação HTML: The “longdesc” attribute on the “iframe” element is obsolete. Use a regular “a” element to link to the description.

Sobre este problema HTML

The longdesc attribute was originally designed to point to a URL containing a detailed description of an element’s content, primarily as an accessibility feature for screen reader users. On <iframe> elements, it was intended to describe the framed content for users who couldn’t perceive it directly. However, the attribute was poorly implemented across browsers, rarely used by assistive technologies, and was ultimately removed from the HTML specification for <iframe> elements.

Using obsolete attributes causes W3C validation errors and can create a false sense of accessibility. Since browsers and assistive technologies don’t reliably process longdesc on iframes, users who need the description may never actually reach it. A visible link, on the other hand, is universally accessible — it works for all users regardless of their browser, device, or assistive technology.

The fix is straightforward: remove the longdesc attribute from the <iframe> and place a regular <a> element near the iframe that links to the description page. This approach is more robust because the link is visible, discoverable, and works everywhere.

Examples

❌ Obsolete: Using `longdesc` on an `<iframe>`

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

This triggers the validation error because longdesc is no longer a valid attribute on <iframe>.

✅ Fixed: Using a visible link instead

<iframe src="report.html" title="Annual report"></iframe>
<p>
  <a href="report-description.html">Read a detailed description of the annual report</a>
</p>

The longdesc attribute is removed, and a descriptive link is placed adjacent to the iframe so all users can access it.

✅ Alternative: Wrapping in a `<figure>` for better semantics

For a more structured approach, you can use a <figure> element with a <figcaption> to associate the description link with the iframe:

<figure>
  <iframe src="report.html" title="Annual report"></iframe>
  <figcaption>
    Annual report overview.
    <a href="report-description.html">Read the full description</a>.
  </figcaption>
</figure>

This groups the iframe and its caption together semantically, making the relationship between them clear to both sighted users and assistive technologies.

✅ Alternative: Using `aria-describedby` for additional context

If you want to provide a short inline description that assistive technologies can announce automatically, you can use aria-describedby:

<p id="report-desc">
  This iframe contains the interactive annual report for 2024.
  <a href="report-description.html">Read the full description</a>.
</p>
<iframe src="report.html" title="Annual report" aria-describedby="report-desc"></iframe>

This links the iframe to the descriptive paragraph programmatically. Screen readers will announce the content of the referenced element when the iframe receives focus, while the visible link remains available to all users.

Key Takeaways

Always include a title attribute on <iframe> elements to describe their purpose — this is an important baseline accessibility practice.
Replace longdesc with a visible <a> element that links to the long description.
Place the link near the iframe so users can easily find it.
Consider using <figure> and <figcaption> or aria-describedby for stronger semantic association between the iframe and its description.