# Bad value “presentation” for attribute “role” on element “img”

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-presentation-for-attribute-role-on-element-img
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The HTML specification defines a specific list of allowed ARIA roles for each element. For the `<img>` element, `role="none"` is permitted but `role="presentation"` is not listed as a valid value. This distinction exists even though the WAI-ARIA 1.1 specification treats `none` and `presentation` as synonymous — `role="none"` was introduced as an alias specifically because the word "presentation" was often misunderstood by authors. The HTML spec adopted `none` as the canonical value for `<img>`.

## Why this matters

**Standards compliance:** Using a role value not permitted by the HTML specification for a given element produces a validation error. Keeping your HTML valid ensures predictable behavior across browsers and assistive technologies.

**Accessibility:** The intended purpose of `role="presentation"` or `role="none"` is to tell assistive technologies that an element is purely decorative and carries no semantic meaning. However, for images, the established and most reliable way to achieve this is simply providing an empty `alt` attribute (`alt=""`). Screen readers already know to skip images with `alt=""`, so adding a role is usually unnecessary.

**Clarity of intent:** Using `alt=""` clearly communicates to both browsers and developers that the image is decorative. If the image actually conveys information, it should have a meaningful `alt` value and no presentation-related role at all.

## How to fix it

1. **If the image is decorative:** Remove the `role` attribute entirely and ensure the image has `alt=""`. This is the simplest and most widely supported approach.
2. **If you need an explicit ARIA role:** Replace `role="presentation"` with `role="none"` and keep `alt=""`.
3. **If the image conveys meaning:** Remove the role and provide a descriptive `alt` attribute that explains what the image communicates.

## Examples

### ❌ Bad: using `role="presentation"` on an `<img>`

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

This triggers the validation error because `presentation` is not an allowed role value for `<img>` in the HTML specification.

### ✅ Fixed: decorative image with empty `alt` (preferred)

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

The empty `alt` attribute is sufficient to tell assistive technologies the image is decorative. No role is needed.

### ✅ Fixed: decorative image with `role="none"`

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

If you explicitly need an ARIA role, `role="none"` is the valid value for `<img>`. The empty `alt` should still be included.

### ✅ Fixed: meaningful image with descriptive `alt`

```html
<img src="quarterly-sales.png" alt="Bar chart showing quarterly sales increasing from $2M to $5M in 2024">
```

If the image communicates information, provide a descriptive `alt` and do not use a presentation or none role — doing so would hide the image's meaning from assistive technology users.

### ❌ Bad: meaningful image incorrectly hidden

```html
<img src="quarterly-sales.png" alt="Sales chart" role="presentation">
```

This is both invalid HTML (wrong role value for `<img>`) and an accessibility problem — the role would attempt to hide a meaningful image from screen readers.