Alt text for image
Last updated:
How to fix this issue?
<img>
elements must have an alternative text that can be used by assistive technologies such as screen readers. Add the alt
attribute to add alternative text:
<img src="team.png" alt="The employees of Company-name in front of the office" />
There are 2 other techniques that add alternative text to an image by using aria-label
or aria-labelledby
. However, the most common technique is to use the alt
attribute.
How to write a good alt text?
Writing a good alt
text can be challenging. One helpful approach is to describe the image to someone who hasn’t seen it yet, or to imagine yourself explaining the image to someone right in front of you.
The following should be taken into account when writing an alt
text:
- The text should be descriptive
- The text should be concise
- The
alt
text must not start with ‘image’, ‘graphic’ or ‘picture’ - An
alt
text should fit well in the context of the page
What to do with decorative images?
Sometimes, images on a page serve only as visual enhancements and do not provide additional information. In such cases, you need to inform assistive technologies, such as screen readers, that the image is decorative. You can do that by adding an empty alt=""
attribute.
<img src="yellow-dots.png" alt="" />
Why does it matter?
People who use assistive technologies such as screen readers can’t see an image. The screen reader therefore needs text that can be read to the user.
Another benefit of adding alt texts is that it enables robots and search engines to interpret the content of an image.
Free Website Accessibility Audit
Checkout the ExcellentWebCheck services
ExcellentWebCheck's goal is to improve the online user experience. The tools of ExcellentWebCheck help to detect and improve usability problems on your website.