alternative text (or alt text) is one of the simplest but most powerful elements to achieve an accessible website. Although many associate it only with SEO, its true function is much more important: Accessible alt text serves to ensure that everyone, including those who use screen readers, can understand the visual content of a page. But… How do you know what to put in and what not? This practical guide, with clear examples, explains it to you step by step.
What is alt text and who “reads” it?
Alt text is an HTML attribute that describes the content of an image. They “read” it mainly:
- Screen readers, used by people who are blind or have low vision.
- Search engines, such as Google, to correctly index the image.
- Browsers, when the image does not load.
It is also required by regulations such as WCAG (Web Content Accessibility Guidelines) and EN 301 549 in Europe.
In the HTML code, it looks like this:
The Golden Rule: Context, Context and Context
The biggest mistake when writing alt text is describing the image literally and in isolation. Context is everything. Think: What does this image contribute to the content? What does the user need to know if they cannot see it?
For example:
- Incorrect: “A woman with a laptop smiling.”
- Correct: “Designer reviewing prototype on laptop during team meeting.”
The second option contextualizes the image in relation to the content of the site.
Case 1: Informative Images
These are images that communicate essential information: photos of people, data graphs, explanatory illustrations.
Example 1: Team photo
- Incorrect: “Five people standing.”
- Correct: “Customer service team posing in the main office.”
Example 2: Sales graph
- Incorrect: “Colored bar graph.”
- Correct: “Graph showing 30% increase in quarterly sales in 2024.”
Key tip: Be concise, but informative. If the image is very complex, accompany it with a long description in the main text or with aria-describedby.
Case 2: Functional Images
These do not show visual information, but execute actions: buttons, icons, links.
Here we do not describe what you see, but what you do.
Example 1: Search icon
- Incorrect: “Magnifying glass”
- Correct: “Search”
Example 2: Button with envelope icon
- Incorrect: “About”
- Correct: “Send message”
*Use phrases like: “Go to top”, “Download report”, “Close menu”.
Case 3: Decorative Images
If an image does not provide information and is there only for aesthetics or visual filler, it should not have alternative text.
Example: background ornaments, floral borders, shadows.
The correct thing is:
This alt=”” indicates the screen reader that it can ignore it, avoiding confusion or redundancy.
Quick Checklist to Evaluate Your Alternative Text
Before publishing, ask yourself these 5 questions:
- Does it describe the purpose of the image, not just its appearance?
- Does it make sense within the context of the content?
- Is it brief but informative (maximum 125 characters)?
- Do you avoid unnecessary phrases like “image of…” or “photo of…”?
- Is it different depending on the type of image (informational, functional or decorative)?
If you answer “yes” to all of them, you’re on the right track!
Conclusion
Alternative text is not just a technical box that needs to be filled out: it is an opportunity to create a more inclusive website and, in the process, improve your search engine positioning. Think about the context, the intention and the person who cannot see the image but wants to understand it.
