No [alt] Attributes in Images

The Google Lighthouse system easily detects an image element with no alt text on your website. After this process, this element will be flagged. In this way, you can see it easily. Here is an image of the audit:

How to pass the audit: Adding Alternative Text to Images

It is necessary to add an alternative text to each image element to pass the audit. In this way, even if the image has a problem loading on the site, the alt text that will appear will provide users with detailed information about what the image is about.

The alternative text of image element has should be extremely short. Don’t write a long sentence here. What you have to do is use a hashtag-like phrase that explains what the image is about. You can also use underscores in the phrase.

Here is an example of an img element with alt text added:

<img alt="Audits set-up in Chrome DevTools" src="...">

Sometimes, images don’t have a clear purpose. Since the images used for decorative purposes do not have a function, you can leave their alt text empty. In this case, the text will appear as “” in HTML. By doing this, you will remove the image in question from the accessibility tree. Here is an example for this: 

<img src="background.png" alt="">

How to create an alt text for img element?

You can create alt text for an img element by taking care of the following tips: 

1. What alt text does is to briefly state the purpose and function of the image.
2. In addition, blind users should only be able to understand what the image is about through text. So you need to create a text that gives both simple and comprehensive information.
3. Finally, avoid non-specific words that can be used for almost any image. For example, do not write words such as ” image ”, ” chart ”, ” diagram ” in the bottom text.