Testing Guides

Alt Text Guide: Writing Accessible Image Descriptions

54% of home pages have images missing alternative text, according to the WebAIM Million 2024 study. Alt text gives screen reader users equivalent access to image content. Without it, images are announced as their filename or ignored entirely — leaving blind users with an incomplete version of your page.

The Alt Text Decision Tree

Not every image needs a description. The right alt text depends on the image's purpose:

1. Decorative Image

If the image is purely visual and adds no information — background patterns, divider lines, stock photos used for aesthetics — use an empty alt attribute: alt="". This tells screen readers to skip it entirely. Do not omit the alt attribute — a missing attribute causes screen readers to announce the filename.

2. Informative Image

If the image conveys information — a photo of a product, a screenshot, a diagram — describe what it shows. Focus on the content the sighted user gets from the image, not what the image looks like.

3. Functional Image (Link or Button)

If the image serves as a link or button, the alt text should describe the action or destination, not the image itself. A magnifying glass icon inside a search button gets alt="Search", not alt="Magnifying glass icon".

4. Complex Image (Chart, Graph, Infographic)

Charts and data visualizations need a brief alt text summarizing the takeaway, plus a longer description elsewhere on the page. Use aria-describedby to link the image to a detailed text explanation, or provide the data in an accessible table nearby.

5. Image of Text

If the image contains text — a logo, a quote graphic, a styled heading — the alt text must include that text. Better yet, use real HTML text instead of an image whenever possible (WCAG SC 1.4.5).

Good vs Bad Examples

Common Mistakes

• Starting with "image of" or "picture of" — Screen readers already announce the element as an image. Starting alt text with "image of" is redundant.
• Using filenames as alt text — hero-banner-v3-final.png tells users nothing. Many CMS platforms default to the filename when alt text is left blank.
• Overly long descriptions — Alt text should be concise. For complex images, keep the alt attribute under 150 characters and provide extended description elsewhere.
• Keyword stuffing — Writing alt text for SEO instead of users. Alt text exists for accessibility, not search ranking.

CMS & Platform Tips

• Shopify — Product images use the "Alt text" field in the product media editor. Shopify does not auto-generate alt text, so every product image needs manual input.
• WordPress — The media library has an "Alt Text" field. Featured images and inline images pull from this field. Plugins like JEAP can bulk-audit missing alt text.
• Webflow — Each image element has an alt text field in the Settings panel. For CMS-driven images, bind the alt field to a text field in your collection.

Code Example

<!-- Informative image -->
<img
  src="/products/air-max-90.jpg"
  alt="Nike Air Max 90 in white and navy, side view"
  width="600"
  height="400"
/>

<!-- Decorative image -->
<img src="/divider.svg" alt="" role="presentation" />

<!-- Functional image (link) -->
<a href="/">
  <img src="/logo.svg" alt="SweepHound home" />
</a>

<!-- Complex image with extended description -->
<figure>
  <img
    src="/charts/sales-2025.png"
    alt="Monthly sales from January to December 2025, peaking at $84K in November"
    aria-describedby="sales-desc"
  />
  <figcaption id="sales-desc">
    Sales grew steadily from $12K in January to $84K in November,
    with a dip to $61K in December. Full data in the table below.
  </figcaption>
</figure>

Missing alt text is one of the easiest issues to detect and fix. Run a free SweepHound scan to find images on scanned pages that are missing alt text.