Ensure [role=img] Elements Have Alternate Text

Casandra Visser

Author

Yotam Flohr

Researcher

Ritvik Shrivastava

Expert

July 29, 2024

Disabilities affected: Blind Hearing

Standards: WCAG 2.2 Level A

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.