CODEWITHSUNDEEP
reactjscompiler-warnings
Anu
Anu

Reputation: 193

"Redundant alt attribute. Screen-readers already announce `img` tags as an image." Code ERROR

I typed <img src= {'https://robohash.org/${id}?size=300x300'}alt="photo" /> on my React js file, after I saved the file and I got an error message on GitBash saying ,

Redundant alt attribute. Screen-readers already announce 'img' tags as an image. You don’t need to use the words 'image', 'photo,' or 'picture' (or any specified custom words) in the alt prop jsx-a11y/img-redundant-alt

Then I removed the alt from the code, and I got the error message saying,

img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text

How can I fix this problem?

Upvotes: 2

Views: 23519

Answers (7)

Jnr
Jnr

Reputation: 1664

I got this message in a Svelte app img tag but had a space in it's alt attribute's value. Removing the space took the message away.

Upvotes: 0

Raj Yadav
Raj Yadav

Reputation: 1

From this to

<img className="card-img" src={'https://www.shutterstock.com/'} alt="Card image" />

This->

<img className="card-img" src={'https://www.shutterstock.com/'} alt="" />

Here we have to change the alt tag value other than image, photo or picture

Upvotes: 0

ASHISH PATEL
ASHISH PATEL

Reputation: 1

Declare one keyword like

let alText = 'photo'

and use

<img src= {'https://robohash.org/${id}?size=300x300'} alt={alText} />

Upvotes: 0

Konteye
Konteye

Reputation: 121

it's actually saying that inside your alt you don't need to use words like image, photo, or picture.

Example:

instead of

<img src="#" alt="photo"/>

try this :

<img src="#" alt="souvenir"/>

I put souvenir as an alt but you can choose any others words that describe well your image

Upvotes: 5

Rahmat Oktrifianto
Rahmat Oktrifianto

Reputation: 447

I have same error issues in my react app. You can try this following codes.

❌ not work

<img src={`https://robohash.org/${id}?size=300x300`} alt="photo" />

It's also not work.

<img src={`https://robohash.org/${id}?size=300x300`} alt="Photo by John Doe" />

Don't use alt that contain keywords : photo, image, or picture.

✅ work

For example: (change alt tag with some image description without keyword)

<img src={`https://robohash.org/${id}?size=300x300`} alt="cutest kitten" />

Maybe, empty alt is alternative option.

✅ work

<img src={`https://robohash.org/${id}?size=300x300`} alt="" />

Thanks.

Upvotes: 5

Thanh Hải
Thanh Hải

Reputation: 141

<img src= {'https://robohash.org/${id}?size=300x300'}alt="something" />

'something' diffrent from the words 'photo' and 'image' (or any specified custom words).

Upvotes: 13

Anu
Anu

Reputation: 193

I tried this one and it worked:

<input type="image" img src = {'https://robohash.org/${id}?size=300x300'} alt="photo" />

(I have used `` not the single quotation marks for the url)

Upvotes: 3

Related Questions