How to fix images without alt text

Add an alt attribute to every <img> on the page: a short description of what the image conveys for meaningful images, and an empty alt="" for purely decorative ones. Missing alt attributes are the single most common accessibility failure found in large-scale scans of the web, they fail WCAG 2.1 success criterion 1.1.1 at Level A, and they cost you image-search visibility as a side effect.

Last updated 2026-07-28

What happens to an image with no alt text?

A screen reader falls back to announcing the file name, which produces output like "IMG underscore 4021 dot jpg" — noise where information should be. If the image is inside a link and has no alt, it is worse: the user hears a URL fragment read out character by character and has no idea where the link goes.

This is not a rare edge case. WebAIM's annual automated scan of the top one million home pages has found missing alternative text on more than half of them in every recent year, making it the most prevalent failure on the web by a wide margin.

Search engines have the same problem for different reasons. Alt text is the primary way an image is described to a crawler, so an unlabelled image contributes nothing to the page's topic and cannot surface in image search.

When should alt text be empty instead?

Use alt="" when the image carries no information the surrounding text does not already give — background flourishes, spacer graphics, decorative dividers, and icons sitting next to a text label that says the same thing. The empty attribute is not a shortcut or a placeholder; it is the correct markup, and it tells assistive technology to skip the element entirely.

Missing and empty are therefore completely different states. Missing means "nobody decided"; empty means "decided, and there is nothing to say". Automated checks flag the first and accept the second, which is exactly the right behaviour.

The test to apply is simple: if you replaced the image with your alt text, would the page still make sense and lose nothing? If yes, alt="" is right. If the page would lose a fact, describe it.

How do you write alt text that is actually useful?

Describe what the image communicates in this context, in one short sentence, and stop. The same photograph needs different alt text on a news article than in a product gallery, because the information it is there to deliver is different.

• Describe content and function, not appearance: "Audra report showing an Audra Score of 92" beats "screenshot of an app".
• Skip "image of" or "picture of" — assistive technology already announces the element type, so the words are pure repetition.
• Keep it under roughly 125 characters. Some older screen readers truncate around that point, and anything longer belongs in a caption or adjacent prose.
• For an image wrapped in a link, the alt text must describe the destination, not the picture: alt="Audra home", not alt="logo".
• For a chart or data graphic, put the takeaway in the alt text and the full data in a nearby table — "Traffic doubled between March and June" is more useful than a description of the axes.
• Do not keyword-stuff. Alt text is an accessibility feature first, and a stuffed attribute reads as spam to crawlers and as gibberish to the people who depend on it.

What does the markup look like for each case?

There are three patterns and they cover nearly everything: a described image, a decorative image with an empty alt, and a linked image whose alt names the destination.

<!-- Meaningful image: describe what it conveys -->
<img src="/report.png" alt="Audra report showing an Audra Score of 92 across 42 pages">

<!-- Decorative image: skipped by screen readers -->
<img src="/aurora-blur.png" alt="">

<!-- Image as a link: describe the destination, not the graphic -->
<a href="/"><img src="/logo.svg" alt="Audra home"></a>

<!-- Icon beside a text label that already says it -->
<a href="/download"><img src="/arrow.svg" alt=""> Download for macOS</a>

What about CSS background images, SVGs and icon fonts?

CSS background images are invisible to assistive technology by design and cannot carry alt text, so anything meaningful must be an <img> element instead. If a background image is genuinely decorative, that is the correct place for it — the accessibility layer never sees it, which is the point.

Inline <svg> needs a different treatment: give it role="img" and an <title> element as the first child, or aria-label on the svg element. A decorative inline SVG should carry aria-hidden="true" so it is skipped. Icon fonts are the worst case, because the glyph is a private-use character that some screen readers try to pronounce — wrap them in an aria-hidden span with a visually hidden text label alongside.

Images also affect performance, not just accessibility: an unoptimised hero image is the most common cause of a slow Largest Contentful Paint, and a missing width and height pair is the most common cause of layout shift.

How do I find every image on my site with no alt attribute?

Crawl the whole site and list images per page with their alt state, because alt-text problems are nearly always template problems. One logo missing its alt in a header appears on every URL, and the fix is a single edit rather than hundreds.

Audra reports the percentage of images carrying an alt attribute on each crawled page and lists the offending elements, while its bundled axe-core pass independently flags the same images as WCAG violations under rule image-alt. Accessibility carries 25% of the weight in the Audra Score, so alt-text coverage moves the headline number visibly. Everything runs locally against your own installed Chrome.

For a single page in the browser, Lighthouse runs a subset of the same axe rules in its accessibility category — useful for spot checks, but it will not tell you which of your 400 URLs share the offending template.