role-img-alt
Elements containing [role="img"] have an alternative text
Who might be affected
Screen Reader
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>34 <!-- 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>78 <!-- 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)