Alt Text Best Practices
Alt text, short for alternative text, is a written description of an image added to the HTML. Screen readers read it aloud to people who cannot see the image, and it appears if the image fails to load. Search engines also use it to understand images. Good alt text is brief, accurate, and written for the context.
Decide whether the image needs it
Informative images convey something the text does not, like a product photo or a diagram. They need descriptive alt text.
Decorative images add only visual flavor, like a divider or background flourish. Give them empty alt text (alt="") so screen readers skip them. Do not leave the attribute out entirely, because some readers will then announce the file name.
Functional images, like an icon inside a button or a linked logo, should describe the action or destination, not the picture. For example, "Search" or "Monopage home."
How to write it
- Describe what matters in context. Ask what you would tell someone over the phone if they needed to know what the picture shows and why it is there.
- Be concise. A short sentence is usually enough. Many guides suggest staying around 125 characters or fewer, though there is no strict rule. Longer descriptions can be placed in the surrounding text.
- Skip "image of" and "picture of." Screen readers already announce that it is an image.
- Include relevant text. If the image contains words, such as a sign or banner, include them.
- Be specific. "Golden retriever catching a frisbee on a beach" is better than "dog."
Complex images
Charts, graphs, and infographics need more than a short label. Give a brief alt description and put the full data or explanation in nearby text or a table, so everyone can access it.
Avoid keyword stuffing
Cramming search terms into alt text hurts accessibility and can look spammy. Use relevant words only where they naturally describe the image. Read more in image SEO.
Avoid redundancy
If a caption already describes the image fully, the alt text can be shorter or empty to avoid repetition.
Common mistakes
- Missing alt attributes
- File names as alt text, such as
IMG_2043.jpg - Describing the wrong thing
- Using the same alt text on every image
- Putting important text only inside images
How to check
Use a screen reader or a browser extension that displays alt attributes. Many accessibility testers flag missing alt text, though only a human can judge whether it is meaningful. See accessibility basics.
Where to add it
Most website platforms provide an alt text field when you upload or edit an image. Get into the habit of filling it in as you work. See how to use images on your website.
The bottom line
Describe meaningful images briefly and accurately, mark decorative ones as empty, and write for the person who cannot see them.