Alt Text & Accessible Images

Before writing alt text, you have to know what kind of image you're looking at. Every image falls into one of three categories, and the category determines the markup you use.

1. Is the image conveying information the user needs? If yes, it's informative. Describe what that information is. The classic example: a photo of a product, a screenshot showing an error state, a map showing a location.
2. Is the image purely visual flourish? If yes, it's decorative. Hide it from assistive technology so users don't waste time on noise. Background patterns, hero art, dividers, and stock photos that duplicate adjacent text are all decorative.
3. Is the image inside a link or button? If yes, it's functional. Describe the action, not the image. A magnifying glass icon inside a search button is alt="Search", not alt="Magnifying glass".

Alt text is not an image caption. It's a text replacement — what a screen reader reads aloud in place of the image. Good alt text is specific, concise, and never redundant with surrounding text.

Rules of thumb

• Be specific. "Dog" is weak. "Golden retriever catching a frisbee mid-air on a beach" conveys the scene.
• Keep it concise. Aim for a single sentence, typically under 125 characters. Screen readers read alt text in one breath — long alt text becomes fatiguing. If you need more, use a caption, adjacent text, or a <figcaption>.
• Don't start with "Image of" or "Picture of." Screen readers already announce "image" or "graphic" before reading the alt text. Saying "Image of a sunset" becomes "image, image of a sunset."
• Context matters. The same image needs different alt text depending on where it appears. A product photo on a catalog listing might be alt="Red leather wallet". The same photo on the product detail page, where the name is already in the heading, might be alt="" or alt="Interior view showing six card slots."
• Don't repeat adjacent text. If a caption already says "CEO Jane Smith speaking at the 2026 conference," the image's alt text doesn't need to say it again. Use alt="" to skip it, or describe something the caption doesn't (her expression, the setting).
• Include text that appears in the image. If an image shows a quote, a chart label, or a sign, include that text in the alt attribute.

Good vs bad alt text

Decorative images add no information. They're visual polish. Hiding them from assistive technology is not just acceptable — it's the correct thing to do. Announcing every background swirl and divider line wastes the user's attention.

Three ways to mark an image as decorative

CSS background vs. empty alt

If an image is truly decorative and never needs to be part of the content, set it as a CSS background-image instead of using <img>. This moves it entirely out of the DOM's content tree. Reserve <img alt=""> for images that are content-adjacent but happen to be redundant (like the hero photo on an article that repeats the headline visually).

When an image lives inside an <a> or <button>, its alt text becomes the accessible name of that link or button. Describe what happens, not what the image looks like.

Examples

Text plus icon

When a link or button has visible text and an icon, the icon is usually decorative. Mark it so:

<button>
  <svg aria-hidden="true">...</svg>
  Save changes
</button>

If you give the icon its own alt text, screen readers announce both — users hear "floppy disk, Save changes, button" instead of just "Save changes, button."

Some images carry more information than fits in a 125-character alt attribute. Charts, diagrams, infographics, maps, and flow diagrams need a short alt attribute and a longer description elsewhere on the page.

The pattern

1. Short alt text names the image and summarizes the takeaway: alt="Bar chart showing sales doubling from 2024 to 2026".
2. Long description lives in adjacent text, a <figcaption>, or a linked page. It includes the actual data, the axes, and any trends the chart reveals.

Using <figure> and <figcaption>

<figure>
  <img src="sales-chart.png"
       alt="Bar chart: quarterly sales rose from $2M in Q1 to $8M in Q4 2026">
  <figcaption>
    Q1 2026: $2M. Q2: $4M. Q3: $6M. Q4: $8M.
    Year-over-year growth of 300%.
  </figcaption>
</figure>

The <figcaption> is visible to everyone — it's not hidden from sighted users. Many design systems style it as a smaller caption below the image. Screen readers associate the caption with the figure automatically.

Data tables instead of chart images

If your chart communicates precise data, consider providing the underlying table either inline or behind a disclosure. See the Disclosure pattern for one way to hide the table until requested. A well-marked-up data table is more accessible than any chart image — screen reader users can navigate it cell by cell, and keyboard users can copy the data.

Inline SVG

Inline SVGs don't support the alt attribute. Use these techniques instead:

• Decorative inline SVG: add aria-hidden="true". The SVG disappears from the accessibility tree entirely.
• Informative inline SVG: give the <svg> a role="img" and an accessible name via aria-label or a <title> element as the first child.

<!-- Decorative -->
<svg aria-hidden="true" viewBox="0 0 24 24">...</svg>

<!-- Informative -->
<svg role="img" aria-label="Warning" viewBox="0 0 24 24">...</svg>

