How do I add alternative text to an element with role=”img”?


I have a <div> element with role="img" on my site but I am unsure how to add alternative text to the image.


Meaningful images must be coded with alternative text and decorative images must be coded so they are ignored by assistive technologies.

When the "img" role is used, the alt attribute would not be sufficient in communicating a text alternative because the alt attribute is typically used for the HTML <img> element. Since role="img" is a custom ARIA role, a different approach must be taken.

If the image is meaningful and a descriptive aria-label attribute (eg. aria-label="Snow capped mountains with a raging river in the foreground"). If there is already a visible description on the page, use `aria-labelledby` with ID matching the text element.

If the image isĀ decorative add aria-hidden="true" to ensure that this image is hidden from assistive technologies.

For support in locating and evaluating images on your product page, explore the Guided Manual WCAG Audit Tool from Accessible Web. Our best-in-class web accessibility tools help make your accessibility journey easier.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.