Why is this an issue?

Alternative text helps users understand non-text content when it cannot be seen.

Depending on the element, this alternative can be provided with alt, aria-label, aria-labelledby, title or fallback content.

It is used whenever the actual image or embedded content cannot be rendered.

Common reasons for that include:

The image can no longer be found
Visually impaired users using a screen reader software
Image loading is disabled, to reduce data consumption on mobile phones

It is also very important not to set an alternative text to a non-informative value. For example, <img ... alt="logo"> is useless as it doesn’t give any information to the user. In this case, as for any other decorative image, it is better to use a CSS background image instead of an <img> tag. If using CSS background-image is not possible, an empty alt="" is tolerated. See Exceptions below.

This rule raises an issue when:

An <img> element has no alt attribute and no non-empty aria-label or aria-labelledby attribute.
An <input type="image"> element has no non-empty alt, aria-label or aria-labelledby attribute.
An <area> element within an image map has no non-empty alt, aria-label or aria-labelledby attribute.
An <object> element has no non-empty inner text, accessible descendant content, title, aria-label or aria-labelledby attribute.

Exceptions

<img> elements with an empty string alt="" attribute won’t raise any issue. However, this way should be used in two cases only:

When the image is decorative and it is not possible to use a CSS background image. For example, when the decorative <img> is generated via javascript with a source image coming from a database, it is better to use an <img alt=""> tag rather than generate CSS code.

<li *ngFor="let image of images">
    <img [src]="image" alt="">
</li>

When the image is not decorative but its alt text would repeat a nearby text. For example, images contained in links should not duplicate the link’s text in their alt attribute, as it would make the screen reader repeat the text twice.

<a href="flowers.html">
    <img src="tulip.gif" alt="" />
    A blooming tulip
</a>

In all other cases you should use CSS background images.

How to fix it

Provide alternative text using the attribute or content expected by the element. Prefer alt for <img> elements.

Code examples

Noncompliant code example

<img src="foo.png" /> <!-- missing `alt` attribute -->
<img src="foo.png" aria-label="" /> <!-- empty accessible name -->

<input type="image" src="bar.png" /> <!-- missing alternative text -->
<input type="image" src="bar.png" alt="" /> <!-- empty alternative text on <input> -->

<img src="house.gif" usemap="#map1"
    alt="rooms of the house." />
<map id="map1" name="map1">
  <area shape="rect" coords="0,0,42,42"
    href="bedroom.html"/> <!-- missing alternative text -->
  <area shape="rect" coords="0,0,21,21"
    href="lounge.html" aria-labelledby=""/> <!-- empty accessible name on <area> -->
</map>

<object></object> <!-- missing alternative text -->
<object title=" "></object> <!-- empty alternative text -->

Compliant solution

<img src="foo.png" alt="Some textual description of foo.png" />
<img src="logo.png" aria-label="Company logo" />

<span id="bar-label">Textual description of bar.png</span>
<input type="image" src="bar.png" aria-labelledby="bar-label" />

<img src="house.gif" usemap="#map1"
    alt="rooms of the house." />
<map id="map1" name="map1">
  <area shape="rect" coords="0,0,42,42"
    href="bedroom.html" alt="Bedroom" />
  <area shape="rect" coords="0,0,21,21"
    href="lounge.html" aria-label="Lounge"/>
</map>

<object title="Sales chart"></object>
<object>
  Quarterly sales for 2026
</object>