<!-- Informative with <title> -->
<svg role="img" viewBox="0 0 24 24">
  <title>Warning</title>
  ...
</svg>

Icon fonts

Icon fonts (FontAwesome, Material Icons) render glyphs via CSS pseudo-elements. Screen readers sometimes read the underlying Unicode character as garbled text. Wrap the icon in a span with aria-hidden="true" and give the parent button or link an accessible name:

<button aria-label="Search">
  <span class="fa fa-search" aria-hidden="true"></span>
</button>

Prefer inline SVG over icon fonts — SVG renders more reliably, supports multi-color icons, and has better accessibility support.

Emojis

Emojis have built-in accessible names that screen readers announce automatically — 🎉 is announced as "party popper." This is usually helpful, but can be noisy when emojis decorate every heading or list item.

• Meaningful emojis: leave them as-is. The built-in name is usually accurate.
• Decorative emojis: wrap them in a <span aria-hidden="true">. Be deliberate — what reads as decoration to sighted users may carry meaning to someone hearing the page.
• Emojis as bullets or separators: always hide. A list where every item starts with ✅ will have "check mark, check mark, check mark" read between each item.

WCAG 2.2 Success Criterion 1.4.5 tells you to avoid images of text whenever real text will do. Images of text can't be zoomed without pixelation, can't be restyled by users who need high-contrast themes or custom fonts, and can't be translated by browser translation tools.

When images of text are okay

• Logos and brand marks — the visual presentation is essential.
• Screenshots illustrating a UI — the point is to show the interface, not the words.
• Decorative typography that can't be achieved with web fonts.

When images of text are not okay

• Pull quotes, headlines, promotional banners — use real text with CSS styling.
• Buttons with custom typography — real text with a custom font beats a button-shaped image.
• Charts with data labels — if the labels carry information, make them text (SVG <text> elements work well).

When you must use an image of text, the alt attribute must contain the exact text shown in the image. No paraphrasing.

Traditional image-based CAPTCHAs ("pick all the traffic lights") are a known accessibility barrier. Alt text for a CAPTCHA can't describe the image without defeating its purpose. WCAG's guidance is to provide an alternative format.

• Prefer invisible/behavioral CAPTCHAs like hCaptcha Enterprise's invisible mode, Cloudflare Turnstile, or Apple's Private Access Tokens. These don't require user interaction at all.
• If you must use a challenge, offer both visual and audio versions. The audio version is a recording of spoken characters or a logic question.
• Mark the image with alt="Image CAPTCHA" and the audio control with aria-label="Audio CAPTCHA", so users with assistive tech can choose either.

Modern image models can generate alt text automatically. Used carefully, they're a useful starting point. Used carelessly, they produce alt text that is bland, inaccurate, or misleading.

Where AI alt text works

• Bulk descriptions for archival imagery where the alternative is no alt text at all.
• User-generated content at scale — social feeds, photo sharing, message attachments.
• First drafts that a human reviews before publishing.

Where AI alt text fails

• Context-sensitive content. AI describes what the image looks like; it can't know why this image appears on this page. The same photo might need completely different alt text in a news article vs. a product page vs. a personal blog.
• Faces, names, and identity. AI invents plausible-sounding identifications that are often wrong. It also strips useful context ("CEO addressing shareholders" becomes "person speaking at microphone").
• Charts, maps, and infographics. AI summarizes the visual structure but often misreads data.
• Culturally or emotionally weighted images. AI defaults to neutral, generic descriptions that flatten meaning.

• Turn off images. In your browser's developer tools, disable image loading. Can you still understand the page? Any broken experience points to a missing or weak alt attribute.
• Listen with a screen reader. Turn on VoiceOver (macOS/iOS), NVDA (Windows), or TalkBack (Android) and navigate through the page. Every <img> should produce either a useful description or silence (for decorative images marked alt="").
• Run an automated scan. Tools like axe DevTools, WAVE, and Lighthouse flag missing alt attributes. They cannot judge whether your alt text is good — only that it exists. See the Automated Testing guide for what automation can and can't catch.
• Read it aloud. If the alt text sounds strange when read aloud ("Image of photograph of picture of sunset"), rewrite it.

For a broader manual testing approach, see the Screen Reader Testing guide.

When you hit an image and don't know what to write, walk through this:

1. Is the image inside a link or button?
   • Yes → describe the action, not the image. (Functional)
   • No → continue.
2. Does the image convey information the surrounding text doesn't?
   • Yes → write specific alt text for that information. (Informative)
   • No → continue.
3. Is the image a chart, diagram, or data visualization?
   • Yes → short alt text summary + long description nearby. (Complex)
   • No → continue.
4. Is the image purely visual flourish?
   • Yes → alt="" or CSS background. (Decorative)