How to Fix Images Missing Alt Text
Your audit flagged images with no alt attribute, or an empty one where a description belongs. Alt text is the written description that search engines, screen readers, and AI answer engines rely on to understand what an image shows. Adding accurate, concise alt text to your meaningful images closes accessibility gaps, unlocks Google Images traffic, and makes visual content legible to crawlers that can't see.
What this means
This issue means one or more <img> tags on the page have no alt attribute at all, or carry an empty alt="" on an image that actually has meaning. The alt attribute holds a short text description of the image. Browsers show it when an image fails to load, screen readers announce it aloud, and search engines use it to work out what the picture depicts and whether it's relevant to a query.
The audit codes reflect an important distinction. missing_alt, img_missing_alt, and missing_img_alt mean the attribute is absent entirely, which is almost always wrong and needs fixing. empty_alt means alt="" is present. An empty alt is correct for purely decorative images (spacers, background flourishes, an icon next to text that already says the same thing), because it tells assistive tech to skip them. It's a problem only when the image conveys information, such as a product photo, chart, logo, infographic, or diagram, and was left blank. So part of the fix is deciding which images are informative and which are decorative, then writing alt text for the former and intentional empty alt for the latter.
Why it matters
Alt text matters on three fronts. First, accessibility: screen reader users can't perceive an image any other way, so a missing or wrong alt attribute leaves a gap in the page for anyone using assistive technology. WCAG 1.1.1 (Non-text Content) requires a text alternative, which is why audits rank this high.
Second, image search. Alt text is one of the main signals Google uses to understand and rank images in Google Images, and it adds context to the surrounding page. Descriptive alt text is a documented Google recommendation, and image search drives real traffic for product, recipe, how-to, and visually heavy pages.
Third, the AI answer-engine angle. Tools like ChatGPT, Perplexity, and Google's AI Overviews mostly consume the text of a page. Their crawlers generally don't run vision models over every image on the web, so an image with no alt text is effectively invisible to them. If a chart, screenshot, or product image carries a fact that only appears in the picture, and there's no alt text or caption, that fact won't make it into an AI-generated answer that cites your page. Good alt text turns your visuals into machine-readable content, which improves how accurately AI engines describe your page and your odds of being cited.
How to fix it
- 1
Separate informative images from decorative ones
Before writing anything, categorize each flagged image. Informative images carry content: product photos, charts, infographics, screenshots, logos, team headshots, diagrams. Decorative images add visual polish but no information: dividers, background textures, an icon sitting right next to text that already says the same thing. Informative images need descriptive alt text; decorative images should get an explicit empty
alt=""so screen readers skip them cleanly. Getting this split right is the actual fix, not blindly stuffing alt text everywhere. - 2
Write concise, specific, human descriptions
Describe what the image shows in plain language, as if telling someone who can't see it. Aim for roughly a short sentence. Some screen readers truncate longer descriptions, so keeping it under about 125 characters is a safe practical ceiling. Skip "image of" or "photo of" since screen readers already announce that it's an image. Be specific:
alt="Red leather Chelsea boot, side view"beatsalt="boot"oralt="IMG_2043". Don't keyword-stuff; a string of keywords reads as spam to users on screen readers and to Google. - 3
Add the alt attribute in your HTML or CMS
For raw HTML, add the attribute directly:
<img src="/boots.jpg" alt="Red leather Chelsea boot, side view">. In a CMS, use the media library's alt text field rather than editing markup, so the description follows the image everywhere it's reused. For genuinely decorative images, setalt=""(empty, not missing). Don't use thetitleattribute as a substitute; it doesn't reliably reach screen readers and isn't the ranking signal that alt is. - 4
Handle charts, logos, and CSS backgrounds
For a chart or infographic, put the key takeaway in the alt text (
alt="Sales grew from $1.2M in 2023 to $3.4M in 2024") or describe it fully in nearby body text, since the data is the point. For a logo that links home, describe the destination:alt="Acme Corp home". Images set via CSSbackground-imagehave no alt attribute and are treated as decorative, so if a CSS-background image is actually informative, move it into an<img>tag or add a visually hidden text alternative. - 5
Fix in bulk, then prevent recurrence
If dozens of images are flagged, work at scale: WordPress and its media-library bulk editors let you fill alt text en masse, Shopify has a bulk image alt editor, and headless sites can script it against a CMS API. After the cleanup, bake alt text into your workflow. Make it a required field on upload, and add a lint or CI check (for example the
jsx-a11y/alt-textESLint rule on React or Next.js projects) so no new image ships without an alt attribute. Then re-run the audit to confirm the count drops to zero.
Example
<!-- Informative: describe what it shows -->
<img src="/products/chelsea-boot.jpg"
alt="Red leather Chelsea boot, side view">
<!-- Informative chart: put the takeaway in alt -->
<img src="/charts/revenue-2024.png"
alt="Quarterly revenue grew from $1.2M to $3.4M in 2024">
<!-- Logo that links home: describe the destination -->
<a href="/"><img src="/logo.svg" alt="Acme Corp home"></a>
<!-- Decorative: intentionally empty, NOT missing -->
<img src="/divider-flourish.png" alt="">
<!-- Wrong: no alt attribute at all (this is what the audit flags) -->
<img src="/products/chelsea-boot.jpg">
<!-- Wrong: title is not a substitute for alt -->
<img src="/products/chelsea-boot.jpg" title="boot">Informative images get a description; the decorative image gets an intentional empty alt so screen readers skip it.
Platform-specific steps
Open Media > Library, click an image, and fill the Alt Text field, which applies everywhere the image is used. In the block editor, select an image block and add alt text in the block settings sidebar under Settings > Alt text. Neither Yoast nor Rank Math writes alt text for you, but both flag missing alt on published content, and Rank Math surfaces it in its Image SEO checks. For sitewide cleanup, a media-library bulk editor lets you fill many at once. Avoid any "auto-fill alt from filename" setting, which produces junk like "IMG-2043".
For product images, open a product, click the image, and use "Edit alt text" (the ALT badge on the thumbnail). For theme or content images, edit them in the theme customizer or the relevant section. Shopify's admin includes a bulk alt-text editor for product images. In Liquid templates, images should output alt="{{ image.alt }}" so the alt you set in admin actually renders. Check your theme if audited images come back blank despite alt being set.
Click an image on the page, open its settings panel, and find "What's the image about? (Alt Text)." Enter a description and save. Wix applies this per image instance. For decorative images, leave the field empty so it's treated as decorative. Wix does not generate alt text automatically, so every meaningful image needs a manual entry.
Squarespace derives alt text from an image's filename or caption in some contexts, which is unreliable, so set it explicitly. In the image block or gallery, open the image and use its alt text field where the block exposes one, or add a caption. Because behavior varies by block type, re-run the audit after editing to confirm the alt attribute is present in the rendered HTML.
In HTML, add the attribute inline: <img src="/chart.png" alt="Revenue by quarter, 2024">. In Next.js, the next/image component requires an alt prop: <Image src={chart} alt="Revenue by quarter, 2024" />. Add the jsx-a11y/alt-text ESLint rule to catch missing alt at build time. For decorative images use alt="". For a CSS background-image that carries meaning, switch to an <img> or add a visually hidden text alternative.
Frequently asked
Yes. An empty alt="" is the right choice for purely decorative images: dividers, background flourishes, or an icon next to text that already conveys the same meaning. It tells screen readers to skip the image instead of announcing a filename. The mistakes are leaving the attribute off entirely, or using empty alt on an image that actually carries information. So empty_alt warnings need judgment: keep it empty if decorative, write a description if informative.
Both. Alt text is a primary signal Google uses to rank images in Google Images, which is a real traffic source for visual, product, and how-to pages, and it adds relevant context to the surrounding content. Because AI answer engines like ChatGPT, Perplexity, and Google AI Overviews mostly read text, alt text is often the only way their crawlers understand what an image depicts, so it matters for AI visibility too. It's not a magic ranking lever, but it's low effort and genuinely useful.
Short and specific, usually a phrase or a single short sentence. A common practical ceiling is around 125 characters, because some screen readers truncate longer descriptions. If an image needs a fuller explanation, such as a complex chart, keep the alt brief and put the detail in a caption or the body text nearby. Avoid padding with keywords; describe what's actually in the image.
Only if they describe the image naturally. If your target keyword genuinely matches what the picture shows, including it is fine and helpful. Forcing keywords in, or listing several, reads as spam to screen reader users and can trigger keyword-stuffing signals with Google. Write for a human who can't see the image first, and relevant keywords usually fall out on their own.
The alt attribute is the text alternative screen readers announce and search engines index. It's what this audit checks. The title attribute produces a hover tooltip, isn't reliably read by assistive tech, doesn't appear on touch devices, and carries little to no SEO weight. Fixing missing alt text means adding alt, not title. They are not interchangeable.
Does your site have this issue?
Run a free, AI-powered audit and we’ll flag this and 150+ other checks in about a minute. No signup.