Ensure [role=img] Elements Have Alternate Text
Blind
Hearing
WCAG 2.2 Level A
Written and researched for humans by humans
Casandra Visser
Author
Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments:
0
Web accessibility standards require elements marked role=”img” to have alternate text.
Why It Matters
Without alternative text, screen readers have no way of translating an image into words for users. For this reason, images should have short, descriptive and accessible alternative text.
People with low vision or color-blindness disabilities also require accessible alternative text to varying degrees.
Screen readers cannot convert visual images into speech or braille when alternative text is not present.
Fixing the Issue
Make sure that all elements with role=”img” have alt text.
Good Code Example
Code example
<div id="match">Bananas</div>
<div role="img" aria-labelledby="match" id="pass2"></div>
<div id="hidden-match" style="display:none">Banana bombs</div>
<div role="img" aria-labelledby="hidden-match" id="pass3"></div>
<div role="img" aria-label="blah" id="pass1"></div>
<div role="img" title="title" id="pass4"></div>
Copy
Bad Code Example
Code example
<div role="img" id="violation1"></div>
<div role="img" aria-label="" id="violation2"></div>
<div role="img" alt="blah" id="violation3"></div>
<div role="img" aria-labelledby="no-match" id="violation4"></div>
<div role="img" title="" id="violation5"></div>
Copy
Test Cases
For more examples, visit the W3C’s GitHub’s ATC Rules library.