Alt text describes an image for people who cannot see it, including screen reader users. Good alt text is concise, specific and depends on why the image is there. Here are the rules with examples.
Alternative text, or alt text, is a short written description of an image added to the HTML alt attribute. Screen readers read it aloud to people who are blind or have low vision. Browsers display it if an image fails to load. Search engines use it to understand what an image shows. Writing it well is a simple, high-impact accessibility habit.
The key question: why is this image here?
Good alt text conveys the image's purpose in context, not just its appearance. The same photo might need different alt text on different pages. The W3C's alt decision tree is a helpful tool for deciding what each image needs.
Six rules for good alt text
1. Be specific and concise
Describe what matters in a sentence or less. "Dog" is too vague; "Golden retriever catching a frisbee on a beach" is clear.
2. Do not start with "Image of" or "Picture of"
Screen readers already announce that it is an image.
3. Include text that appears in the image
If an image contains important text, such as a sign or a quote graphic, include that text in the alt text. Better still, avoid putting important text in images at all.
4. Match the context
On a recipe page: "Finished lemon tart with a glossy top and golden crust." On a bakery's staff page, a photo of the baker: "Head baker Maria in the kitchen." Same principle, different purpose.
5. Use empty alt for decorative images
Purely decorative images, such as background patterns, dividers or a stock photo that adds no information, should have an empty alt attribute: alt="". This tells screen readers to skip them. Do not leave the attribute out entirely; some screen readers then read the file name.
6. Do not stuff keywords
Alt text helps image search when it accurately describes the image, but stuffing it with keywords makes it useless for people and can look spammy to search engines.
Special cases
Linked images and buttons
If an image is a link or a button, the alt text should describe the destination or action: a magnifying glass icon used as a search button should have alt="Search", not "Magnifying glass".
Logos
Use the organisation's name, e.g. alt="FlexyBlogs". If the logo links home, "FlexyBlogs home" is clearer.
Charts and infographics
Give a short alt text summarising the key message, such as "Bar chart showing website visits doubling between January and June", and provide the detailed data in the surrounding text or a table.
Complex images
Diagrams and maps may need a longer description in the page text, with the alt text pointing to it.
Examples
| Image | Weak alt text | Better alt text |
|---|---|---|
| Product photo on a shop page | shoe | Blue canvas trainers with white rubber soles, side view |
| Team photo on an About page | team.jpg | Our six-person support team outside the Pune office |
| Decorative divider | line | (empty: alt="") |
| Chart in a report | chart | Line chart: monthly sales rising from 120 in January to 310 in June |
Make it a habit
Write alt text at the moment you upload an image, while you remember why you chose it. Pair it with good file names and compression; see how to compress images for the web. To check a page, free tools such as WebAIM's WAVE evaluator highlight images with missing or suspicious alt text.
0 Comments
No comments yet — be the first to share what you think.