# The element “button” must not appear as a descendant of an element with the attribute “role=img”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-element-button-must-not-appear-as-a-descendant-of-an-element-with-the-attribute-role-img
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `<button>` element must not be placed inside any element that carries `role="img"`, because that role tells assistive technologies to treat the element and everything inside it as a single, flat image.

When you set `role="img"` on a container, screen readers stop exposing its children as separate, operable controls. The whole subtree collapses into one graphic with a single accessible name. A `<button>` nested inside disappears from that flattened view: a screen reader user cannot reach or activate it, even though the button still renders and responds to a mouse. The checker flags this because the markup promises an image but hides an interactive control inside it.

This usually happens when `role="img"` is added to a wrapper that groups an icon or illustration together with a real control, such as a decorative card that also holds a button.

The fix is to decide what the element actually is. If it is an image, keep `role="img"` and move the button outside it. If it needs a button, remove `role="img"` from the ancestor and describe any decorative graphics with `alt` text or `aria-label` on the image itself.

## Invalid example

```html
<div role="img" aria-label="Play the intro video">
  <img src="thumbnail.jpg" alt="">
  <button type="button">Play</button>
</div>
```

## Valid example

```html
<button type="button" aria-label="Play the intro video">
  <img src="thumbnail.jpg" alt="">
</button>
```