# An “img” element with no “alt” attribute must not have any “aria-*” attributes other than “aria-hidden”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/an-img-element-with-no-alt-attribute-must-not-have-any-aria-attributes-other-than-aria-hidden
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

An `img` element without an `alt` attribute cannot carry any `aria-*` attributes except `aria-hidden`.

When an `img` lacks an `alt` attribute, its role and purpose are undefined from an accessibility standpoint. The HTML specification treats this as an image whose text alternative has not been provided, and assistive technologies handle it in a special fallback way. In this state, adding ARIA attributes like `aria-label`, `aria-labelledby`, or `aria-describedby` creates a contradiction: the markup simultaneously says "this image has no known alternative" and "here is semantic information about this image."

The only ARIA attribute allowed on an `img` without `alt` is `aria-hidden="true"`, because hiding the image from the accessibility tree is consistent with having no text alternative.

There are two ways to fix this. Either add an `alt` attribute to the `img` (which you should almost always do), or remove the ARIA attributes and optionally add `aria-hidden="true"` if the image is purely decorative.

## HTML examples

### Invalid: `img` with no `alt` but with `aria-label`

```html
<img src="photo.jpg" aria-label="A sunset over the ocean">
```

### Fixed: add an `alt` attribute

If the image conveys meaning, provide an `alt` attribute. Once `alt` is present, ARIA attributes are allowed.

```html
<img src="photo.jpg" alt="A sunset over the ocean">
```

### Fixed: decorative image hidden from assistive technology

If the image is decorative and carries no meaning, use an empty `alt` or drop ARIA attributes in favor of `aria-hidden`:

```html
<img src="decoration.jpg" alt="">
```

```html
<img src="decoration.jpg" aria-hidden="true">
```
