What's the difference between alt= and no alt attribute?

alt='' (empty alt) tells screen readers to skip the image as decorative. NO alt attribute (omitting it entirely) tells screen readers there's an image with unknown purpose — they may read the filename or alert the user. Always set alt, even if empty. Empty alt is intentional skipping; missing alt is a bug.

Should alt text include the word 'image' or 'photo'?

Generally no. Screen readers already announce 'image' before reading alt text. 'Image of a cat' becomes 'image image of a cat'. Just describe the content: 'cat sitting on a window sill'. Exception: when the medium itself is part of the meaning (e.g., a painting in an art gallery context, where 'oil painting' adds info).

How long should alt text be?

Aim for 125 characters or less. Screen readers may cut off longer alt at that point. If you need more, use a short alt for the headline meaning and put longer descriptions in surrounding text or via aria-describedby. Complex images like charts often need a longer text equivalent below the image.

Can AI generate good alt text?

AI alt text is a starting point, not a finished product. Modern image-recognition models produce factually correct descriptions but miss context. A photo on a recipe page might get 'a bowl of red liquid' when 'tomato soup with basil garnish' is the contextually correct alt. Use AI for the first pass on large catalogues, then human-review high-traffic pages.

How to Fix Image Alt Text

Image alt text serves three audiences: screen-reader users who can't see the image, search engines that index image meaning, and sighted users when images fail to load. Missing or bad alt text fails all three. The fix isn't just "add some text" — it's writing the right kind of alt for the image's role. This guide covers the four image categories and how to write alt for each. For related fixes, see the Accessibility Fixes index.

1. Audit your images

Step 1

Run the Accessibility audit

Run the Accessibility audit. Filter findings to image-alt issues. The audit reports three classes: missing alt attribute entirely, empty alt where content was needed, and meaningless alt like filename or "image".

Step 2

Export CSV with URL, image filename, current alt

Sort by image filename. Patterns become obvious — the same icon used in 50 places likely needs the same alt fix everywhere, or proper decorative-image treatment.

2. Classify each image

Decorative

Purely visual, no information value. Background patterns, divider lines, icons paired with visible text labels. Treatment: alt="" (empty alt).

<!-- Decorative pattern -->
<img src="/divider-pattern.svg" alt="">

<!-- Icon paired with text - icon decorative -->
<button>
  <img src="/icon-trash.svg" alt="">
  Delete
</button>

Informative

Conveys meaning or information. Product photos, illustrations, infographics. Treatment: describe the content concisely.

<img src="/products/red-shoe.jpg" 
     alt="Red leather running shoe with white sole">

<img src="/team/jane-doe.jpg" 
     alt="Jane Doe, Chief Engineering Officer">

Functional

Image is itself a link or button — alt describes the action, not the picture.

<!-- Logo linking to homepage -->
<a href="/">
  <img src="/logo.svg" alt="AIWebPageSEO home">
</a>

<!-- Icon-only button -->
<button>
  <img src="/icon-close.svg" alt="Close dialog">
</button>

Complex (charts, diagrams, infographics)

Too rich for one alt string. Use short alt for headline meaning, longer text description nearby or via aria-describedby.

<img src="/sales-chart-2025.png" 
     alt="Q4 2025 sales by region"
     aria-describedby="chart-desc">
<p id="chart-desc">
  EMEA led with $4.2M, followed by APAC at $3.1M, 
  Americas at $2.8M. EMEA grew 23% year-over-year.
</p>

3. Common alt-text mistakes

⚠️ Five patterns to avoid:

Filename as alt: alt="IMG_2342.jpg" — useless
"Image of": redundant — screen readers already announce "image"
Keyword stuffing: alt is not a keyword field — search engines penalise spam
Same alt on every product photo: "Product image" for 500 products is noise
Missing alt entirely: screen readers may read the filename, an actively bad experience

4. Fix at scale

WordPress

// Bulk-edit via WP-CLI for posts with no image alt
wp eval-file fix-alt.php

// fix-alt.php
$posts = get_posts(['post_type' => 'attachment', 'numberposts' => -1]);
foreach ($posts as $post) {
    if (!get_post_meta($post->ID, '_wp_attachment_image_alt', true)) {
        // Set sensible default based on filename
        $alt = derive_alt_from_filename($post->post_title);
        update_post_meta($post->ID, '_wp_attachment_image_alt', $alt);
    }
}

Shopify

Product images: Shopify Admin → Products → bulk-edit. Each product image has an alt field. For large catalogues, use the Bulk Editor or export CSV, edit, re-import.

Headless CMS

Add an alt-text field as required on every image upload schema. Existing content without alt: write a one-off migration script to detect images and queue for alt-text writing.

5. Make alt required going forward

Step 1

Block image upload without alt

WordPress: add_filter('attachment_fields_to_save', ...) rejects save if alt empty AND not flagged decorative. Shopify: customise theme to display warning. Headless: schema-level required validation.

Step 2

Add "decorative" explicit option

Don't just require text — give a checkbox "This image is decorative" that sets alt="" explicitly. Without this option, users add meaningless alt text just to bypass the requirement.

💡 AI alt-text generation is a useful first pass for legacy content but should never be auto-published. Review and edit for context before saving — AI describes pixels, humans describe meaning.

♿ Re-run the Accessibility audit

Verify image-alt findings are cleared.

Run Accessibility Audit →