Elements containing role="img" have an alternative text

Rule ID: role-img-alt
Ruleset: axe-core 4.1
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), Section 508

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

Compliance Data & Impact

User Impact

Serious
▼
Minor
Critical

Disabilities Affected

  • Blind
  • Deafblind

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • Section 508

WCAG Success Criteria [WCAG 2.1 (A)]

  • 1.1.1: MUST: Non-text Content

WCAG Success Criteria [WCAG 2.0 (A)]

  • 1.1.1: MUST: Non-text Content

Section 508 Guidelines

  • 1194.22: MUST: Web based intranet and Internet Information & Applications
  • 1194.22 (a): MUST: A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)

How to Fix the Problem

Correct markup solutions

The following four markup examples all pass because each example contains markup rendered as alternative 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>

Incorrect markup solutions

The following five examples fail the role-img-alt rule because the markup contains no corresponding and meaningful alternative text: 

<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>

Why it Matters

Screen readers have no way of translating an image into words that gets read to the user, even if the image only consists of text. As a result, it's necessary for images to have short, descriptive and accessible alternative text so screen reader users clearly understand the image's contents and purpose.

If you can't see, all types of visual information, including images, are completely useless unless an accessible text alternative is provided which screen readers can convert into either sound or braille. People with low vision or color-blindness disabilities also require accessible alternative text to varying degrees.

Screen readers cannot convert visual image information to speech or braille in the absence of an accessible text alternative associated with the image.

Rule Description

Ensures elements marked role="img" elements have alternate text.

The Algorithm (in simple terms)

Elements with the role="img" attribute value must also contain markup specifying accessible alternative text describing the image.

Resources

Deque University Course Pages (subscription required)

Contribute to axe-core on GitHub

Other Resources

You may also want to check out these other resources.

Refer to the complete list of axe 4.1 rules.

Was this information helpful?

You have already given your feedback, thank you..

Your response was as follows:

Was this information helpful?
Date/Time feedback was submitted: