# <object> elements must have alternative text.

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/text-alternatives/object-alt
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `<object>` element embeds external content such as images, audio, and video into a web page. When this embedded content is non-text content, screen reader users have no way to perceive or understand it unless an accessible name is provided. Without alternative text, the `<object>` element is either skipped entirely by assistive technologies or announced without any meaningful description, leaving users unaware of what the content is or why it's there.

This rule maps to WCAG 2.0 success criterion 1.1.1 (Non-text Content), a Level A requirement. Success criterion 1.1.1 requires that all non-text content presented to users has a text alternative that serves an equivalent purpose. Because `<object>` elements can render images, play audio, or display video, they fall squarely under this requirement.

A common misconception is that fallback content placed inside the `<object>` element (between the opening and closing tags) acts as alternative text. It does not. Browsers only display fallback content when the embedded resource fails to load. When the resource loads successfully, assistive technologies do not use the fallback content as the accessible name. This means you must provide an accessible name through other means.

## How to fix it

Add an accessible name to every `<object>` element that renders non-text content. There are three supported techniques:

- Use the `aria-label` attribute to provide the accessible name directly on the element.
- Use the `aria-labelledby` attribute to reference the `id` of another element that contains the text alternative.
- Use the `title` attribute to give the element a name.

If the `<object>` is purely decorative and carries no meaning, assign it `role="presentation"` or `role="none"` so assistive technologies ignore it. Some screen readers will still announce `<object>` elements without an accessible name, so a presentational role is the reliable way to mark decorative embedded content.

The accessible name should describe the purpose or content of the embedded resource. Testing that the name is actually descriptive is a separate concern from whether a name exists at all, but both matter for a good user experience.

## Examples

### Failing: `<object>` with no accessible name

This `<object>` embeds an image but provides no text alternative. A screen reader user will not know what the image depicts.

```html
<object data="/images/diagram.png" type="image/png"></object>
```

### Failing: relying on fallback content

The text inside the `<object>` tags is only shown when the image fails to load. It is not used as the accessible name when the image renders successfully.

```html
<object data="/images/diagram.png" type="image/png">
  Architecture diagram
</object>
```

### Passing: using `aria-label`

```html
<object
  data="/images/diagram.png"
  type="image/png"
  aria-label="Architecture diagram showing three service layers">
</object>
```

### Passing: using `aria-labelledby`

```html
<h2 id="diagram-heading">Architecture diagram</h2>
<object
  data="/images/diagram.png"
  type="image/png"
  aria-labelledby="diagram-heading">
</object>
```

### Passing: using `title`

```html
<object
  data="/media/intro.mp4"
  type="video/mp4"
  title="Introduction video for the onboarding course">
</object>
```

### Passing: decorative object with a presentational role

When the embedded content is decorative and conveys no information, hide it from the accessibility tree with `role="presentation"` or `role="none"`.

```html
<object
  data="/images/decorative-border.png"
  type="image/png"
  role="presentation">
</object>
```