# An “img” element with a “role” attribute must not have an “alt” attribute whose value is the empty string.

> Canonical HTML version: https://rocketvalidator.com/html-validation/an-img-element-with-a-role-attribute-must-not-have-an-alt-attribute-whose-value-is-the-empty-string
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

An `img` element with a `role` attribute cannot have an empty `alt` attribute because the `role` overrides the default semantics, and an empty `alt` signals that the image is decorative — two intentions that contradict each other.

When an `img` has `alt=""`, it tells assistive technologies to skip the image entirely. The image is treated as presentational, equivalent to `role="presentation"` or `role="none"`. Assigning a different `role` (such as `button`, `link`, or `tab`) tells assistive technologies the element has a specific function and should be announced. These two signals conflict: one says "ignore this," the other says "this is interactive" or "this has meaning."

To fix this, decide what the image actually does:

- If the image is decorative and should be ignored, remove the `role` attribute and keep `alt=""`.
- If the image has a functional role, provide a descriptive `alt` value that explains the image's purpose.

## HTML examples

### Image with conflicting role and empty alt

```html
<img src="search.png" alt="" role="button">
```

### Fixed: decorative image without a role

If the image is purely decorative, remove the `role`:

```html
<img src="search.png" alt="">
```

### Fixed: functional image with descriptive alt

If the image acts as a button, give it a meaningful `alt`:

```html
<img src="search.png" alt="Search" role="button">
```