Alt text for image

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:

1. The text should be descriptive
2. The text should be concise
3. The alt text must not start with ‘image’, ‘graphic’ or ‘picture’
4. 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.