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

An img element with a role attribute cannot have an empty alt attribute because the role overrides the default semantics, and an empty alt signals that the image is decorative — two intentions that contradict each other.

When an img has alt="", it tells assistive technologies to skip the image entirely. The image is treated as presentational, equivalent to role="presentation" or role="none". Assigning a different role (such as button, link, or tab) tells assistive technologies the element has a specific function and should be announced. These two signals conflict: one says "ignore this," the other says "this is interactive" or "this has meaning."

To fix this, decide what the image actually does:

• If the image is decorative and should be ignored, remove the role attribute and keep alt="".
• If the image has a functional role, provide a descriptive alt value that explains the image's purpose.

HTML examples

Image with conflicting role and empty alt

<img src="search.png" alt="" role="button">

Fixed: decorative image without a role

If the image is purely decorative, remove the role:

<img src="search.png" alt="">

Fixed: functional image with descriptive alt

If the image acts as a button, give it a meaningful alt:

<img src="search.png" alt="Search" role="button">

Learn more:

MDN Reference

IMG Element - MDN Web Docs

→

MDN Reference

ARIA: role attribute - MDN Web Docs

→

WHATWG Spec

Images - WHATWG HTML Standard

→