<img> element has an
alt attribute that should be populated with text describing that image. The content of an image’s
alt attribute is used in various situations:
- Search engines can’t see images the same way people do, so they’re going to look at the content of the
- When people have their browsers configured to not load images (which is more people than you might think; many have restrictive data and/or bandwidth limits).
- Non graphical browsers, including screen readers, will use the text in the
altattribute in place of the image.
- If the image fails to load, or the image format is not supported by the browser, the alternative text will be displayed instead.
If you find yourself wondering what you should put in an
alt attribute ask yourself this question: If you were describing this website to a friend over the phone, and they had no way to view it, how would you describe this image? The answer is what you put for the value of that image’s
Some image elements are not integral to the content of the page, like decorative images. If you wouldn’t mention a particular image to your friend on the phone that
<img> element should still have an
alt attribute, but its value should be an empty string, like this:
<img alt="" src="...">
alt attribute with an empty string indicates that non-visual browsers, like screen readers, can simply ignore the image.
For images that are a key part of the content, but have no appropriate textual description, the
alt attribute should be omitted entirely (but this is almost never the case).