What it looks like
Alt text lives in the alt attribute of the img element. Visitors do not see it on the page unless the image fails to load.
<img src="/images/red-running-shoes.jpg" alt="Red running shoes on a wooden floor">
An image that is only decoration, such as a divider line or a background shape, gets an empty attribute. That tells screen readers to skip it.
<img src="/images/divider.png" alt="">
Good alt text says what the image shows in one short sentence. Write it the way you would describe the picture to someone over the phone. There is no need to start with "image of", because a screen reader already announces that it is an image.
Why it matters
- Accessibility. People who use a screen reader hear the alt text in place of the image. Without it they may hear a file name or nothing at all.
- Search engines. Google uses alt text, together with the text around the image, to understand what the picture shows. That helps the image appear in image search.
- Broken images. If the image does not load, the browser shows the alt text in its place.
- Linked images. When an image is a link, its alt text does the job of anchor text. It tells people and search engines where the link goes.
COMMON MISTAKEFilling alt text with a list of keywords. Describe the image for a person who cannot see it. If a keyword fits the description naturally, use it once.
How to check yours
- Open a page in your site editor and click an image. Look for a field named alt text, alternative text or image description.
- Read what is there. Ask whether it would make sense to someone who cannot see the picture.
- Add a description to every image that carries meaning. Leave the field empty for pure decoration.
- Run the free audit on the page. It counts the images that have no alt attribute.