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

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

An empty `alt` attribute on an `img` element is a deliberate signal that the image is purely decorative and carries no meaningful content. According to the WHATWG HTML specification, this maps the element to the "presentation" role in the accessibility tree, effectively hiding it from screen readers and other assistive technologies.

When you add a `role` attribute to an `img` with `alt=""`, you're sending contradictory instructions: the empty `alt` says "this image is decorative, ignore it," while the `role` attribute says "this image has a specific semantic purpose." Browsers and assistive technologies cannot reliably resolve this conflict, which can lead to confusing or inconsistent behavior for users who rely on screen readers.

This rule exists to enforce clarity in how images are exposed to the accessibility tree. If an image is truly decorative, it should have `alt=""` and no `role`. If an image serves a functional or semantic purpose — such as acting as a button, link, or illustration — it should have both a descriptive `alt` value and, if needed, an appropriate `role`.

## How to fix it

You have two options depending on the image's purpose:

1. **The image is decorative:** Remove the `role` attribute entirely. The empty `alt` attribute already communicates that the image should be ignored by assistive technologies.

2. **The image is meaningful:** Provide a descriptive `alt` value that explains the image's purpose. If a specific `role` is genuinely needed, keep it alongside the non-empty `alt`.

## Examples

### ❌ Incorrect: empty `alt` with a `role` attribute

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

```html
<img src="banner.jpg" alt="" role="presentation">
```

Even `role="presentation"` is redundant and invalid here — the empty `alt` already implies presentational semantics.

### ✅ Correct: decorative image with no `role`

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

If the image is decorative, simply remove the `role` attribute. The empty `alt` is sufficient.

### ✅ Correct: meaningful image with a descriptive `alt` and a `role`

```html
<img src="warning-icon.png" alt="Warning" role="img">
```

If the image conveys information, give it a descriptive `alt` value. The `role="img"` is typically unnecessary here since `img` elements already have an implicit `role` of `img` when `alt` is non-empty, but it is at least valid.

### ✅ Correct: meaningful image used in a specific context

```html
<button>
  <img src="search-icon.png" alt="Search">
</button>
```

Here the image has a descriptive `alt` and doesn't need an explicit `role` because its purpose is conveyed through the `alt` text and its context within the `button`.