Images must have alternate text: Element has no title attribute

Question

What is meant by Images must have alternate text: Element has no title attribute

I had created img tag but developer tools gives me a warning but i can't understand what that means.

Affected resources <img src="./img/twitter.png">

Answer 1

This has to do with screen readers. Screen readers have no way of translating an image into words that gets read to the user, even if the image only consists of text. As a result, it's necessary for images to have short, descriptive alt text so screen reader users clearly understand the image's contents and purpose.

There are 3 ways to give an image alternate text:

Using an alt attribute i.e. <img alt="drawing of a cat" src="...">

Using an aria-label i.e. <img aria-label="drawing of a cat" src="...">

Using an aria-labelledby attribute i.e. <img arialabelledby="someID" src="..."

Answer 2

The alt attribute is needed when the picture is not available or the user turned all pictures off in his/her browser. It's necessary to include this attribute to your img elements.

<img src=".." alt="Alternative text" width="200" height="100" aria-label="For screen readers" />