An “img” element with no “alt” attribute must not have any “aria-*” attributes other than “aria-hidden”.

An img element without an alt attribute cannot carry any aria-* attributes except aria-hidden.

When an img lacks an alt attribute, its role and purpose are undefined from an accessibility standpoint. The HTML specification treats this as an image whose text alternative has not been provided, and assistive technologies handle it in a special fallback way. In this state, adding ARIA attributes like aria-label, aria-labelledby, or aria-describedby creates a contradiction: the markup simultaneously says "this image has no known alternative" and "here is semantic information about this image."

The only ARIA attribute allowed on an img without alt is aria-hidden="true", because hiding the image from the accessibility tree is consistent with having no text alternative.

There are two ways to fix this. Either add an alt attribute to the img (which you should almost always do), or remove the ARIA attributes and optionally add aria-hidden="true" if the image is purely decorative.

HTML examples

Invalid: img with no alt but with aria-label

<img src="photo.jpg" aria-label="A sunset over the ocean">

Fixed: add an alt attribute

If the image conveys meaning, provide an alt attribute. Once alt is present, ARIA attributes are allowed.

<img src="photo.jpg" alt="A sunset over the ocean">

Fixed: decorative image hidden from assistive technology

If the image is decorative and carries no meaning, use an empty alt or drop ARIA attributes in favor of aria-hidden:

<img src="decoration.jpg" alt="">

<img src="decoration.jpg" aria-hidden="true">

Learn more:

MDN Reference

HTML img element - MDN

→

MDN Reference

ARIA: img role - MDN

→

WHATWG Spec

WHATWG HTML - Embedded content

→