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

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

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

Valid example

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

Learn more:

MDN Reference

MDN - ARIA: img role

→

MDN Reference

MDN - button element

→