# An “img” element with a “role” attribute must also have an accessible name (e.g., an “alt” attribute).

> Canonical HTML version: https://rocketvalidator.com/html-validation/an-img-element-with-a-role-attribute-must-also-have-an-accessible-name-e-g-an-alt-attribute
> 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 needs an accessible name, such as a non-empty `alt` attribute, an `aria-label` or an `aria-labelledby`.

The validator reports this error for any `img` that has a `role` but no name. The role value doesn't matter: `role="button"`, `role="img"`, `role="presentation"` and `role="none"` all trigger it. A `title` attribute doesn't count as a name for this check, and `aria-hidden="true"` doesn't make the error go away.

A common cause is a decorative image marked up as `<img role="presentation">` or `<img role="none">`, often with `aria-hidden="true"` too. Those attributes try to hide the image from assistive technologies, and HTML already has a simpler way to do that: an empty `alt` attribute. Remove the `role` and `aria-hidden` and write `alt=""`. Don't keep the role next to the empty `alt`, because the validator rejects that combination with a different error.

An image that does something, such as acting as a button, needs a name that says what it does. Adding `alt="Search"` to `<img role="button">` is enough to pass validation, but a real `button` element around the image is the better fix. It gets keyboard focus and activation without extra script, and the image's `alt` becomes the button's name.

## Invalid example

```html
<img src="divider.png" role="presentation" aria-hidden="true">
<img src="search.png" role="button" tabindex="0">
```

## Valid example

```html
<img src="divider.png" alt="">
<button type="button">
  <img src="search.png" alt="Search">
</button>
```