Text alternatives for images

A text alternative is the words that stand in for an image when the image itself can't be seen — read aloud by a screen reader, shown when images are off, and indexed by search engines. The job of alt text is not to describe a picture in the abstract; it is to convey the same purpose and information the image conveys in its context. The same photo can need different alt text on different pages, and sometimes the right alternative is no text at all. This lesson walks through the four decisions that cover almost every image you'll meet.

What you'll learn

How to write concise, meaningful alt for an informative image; why a decorative image needs an empty alt="" rather than a missing one; how to replace an image of text — or name an icon-only control — with real text; and how to pair a short alt with a longer description for a complex chart or diagram.

Standards this lesson maps to
Standard Criterion Level What it requires
WCAG 2.2 1.1.1 Non-text Content A All non-text content has a text alternative that serves the equivalent purpose; pure decoration is hidden from assistive technology.
WCAG 2.2 1.4.5 Images of Text AA Use real text rather than images of text, except where a particular presentation is essential (e.g. logos).
EN 301 549 9.1.1.1 / 9.1.4.5 (incorporate WCAG) — European harmonised standard; references the WCAG A/AA non-text content and images-of-text requirements.
Section 508 502.3 (incorporates WCAG A & AA) — US federal ICT must meet WCAG 2.0 Level A and AA, including text alternatives for non-text content.
ADA Title II WCAG 2.1 AA (DOJ rule) AA US state and local government web content must conform to WCAG 2.1 AA, which includes 1.1.1 and 1.4.5.
EAA EN 301 549 → WCAG A & AA AA The European Accessibility Act relies on EN 301 549, which references these WCAG criteria.

The four decisions we'll fix

