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

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.