Ensure [role=img] Elements Have Alternate Text
Blind
Hearing
WCAG 2.1 Level A
Web accessibility standards require elements marked role=”img” to have alternate text.
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.
Make sure that all elements with role=”img” have alt text.
<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
<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
For more examples, visit the W3C’s GitHub’s ATC Rules library.