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.