This guide is for the blogger who reaches the “alternative text” box in WordPress and types the file name, or a keyword, or nothing: the food blogger with 14 photos per recipe, the small-business owner adding team photos to an About page, the content manager tidying a site with years of untouched images. Alt text is read aloud by screen readers, shown when images fail to load, and used by search engines to understand images. Writing it well is quick once you know which kind of image you are dealing with.
What alt text is for
The alt attribute gives a text alternative for an image. A person using a screen reader hears it in place of the image. If the image does not load, many browsers show the alt text instead. Google’s SEO starter guide also recommends descriptive alt text, describing it as a short but descriptive piece of text that explains the relationship between the image and your content.
The key word there is relationship. Good alt text is not a full description of every pixel. It conveys what the image contributes to this page.
The W3C decision tree, simplified
The World Wide Web Consortium’s Web Accessibility Initiative publishes an alt decision tree that walks through the right choice for each kind of image. In summary:
| Question | If yes | Alt text approach |
|---|---|---|
| Does the image contain text that is also present as real text nearby? | Decorative for this purpose | Empty alt |
| Does it contain text that appears nowhere else? | Image of text | Include the text |
| Is it a link or button that would be unclear without it? | Functional | Describe the destination or action |
| Is it a simple photo or graphic that adds meaning? | Informative | Brief description conveying that meaning |
| Is it a chart or complex graphic? | Complex | Provide the information elsewhere on the page too |
| Does it repeat information already in nearby text? | Redundant | Empty alt |
| Is it purely decorative? | Decorative | Empty alt |
An empty alt attribute (written alt=””) tells screen readers to skip the image. That is different from leaving the attribute out, which can cause some screen readers to read the file name.
Writing alt text for informative images
Start with what matters on this page
The same photo can need different alt text in different articles. A photo of a red bicycle against a brick wall might be:
- In a cycling safety guide: “A city bike fitted with front and rear lights and a bell”
- In a home decor post about storage: “A bicycle hung on wall hooks in a narrow hallway”
- In a piece on colour in photography: “A red bicycle against a pale brick wall”
Keep it short
One sentence or a phrase is usually enough. Many accessibility guides suggest aiming for brevity because screen reader users hear the whole thing.
Skip “image of” and “photo of”
Screen readers already announce that the element is an image. Start with the content. Mention the medium only when it matters, such as “Watercolour sketch of…” in an art post.
Do not stuff keywords
“Best chocolate cake recipe easy chocolate cake moist chocolate cake” helps nobody. “Slice of chocolate layer cake with dark ganache” serves readers and still describes the subject clearly.
Ask: if this image disappeared, what would the reader miss? Write that.
Functional images
When an image is a link or button, the alt text should say what happens when it is used:
- A magnifying glass icon for search: alt “Search”
- A logo linking to the home page: alt “Northside Bakery home”
- A printer icon: alt “Print this recipe”
Describing the picture (“magnifying glass”) misses the point.
Images of text
If an image contains words that appear nowhere else, the alt text should include those words. Common examples on blogs are quote graphics and promotional banners.
- Banner reading “Autumn workshop: 12 October, Leeds”: alt “Autumn workshop: 12 October, Leeds”
Better still, put important text in real HTML text and use the image only as decoration. Real text can be resized, translated and searched.
Charts and complex images
A line chart of monthly traffic cannot be described fully in a few words. The W3C tree says to include the information elsewhere on the page. In practice:
- Give the image short alt text naming it: “Line chart of monthly newsletter sign-ups, January to June”
- Summarise the key point in the body text or caption: “Sign-ups doubled between March and May.”
- For important data, add a table below the chart.
Decorative images
Background textures, divider graphics, stock photos used only for atmosphere, and icons next to text that already says the same thing can all take empty alt. In WordPress, leaving the alt text field blank on an image block outputs an empty alt attribute in most themes.
Examples from a typical blog post
| Image | Purpose | Alt text |
|---|---|---|
| Featured photo of a laptop and notebook on a recipe-planning post | Atmosphere | Empty, or a brief description if your theme shows it as content |
| Step photo showing dough after first rise | Informative | Bread dough doubled in size in a glass bowl |
| Screenshot of a settings menu | Informative | WordPress Reading settings with “Search engine visibility” unticked |
| Pinterest-style graphic with the post title | Text duplicated in the h1 | Empty |
| Author headshot next to the byline | Redundant with the name | Empty, or the author’s name if it appears nowhere else |
Alt text, captions and titles: what each does
Bloggers often mix up three different fields in the media library.
Alt text
Read by screen readers and shown when the image fails. Not usually visible to sighted readers. This is the field that carries the image’s meaning.
Caption
Visible text below the image, read by everyone. Use it for context, credit or a point you want readers to notice: “Photo: Jane Doe via Openverse, CC BY 2.0” or “The dough after 90 minutes at room temperature.” If the caption already describes the image fully, the alt text can be shorter, but avoid repeating the caption word for word, because screen reader users may hear both.
Title attribute
Shown as a tooltip on hover in some browsers. It is not a reliable substitute for alt text, since many users never see it.
File names
Not read as alt text when alt is present, but a descriptive file name such as sourdough-first-rise.jpg is tidier than IMG_4821.jpg and helps you find images later. While you are tidying images, follow another point from Google’s starter guide: place high-quality images near the text they relate to, so the image and its surrounding words support each other. A step photo belongs beside the step it shows, not in a gallery at the end.
Auditing alt text on an existing site
1. Use a crawler or accessibility checker to list images with missing alt attributes.
2. Start with your most-visited posts.
3. Decide for each image: informative, functional, text, complex or decorative.
4. Write or clear the alt text accordingly.
5. Add alt text as a step in your publishing checklist so new posts arrive complete.
Alt text checklist
- Every image has an alt attribute, empty or filled
- Informative images described by what they add to this page
- Functional images describe the action or destination
- Text in images repeated in the alt (or moved to real text)
- Charts named in alt and explained in body text or a table
- Decorative images use empty alt
- No “image of”, file names or keyword lists
Takeaway
Alt text replaces an image for people who cannot see it. Use the W3C decision tree: describe informative images by what they contribute, describe links by where they go, repeat any text the image carries, explain complex graphics on the page, and leave decorative images empty.
