Back to Info and Examples for Accessibility Insights for Web
role-img-alt
Elements with role="img" must have alternative text.
Why it matters
The attribute role="img" is used to identify the container for a collection of elements that together form a single meaningful image.
Alternative text is a word or phrase that (1) is coded in a way that assistive technologies can associate it with a specific non-text object, and (2) conveys the same information as the non-text object.
Because assistive technologies can’t interpret images directly, they rely on alternative text to communicate the meaning of non-text content to users.
How to fix
For each element with role="img" :
- Determine whether the image as a whole is meaningful or decorative:
- An image is meaningful if it conveys information that isn’t available through other page content.
- An image is decorative if it could be removed from the page with no impact on meaning or function.
- If the image is meaningful, provide alternative text using one of the following attributes:
aria-labelaria-labelledbytitle
- If the image is decorative, replace
role="img"withrole="presentation"orrole="none".
For tips on writing good text alternatives, see Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
Example
Fail
<div> is correctly identified as the container for an image (composed of ASCII characters), but it has no alternative text.
Assistive technologies can't tell users anything about the image's meaning.<div role="img">(ㆆ _ ㆆ)</div>
Pass
aria-label attribute allows assistive technologies to describe the image to users.<div role="img" aria-label="scared face">(ㆆ _ ㆆ)</div>
About this rule
This rule passes if ANY of the following is true:
- Element has a non-empty
aria-labelattribute - Element has an
aria-labelledbyattribute that references elements that are visible to screen readers - Element has a non-empty
titleattribute