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
* Images loading is disabled, to reduce data consumption on mobile phones

It is also very important to not 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 bellow.


This rule raises an issue when

* an ``++<input type="image">++`` tag or an ``++<area>++`` tag have no ``++alt++`` attribute or their ``++alt++`` attribute has an empty string value.
* an ``++<img>++`` tag has no ``++alt++`` attribute.


== Noncompliant Code Example

----
<img src="foo.png" /> <!-- Noncompliant -->
<input type="image" src="bar.png" /> <!-- Noncompliant -->
<input type="image" src="bar.png" alt="" /> <!-- Noncompliant -->

<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"/> <!-- Noncompliant -->
  <area shape="rect" coords="0,0,21,21"
    href="lounge.html" alt=""/> <!-- Noncompliant -->
</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>
----


== Exceptions

``++<img>++`` tags with empty string ``++alt=""++`` attributes won't raise any issue. However this technic 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 it's ``++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.


See https://www.w3.org/WAI/tutorials/images/decision-tree/[W3C WAI Web Accessibility Tutorials] for more information.


== See

* https://www.w3.org/TR/WCAG20-TECHS/H24.html[WCAG2, H24] - Providing text alternatives for the area elements of image maps
* https://www.w3.org/TR/WCAG20-TECHS/H36.html[WCAG2, H36] - Using alt attributes on images used as submit buttons
* https://www.w3.org/TR/WCAG20-TECHS/H37.html[WCAG2, H37] - Using alt attributes on img elements
* https://www.w3.org/TR/WCAG20-TECHS/H67.html[WCAG2, H67] - Using null alt text and no title attribute on img elements for images that AT should ignore
* https://www.w3.org/TR/WCAG20-TECHS/H2.html[WCAG2, H2] - Combining adjacent image and text links for the same resource
* https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-text-equiv-all[WCAG2, 1.1.1] - Non-text Content
* https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-navigation-mechanisms-refs[WCAG2, 2.4.4] - Link Purpose (In Context)
* https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-navigation-mechanisms-link[WCAG2, 2.4.9] - Link Purpose (Link Only)


ifdef::env-github,rspecator-view[]
'''
== Comments And Links
(visible only on this page)

include::comments-and-links.adoc[]
endif::env-github,rspecator-view[]
