Scanverra

How to Fix Missing Alt Text on Images

Alt text is the text alternative attached to an <img> tag - what a screen reader announces in place of the image, and what search engines use to understand what the image actually shows. An image with no alt attribute at all is both an accessibility failure and a wasted SEO opportunity.

Why Alt Text Goes Missing

Missing alt text is rarely deliberate. The usual causes:

  • CMS uploads with no required field. Most content editors let you publish an image without ever prompting for alt text, so it silently defaults to nothing.
  • Copy-pasted markup. An <img> tag copied from another part of the site (or from a component library example) carries whatever alt text - or lack of it - the original had.
  • Icon components treated as decoration by default.SVG icon libraries and icon fonts often ship with no accessible name unless you add one explicitly, and it's easy to assume the surrounding component handles it when it doesn't.
  • Descriptive images mistakenly marked decorative, or vice versa. Getting the distinction backwards is nearly as common as forgetting it entirely.

How to Identify Every Missing Instance

This is one of the few checks Scanverra scores directly rather than just displaying. During a Browser Test scan, Scanverra runs Array.from(document.querySelectorAll("img")).filter((img) => !img.alt) against your rendered page and reports each match as a distinct "Missing alt attribute" issue, listing up to the first 10 per scan along with the image's source so you can find it fast. A separate real Lighthouse image-alt audit also contributes to your accessibility score - so a missing-alt problem shows up in two places, not one guess.

How to Fix It

1. Write a real description for meaningful images

Describe what the image conveys in context, not what it literally is - skip "image of" or "picture of," since screen readers already announce it as an image:

Describe the content, not the filetypescript
1<img
2  src="/keyboard-side-profile.webp"
3  alt="Mechanical keyboard with low-profile keys and RGB backlighting"
4  width={480}
5  height={320}
6/>

2. Mark purely decorative images empty, not missing

An empty alt tells screen readers to skip it, not to guesstypescript
1<img src="/divider-flourish.svg" alt="" role="presentation" />

3. Give functional icons an accessible name for the action they perform

Describe the button's action, not the icon shapetypescript
1<button aria-label="Search">
2  <SearchIcon aria-hidden="true" />
3</button>

4. Don't keyword-stuff alt text

Alt text that reads like a string of SEO keywords instead of a real description fails both the accessibility purpose (it's not useful to a screen-reader user) and, in practice, does nothing for rankings either - write it for the person who can't see the image.

How Scanverra Detects Alt Text Issues

Scanverra's Browser Test genuinely inspects every rendered <img>element on the page and scores missing-alt findings as real accessibility issues, capped at the first 10 per scan - it's not a display-only field, it's counted against your score.

FAQ

Frequently asked questions

Do decorative images need alt text?

No - and giving them descriptive alt text is actually wrong. A purely decorative image (a background flourish, a divider graphic) should get alt="" (an empty but present attribute) so screen readers skip over it silently instead of reading a meaningless description aloud.

How many missing-alt images does Scanverra report per scan?

Up to 10 per scan - each one is reported with its image source so you can find it quickly. If your page has more than 10 missing, fixing the first batch and re-scanning will surface the rest.

Does alt text actually affect SEO, or is it purely an accessibility thing?

Both. Screen readers depend on it to describe images to users who can't see them, and it's also one of the only signals search engines have for what an image actually shows, since they can't reliably interpret pixels the way a person can.

What should I write for a purely functional icon, like a magnifying-glass search button?

Describe the action, not the icon - alt="Search" or aria-label="Search", not alt="Magnifying glass icon." If the icon sits next to visible text that already says "Search," mark the icon decorative instead so it isn't announced twice.

Is a missing alt attribute different from an empty one?

Yes, and the difference matters. A missing alt attribute (no attribute at all) is treated as an error - screen readers often fall back to reading the file name. An explicitly empty alt="" is a valid, intentional signal that the image is decorative.

Free - no sign-up required

Find every missing alt tag on your site

Run a free accessibility audit and get the exact images missing alt text, not just a score.

Run free audit