org.sonar.l10n.web.rules.Web.ImgWithoutAltCheck.html Maven / Gradle / Ivy
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)