## Why is this an issue?

The `alt` attribute provides a textual alternative to an image.

It is used whenever the actual image 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 `alt` attribute 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 `<input type="image">` or `<area>` element has no `alt` attribute or it holds an empty string value.
- An `<img>` element has no `alt` 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

Add an alternative text to the HTML element.

### Code examples

#### Noncompliant code example

    <img src="foo.png" /> <!-- missing `alt` attribute -->
    <input type="image" src="bar.png" /> <!-- missing `alt` attribute -->
    <input type="image" src="bar.png" alt="" /> <!-- empty `alt` attribute 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 `alt` attribute -->
      <area shape="rect" coords="0,0,21,21"
        href="lounge.html" alt=""/> <!-- empty `alt` attribute on <area> -->
    </map>

#### Compliant solution

    <img src="foo.png" alt="Some textual description of foo.png" />
    <input type="image" src="bar.png" alt="Textual description of bar.png" />

    <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" alt="Lounge"/>
    </map>

## Resources

### Documentation

- W3C - W3C WAI Web Accessibility Tutorials
- W3C - Providing text alternatives for the area elements of image maps
- W3C - Using alt attributes on images used as submit buttons
- W3C - Using alt attributes on img elements
- W3C - Using null alt text and no title attribute on img elements for images that AT should ignore
- W3C - Combining adjacent image and text links for the same resource
- W3C - Non-text Content
- W3C - Link Purpose (In Context)
- W3C - Link Purpose (Link Only)