role-img-alt

Elements containing [role="img"] have an alternative text

Who might be affected
SR

Description

Screen readers and other assistive technologies will treat elements with role="img" as an image per se, as such they are requiered to have an alt attribute or an equivalent that describes the image content. Since <div> elements do not support the alt attribute, one of the other techniques will be used for the element accessible name.

Quick Fixes

Provide [role="image"] elements with accessible names.
1 <!-- Use the "aria-label" attribute -->
2 <div role="img" aria-label="A short description of the image content"></div>
3
4 <!-- Use the "aria-labelledby" attribute -->
5 <h4 id="img-label">A short description of the image content</h4>
6 <div role="img" aria-labelledby="img-label"></div>
7
8 <!-- Use the "title" attribute -->
9 <div role="img" title="A short description of the image content"></div>
If the "image’s" purpose is purely presentational, make assistive thechnologies ignore it.
1 <div role="img" aria-hidden="true"></div>

How Users Are Affected

Users that are dependant on screen readers, or other assistive technology that uses text parsing to convey the content to the user, will not be able to perceive the image's content and purpose.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.1.1 Non-text Content (A)

Recommended Reading