Skip to main content
TestAccessibility

Issue guide

Common findingHigh impact on tasks

Missing alternative text on images

Images without text alternatives are invisible to many assistive technologies unless they are purely decorative.

When meaningful images have no text alternative, people using screen readers miss the same information sighted users get from the picture.

See this on your site

Run a scan, then match rule names in your report to the sections below.

Why this matters

  • Screen reader users may hear nothing, a file name, or the wrong context for charts, products, and CTAs styled as images.
  • Icons that behave as buttons without a name block tasks like closing dialogs or adding to cart.
  • Teams ship faster when alt is part of the template, not a one-off content fix.

Where this shows up

Use this list to spot the same pattern on your templates and key URLs.

Hero and marketing banners

  • Homepage heroes
  • Campaign landing images
  • Logos mistaken as decorative

E-commerce

  • Product galleries
  • Thumbnail grids
  • “Quick view” imagery

Buttons and icons

  • Image-only submit buttons
  • SVG icons without title or aria-label

Content

  • Blog inline images
  • Charts and infographics
  • Avatar images

Fix priority — address first

  • Images on checkout, signup, or primary CTAs.
  • Product or pricing visuals that carry unique information.
  • Any image repeated across many pages from one template.

Fix priority — can follow

  • Purely decorative flourishes (use empty alt after confirming decorative).
  • Redundant images next to equivalent text that is exposed to assistive tech.

Who is affected

People with low vision, color blindness, and anyone on bright screens or poor displays.

Fix this in your platform

Stack-specific steps, pitfalls, and verification. Core issues link under /wordpress, /shopify, /react, or /nextjs; all issues also have /fix/… URLs.

What this issue is

Alternative text (`alt`) describes the purpose of an image in words. When `alt` is missing on meaningful images, screen readers may skip the image entirely, read the file name, or provide unhelpful noise.

Decorative images should use `alt=""` so assistive tech knows to ignore them.

Why it matters

People who cannot see the image rely on the description to understand charts, product photos, buttons styled as images, and instructional graphics.

Common causes

CMS users insert images without filling the alt field. Developers use `<img>` without `alt`. Icons that act as buttons omit `aria-label`.

Better implementation

Use concise, accurate descriptions: `<img src="chart.png" alt="Sales increased 12% year over year">`. For decorative flourishes: `<img src="divider.svg" alt="">`.

Examples (bad vs good)

  • Bad

    `<img src="/hero-sale.jpg">` on a promotional banner with no alt.

    Good

    `<img src="/hero-sale.jpg" alt="Spring sale: 20% off running shoes">`.

  • Bad

    Heart icon button with no text and no aria-label.

    Good

    Use `<button type="button" aria-label="Add to favorites">` with the icon inside, or add visible text “Favorite”.

  • Bad

    Decorative divider uploaded as “meaningful”.

    Good

    `<img src="/divider.svg" alt="">` so assistive tech skips it.

How to fix

  1. Identify each `<img>`, SVG, or image role element in the failing region.
  2. Add concise `alt` that matches what the image communicates; use `alt=""` only when decorative.
  3. For icon-only controls, add visible text or `aria-label` that states the action.
  4. Verify in the accessibility tree, then rescan.

Platform-specific notes

Where this often comes from on common stacks—and what to change.

WordPress
Set alt in the media modal; avoid “decorative” images in hero blocks without empty alt.
Shopify
Check theme sections for product cards; metafields may drive alt for variants.
React / Next.js
Use next/image with alt; empty string only when truly decorative.

Common mistakes

  • Stuffing keywords into alt for SEO instead of describing purpose.
  • Using “image of…” instead of the actual information.
  • Forgetting SVG and role="img" equivalents.
  • Marking informative images as decorative to silence warnings.

How to verify the fix

  1. Tab to image buttons and confirm the accessible name in devtools.
  2. Use a screen reader to navigate the page and listen for image descriptions.
  3. Rerun a scan on the same URL after deploy.

Related: 1.1.1 Non-text Content.

FAQ

Does every image need visible caption?
No. Alt is often invisible; captions are for everyone when context helps.
SVGs?
Use `<title>`/`<desc>` or `aria-label` on decorative vs informative SVGs as appropriate.

Related guides

Run another scan

After you ship a fix, rescan the same URL and keep both report links to compare.

Broader topics

Principles on these pages overlap with HTML issues: PDFs for documents and downloads, mobile for touch, contrast, and small screens.

Related issues

Next steps

Keep the scan, fix, rescan loop going

Ship a fix, then run another scan on the same URL. Each run gets its own report link so you can compare before and after.

Open scan