Prefer not to use words image, photo in image alt content JS-0750
Performance
Minor
11 days ago
—
11 days old
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 prop58 </div>
59 {imagePreview ? (
60 <div className="mt-4 flex justify-center">
61 <img62 alt="Image Preview"63 className="w-40 h-auto rounded-md shadow-md"64 src={imagePreview}65 />66 </div>
67 ) : null}
68 </div>
Description
Enforce img alt attribute does not contain the word image, picture, or photo. Screenreaders already announce img elements as an image. There is no need to use words such as image, photo, and/or picture.
Bad Practice
<img src="foo" alt="Photo of foo being weird." />
<img src="bar" alt="Image of me at a bar!" />
<img src="baz" alt="Picture of baz fixing a bug." />
Recommended
<img src="foo" alt="Foo eating a sandwich." />
<img src="bar" aria-hidden alt="Picture of me taking a photo of an image" /> // Will pass because it is hidden.
<img src="baz" alt={`Baz taking a ${photo}`} /> // This is valid since photo is a variable name.