org.sonar.l10n.web.rules.Web.S6851.html Maven / Gradle / Ivy
Why is this an issue?
alt attributes, also known as "alt tags" or "alt descriptions," are used to specify alternative text that is rendered when an image
cannot be displayed. They are crucial for improving web accessibility, as they provide a text description of images for users who rely on screen
readers.
Screen readers announce the presence of an <img> element and read its alt attribute aloud to describe the image. If
the alt attribute includes words like "image", "picture", or "photo", it leads to redundancy as the screen reader would repeat "image".
For instance, an alt attribute like "image of a sunrise" would be read as "Image, image of a sunrise", unnecessarily repeating
"image".
Instead, the alt attribute should focus on describing the content of the image, not the fact that it is an image. This makes the
browsing experience more efficient and enjoyable for users of screen readers, as they receive a concise and meaningful description of the image
without unnecessary repetition.
How to fix it
To fix this issue, you should revise the alt attribute of your <img> elements to remove any instances of the words
"image", "picture", or "photo". Instead, provide a concise and accurate description of the image content that adds value for users who cannot see the
image.
Code examples
Noncompliant code example
<img src="sunrise.jpg" alt="image of a sunrise" /> <!-- Noncompliant: "Image, image of a sunrise" -->
Compliant solution
<img src="sunrise.jpg" alt="a sunrise over a mountain range" />
Resources
Documentation
- MDN web docs - img element
- MDN web docs - alt property
- WebAIM - Alternative Text