Writing Alt Text That Actually Helps

Concept

alt holds the text alternative for an image: what a reader gets instead of the picture when they cannot see it. That covers more people than most developers expect - screen reader users, readers on connections where images fail, people who have images switched off to save data, and search engines, which have no eyes at all.

The question to answer is not what is in this picture. It is what would I have written here if I could not use an image?

The decision tree

Is the image purely decorative?

A divider, a background flourish, an icon sitting next to text that already says the same thing. Write an empty alt:

<img src="/images/swirl.svg" alt="">

<p><img src="/icons/phone.svg" alt=""> +91 20 2600 1234</p>

An empty alt is an instruction: skip this, it adds nothing. Leaving the attribute out entirely does the opposite - the screen reader falls back to announcing the file name, and swirl underscore final underscore two dot s v g is worse than silence.

Does the image carry information?

Describe the information, not the pixels.

<!-- weak -->
<img src="chart.png" alt="Chart">

<!-- also weak: describes the object, not the point -->
<img src="chart.png" alt="A bar chart with four blue bars">

<!-- useful -->
<img src="chart.png" alt="Bus ridership by year: 2023 lowest at 1.2 million, rising each year to 2.1 million in 2026">

Is the image inside a link or a button?

Then the alt text is the link text, and it must describe the destination.

<a href="/"><img src="/logo.svg" alt="Riverside College home"></a>

<button type="submit"><img src="/icons/search.svg" alt="Search"></button>

An empty alt here leaves a link with no accessible name, announced as link and nothing else. It is one of the most common serious accessibility failures on the web.

Is the image already described by adjacent text?

Do not repeat it. If the caption beneath says what the picture shows, an empty alt avoids hearing it twice.

<figure>
  <img src="/images/press.jpg" alt="">
  <figcaption>The hand press in the college museum, still holding set type.</figcaption>
</figure>

Is it a photograph in an article?

Describe what a sighted reader would take from it, in one sentence.

<img src="/images/queue.jpg"
     alt="A queue of about forty people outside the admissions office in the rain">

Length and style

• Aim for one sentence. Around one hundred and twenty five characters is a common practical ceiling, because several screen readers cut off around there.
• Do not start with image of or picture of. The screen reader already announces that it is an image.
• End with a full stop. It gives the screen reader a natural pause.
• Write plain prose, not keywords.
• If the image genuinely needs a paragraph - a complex diagram, a data table rendered as a picture - put the long description in the page text or a linked page, and keep the alt short.

Example: the same image, four contexts

Same file, four alternatives. Alt text depends on why the image is there, which is why it can never be generated automatically with any confidence.

Alt text and SEO

Google uses alt text to understand and rank images, and image search sends real traffic. But the guidance from Google and from accessibility standards points in exactly the same direction: describe the image helpfully in natural language. Keyword stuffing - alt="buy shoes online cheap shoes best shoes india" - is treated as spam and is unusable when read aloud.

Write for the person listening. The search benefit follows.

Important rules

• Every img needs an alt attribute. The value may be empty; the attribute may not be missing.
• An image inside a link must have alt text unless there is other text in the same link.
• alt is not a tooltip. Browsers do not show it on hover; that is title.
• A CSS background image has no alt at all, which is why anything meaningful must be a real img.
• Text inside an image must be repeated in the alt, in full.

Common mistakes

• Omitting the attribute for decorative images instead of writing alt="".
• Using the file name, or leaving in a camera name such as DSC_0431.
• Starting every alt with image of.
• Writing alt="logo" on a logo that links to the home page.
• Repeating the caption word for word in the alt.
• Stuffing keywords.
• Putting important text in an image with no alt, so the content simply does not exist for some readers.

Best practices

• Write the alt at the same moment you place the image, never as a cleanup task later.
• Ask what the image is doing on the page, then write that.
• For charts, state the trend or the finding, and put the full data in a table nearby.
• Test with a screen reader occasionally. Ten minutes changes how you write alt text permanently.
• Add an automated check that flags missing alt attributes in review.

Practice

1. Write alt text for a photograph of a crowded railway platform in three different articles: one about overcrowding, one about a new station roof, one where it is a decorative header.
2. Find a page where the logo links home. Is the alt text useful when read alone?
3. Turn off images in your browser and read one of your own pages. What content vanished?
4. Write alt text for a line chart in under one hundred and twenty five characters that still conveys the finding.