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

[source,html]
----
<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.

[source,html]
----
<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

[source,html,diff-id=1,diff-type=noncompliant]
----
<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

[source,html,diff-id=1,diff-type=compliant]
----
<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 - https://www.w3.org/WAI/tutorials/images/decision-tree/[W3C WAI Web Accessibility Tutorials]
* W3C - https://www.w3.org/TR/WCAG20-TECHS/H24.html[Providing text alternatives for the area elements of image maps]
* W3C - https://www.w3.org/TR/WCAG20-TECHS/H36.html[Using alt attributes on images used as submit buttons]
* W3C - https://www.w3.org/TR/WCAG20-TECHS/H37.html[Using alt attributes on img elements]
* W3C - https://www.w3.org/TR/WCAG20-TECHS/H67.html[Using null alt text and no title attribute on img elements for images that AT should ignore]
* W3C - https://www.w3.org/TR/WCAG20-TECHS/H2.html[Combining adjacent image and text links for the same resource]
* W3C - https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-text-equiv-all[Non-text Content]
* W3C - https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-navigation-mechanisms-refs[Link Purpose (In Context)]
* W3C - https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-navigation-mechanisms-link[Link Purpose (Link Only)]


ifdef::env-github,rspecator-view[]

'''
== Implementation Specification
(visible only on this page)

=== Message

Add an 'alt' attribute to this image


'''
== Comments And Links
(visible only on this page)

=== on 8 Jul 2013, 18:27:18 Freddy Mallet wrote:
Is implemented by \http://jira.codehaus.org/browse/SONARPLUGINS-2908

endif::env-github,rspecator-view[]