Each card below isolates one common image defect. For every issue you get a plain-language statement of the problem, a Bad example (shown as escaped, non-running code so it can't affect this page), a Good example, the copyable Code, and an ordered fix.

Informative image with no alt text

WCAG 2.2 · 1.1.1 A EN 301 549 Section 508

An image that carries information — a chart, a product photo, a status icon — has no text alternative at all. A screen reader can't invent one, so it falls back to reading the file name (“chart dot png”) or announcing a bare “image”, and the information the picture carried never reaches the user. When images are turned off, there is nothing in its place either.

Bad

The image has no alt attribute, so its meaning — last quarter's sales trend — is lost to anyone not seeing it.

bad-informative.html 
<img src="chart.png">

Good

A concise alt states the point of the chart, not the fact that it is an image. The live SVG below is an information image with an equivalent accessible name.

Quarterly sales rose from 40 to 90 units across Q1 to Q4 2025

good-informative.html 
<img src="chart.png"
     alt="Quarterly sales rose from 40 to 90 units, Q1–Q4 2025">

Code

Write alt for the purpose, not the pixels. Drop phrases like “image of” or “photo of” — the screen reader already announces the role “image”. Match the level of detail to what the image communicates here.

alt-conveys-purpose.html 
<!-- Avoid: redundant role words and a vague name -->
<img src="ceo.jpg" alt="Image of a person">

<!-- Prefer: the meaning the photo carries in context -->
<img src="ceo.jpg" alt="Dana Levy, Chief Executive">

How to fix

  1. Decide what the image tells the user in this context, then write that as the alt value.
  2. Keep it concise — usually a short phrase or sentence; move any longer detail to a caption or long description.
  3. Drop redundant openers like “image of”, “photo of”, or “graphic of”.
  4. Never leave alt off an informative image; a missing attribute triggers file-name or “image” fallbacks.

Decorative image announced as noise

WCAG 2.2 · 1.1.1 A EN 301 549 Section 508

A purely decorative image — a flourish, a divider, a background texture, or an icon sitting next to text that already says the same thing — adds nothing a caption would. If it's given descriptive alt, or the alt attribute is left off so the screen reader reads the file name, it becomes clutter the user has to listen through. Decorative images should be skipped silently.

Bad

A spacer graphic with no meaning is given chatty alt, so the screen reader stops to announce decoration that carries no information.

bad-decorative.html 
<h2>
  <img src="sparkle.png" alt="decorative blue sparkle divider">
  Our values
</h2>

Good

An empty alt="" tells assistive technology to skip the image entirely. The live decorative SVG below uses aria-hidden="true", the SVG equivalent, so it is announced as nothing.

good-decorative.html 
<h2>
  <img src="sparkle.png" alt="">
  Our values
</h2>

Code

Empty alt="" (not a missing attribute) hides an <img>. For an inline <svg> use aria-hidden="true"; for purely cosmetic art, a CSS background-image keeps it out of the document entirely.

decorative-options.html 
<!-- Raster image: empty alt, attribute still present -->
<img src="texture.png" alt="">

<!-- Inline SVG: hide it from the tree -->
<svg aria-hidden="true" focusable="false">...</svg>

<!-- Pure decoration: move it to CSS -->
<div class="hero" style="background-image:url(texture.png)"></div>

How to fix

  1. Decide whether the image adds information. If a caption would say nothing useful, it's decorative.
  2. For a decorative <img>, set alt="" — keep the attribute, leave the value empty. Don't remove alt.
  3. For a decorative inline <svg>, add aria-hidden="true" and focusable="false".
  4. For background flourishes, render them in CSS so they never enter the accessibility tree.

Image of text, or an icon-only control with no name

WCAG 2.2 · 1.1.1 A 1.4.5 AA EN 301 549

Two related defects. First, a heading, button label, or paragraph is baked into an image instead of being real text — so it can't be resized, recolored, or restyled, and it blurs when zoomed (WCAG 1.4.5). Second, an icon-only link or button — a bare magnifier or trash can — has no text at all, so it's announced as just “link” or “button” (WCAG 1.1.1 / accessible name). Both hide meaning that should be plain text.

Bad

A tagline rendered as a JPEG, and a search link whose only content is an icon. Neither exposes usable text.

bad-image-of-text.html 
<!-- A heading rendered as a picture of text -->
<img src="tagline.jpg">

<!-- An icon-only link with no name -->
<a href="/search">
  <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg>
</a>

Good

Use real text styled with CSS for the tagline, and give the icon link a name with visually-hidden text (or aria-label). The live link below is named “Search”.

good-real-text.html 
<!-- Real, styleable text instead of an image -->
<h2 class="tagline">Accessibility for everyone</h2>

<!-- Icon link with a visually hidden name -->
<a href="/search">
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/>
  </svg>
  <span class="visually-hidden">Search</span>
</a>

Code

When an image of text is unavoidable (a rare exception, e.g. a logo whose wording is part of the brand), reproduce the exact wording in alt. For an icon control where you can't add a child, use aria-label.

exceptions.html 
<!-- Essential image of text (logo): alt repeats the words -->
<img src="logo.svg" alt="EqualWeb Academy">

<!-- Icon button named with aria-label -->
<button type="button" aria-label="Delete item">
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <path d="M6 7h12M9 7V5h6v2M8 7l1 12h6l1-12"/>
  </svg>
</button>

How to fix

  1. Replace images of text with real text and reproduce the look with CSS — fonts, color, gradients, and shadows all scale and reflow.
  2. Reserve images of text for the few cases where the presentation is essential (logos, brand wordmarks); then put the exact words in alt.
  3. Give every icon-only control a name: a visually-hidden span inside it, or aria-label on it.
  4. Mark the decorative icon with aria-hidden="true" and focusable="false" so it isn't double-announced.

Complex image with no long description

WCAG 2.2 · 1.1.1 A EN 301 549 Section 508

A chart, diagram, map, or infographic packs in data and relationships that no single short phrase can capture. A bare alt="bar chart" names the format but withholds the content, while cramming every data point into alt produces an unreadable wall of speech. Complex images need a short alternative that says what they are, plus a longer description that conveys the detail.

Bad

The alt names the chart type but none of its content, and there is no fuller description anywhere on the page.

bad-complex.html 
<img src="regional-sales.png" alt="bar chart">

Good

Pair a short alt with a visible <figcaption> that carries the detail — so everyone benefits, not only screen-reader users. The live figure below uses this pattern.

Bar chart of 2025 sales by region
2025 sales by region: North 40, East 60, South 25, West 50 (thousands of units). East led; South trailed by more than half.
good-figcaption.html 
<figure>
  <img src="regional-sales.png" alt="Bar chart of 2025 sales by region">
  <figcaption>
    2025 sales by region: North 40, East 60, South 25, West 50
    (thousands of units). East led; South trailed by more than half.
  </figcaption>
</figure>

Code

If the description is long or shouldn't show visually, link to it or associate it with aria-describedby. A data table is often the clearest long description of a chart.

long-description.html 
<!-- Short alt + a description associated by id -->
<img src="regional-sales.png"
     alt="Bar chart of 2025 sales by region"
     aria-describedby="sales-desc">
<p id="sales-desc">
  North 40, East 60, South 25, West 50 (thousands of units).
  East led; South trailed by more than half.
</p>

<!-- Or link to a fuller page / data table -->
<img src="regional-sales.png" alt="Bar chart of 2025 sales by region">
<a href="sales-table.html">View the data behind this chart</a>

How to fix

  1. Give the image a short alt that names what it is and its headline takeaway.
  2. Provide the detail in a fuller description — a visible <figcaption>, prose linked nearby, or text tied with aria-describedby.
  3. For data, offer the underlying numbers as a real <table> — usually the clearest equivalent of a chart.
  4. Make sure the description is reachable by keyboard and screen reader, and that any link to it actually resolves.

Recap

Decision guide

Before you ship an image, ask what role it plays — then follow the matching rule:

  • Informative (it adds meaning) → write concise alt that conveys that meaning; don't start with “image of”.
  • Decorative (it adds nothing a caption would) → give it an empty alt="", or use a CSS background; never omit alt.
  • Image of text or icon-only control → use real text styled with CSS, or give the control a name with visually-hidden text or aria-label.
  • Complex (chart, diagram, map) → give a short alt naming what it is, plus a fuller description in a visible <figcaption> or linked long text.

One defect, one fix — and the same fix satisfies WCAG, EN 301 549, Section 508, ADA, and the EAA at once.