# The “longdesc” attribute on the “img” element is obsolete. Use a regular “a” element to link to the description.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-longdesc-attribute-on-the-img-element-is-obsolete-use-a-regular-a-element-to-link-to-the-description
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `longdesc` attribute dates back to HTML4, where it accepted a URL pointing to a separate page (or section of a page) containing a detailed description of the image. The idea was to supplement the short text in the `alt` attribute with a more comprehensive explanation, particularly useful for complex images like charts, diagrams, or infographics.

HTML5 made `longdesc` obsolete for several reasons. Browser support was inconsistent — most browsers never exposed the attribute in a way that was easily discoverable by users. Many developers misused it by placing literal descriptions in the attribute instead of URLs, or left it pointing to broken links. Because the attribute was invisible in the rendered page, there was no visual indication that a longer description existed, making it practically useless for sighted users and unreliable for assistive technology users.

The recommended replacements are more robust and accessible:

- **Wrap the image in an `a` element** (or place a link nearby) that points to the description page. This makes the link visible and usable by everyone.
- **Use `aria-describedby`** to reference a description that already exists on the same page. This is ideal when the detailed description is displayed alongside the image.
- **Use a `figure` with `figcaption`** to associate a visible caption or description directly with the image.

These approaches are better for accessibility because they work reliably across browsers and assistive technologies, and they make the description discoverable to all users, not just those using specific screen readers that happened to support `longdesc`.

## Examples

### ❌ Obsolete: using `longdesc`

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

This triggers the validation error because `longdesc` is no longer a valid attribute on `img` in HTML5.

### ✅ Fix: wrap the image in a link

The simplest replacement is to make the image itself a link to the description:

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

### ✅ Fix: provide a separate link near the image

If you don't want the image itself to be clickable, place a visible link nearby:

```html
<figure>
  <img src="chart.png" alt="Quarterly revenue chart for 2024">
  <figcaption>
    Quarterly revenue chart.
    <a href="descriptions/revenue-chart.html">View detailed description</a>
  </figcaption>
</figure>
```

### ✅ Fix: use `aria-describedby` for on-page descriptions

When the long description is already on the same page, reference it with `aria-describedby`:

```html
<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>
```

This approach keeps the description visible on the page and programmatically associates it with the image for screen readers.

### Choosing the right approach

| Scenario | Recommended approach |
|---|---|
| Description is on a separate page | Wrap image in an `a` element or add a nearby link |
| Description is visible on the same page | Use `aria-describedby` pointing to the description's `id` |
| Image needs a brief visible caption | Use `figure` with `figcaption` |
| Complex image (chart, diagram, infographic) | Combine `figure`, `figcaption`, and a link to a full description |

In all cases, make sure the `alt` attribute still provides a meaningful short description. The long description supplements `alt` — it doesn't replace it.