How to Fix "Image Elements Do Not Have [alt] Attributes"

What Alt Text Does — For People First, Then For Rankings

Around the world, hundreds of millions of people rely on screen readers or have low vision. For them, alt text IS the image: a screen reader announces it in place of the picture, in reading order, as part of the page's content. Good alt text means the page makes sense with images off; missing alt text means holes in the narrative — or worse, a robot voice spelling out hyphenated file names.

The SEO benefit rides along for free. Google cannot fully "see" images; it ranks them in Google Images largely on alt text, file names, and surrounding content. Descriptive alt text on product shots, badges, team photos, and diagrams gives every image a chance to rank and reinforces the page's topic. It also matters legally: alt text is a WCAG Level A requirement (the lowest bar), and it is one of the first things checked in ADA/AODA website complaints.

How To Write Alt Text That Actually Helps

• Describe the content or FUNCTION, not the existence: "G2 Grid Leader badge for SAP consulting, summer 2026" — not "badge" or "image123"
• Skip "image of" / "picture of" — screen readers already announce it as an image
• Keep it under ~125 characters; front-load the important words
• For linked images, describe the destination ("AscendQ home") — the alt is the link text for screen readers
• For images containing text (badges, banners, screenshots of quotes), include that text — it is invisible to everyone otherwise
• Do not keyword-stuff. "SAP ERP SAP consulting SAP partner SAP" reads as spam to Google and as gibberish to a human listening to it

When An EMPTY Alt Is The Right Answer (and A Missing One Never Is)

There is a crucial difference between alt="" and no alt attribute at all. An empty alt tells screen readers "this image is decorative — skip it silently." A MISSING alt forces the screen reader to guess, which usually means reading the file name. So decorative flourishes, background swooshes, spacer graphics, and tracking pixels should carry alt="" deliberately — that PASSES the Lighthouse audit and is correct accessibility practice.

The test: if the image disappeared, would the page lose information? No → alt="". Yes → describe it. A LinkedIn tracking pixel loses nothing → alt="". A G2 award badge communicates "independent reviewers rate us highly" → it needs words.

<!-- informative image: describe it -->
<img src="/hubfs/g2-grid-leader.webp" alt="G2 Grid Leader badge for SAP consulting services, summer 2026">

<!-- decorative or tracking image: empty alt, on purpose -->
<img src="https://px.ads.example.com/collect" alt="" role="presentation">

Where The Alt Field Lives, Per Platform

• HubSpot: in the page editor, click the image → the options panel has an "Alt text" field. Images inside custom modules have an alt field per image in the module editor — if a developer built the module without one, the alt must be added in the module's HTML (this is the usual culprit when only SOME images on a page lack alts)
• WordPress: Media Library → select image → "Alternative Text" field (sets the default), or per-placement in the image block's settings sidebar
• Wix: click image → Settings → "What's in the image? (Alt text)"
• Squarespace: click image → Edit → "Image Alt Text" (in some blocks the caption doubles as alt)
• Shopify: product images → click image → "Edit alt text"; theme images via the theme editor's image picker
• Hand-coded sites: it is just the alt attribute — add it in the template, and add a lint rule (eslint-plugin-jsx-a11y, htmlhint) so it can never be forgotten again

The Slider Gotcha: One Missing Alt, Four Failures

Carousels and sliders (Slick, Swiper, most theme sliders) CLONE their slides in the DOM to create the infinite-loop effect. Lighthouse audits the rendered DOM — so a single image missing its alt inside a slider shows up as two, three, or four failing elements. Do not go hunting for four separate broken images: fix the one source image and every clone inherits the fix.

Audit Your Whole Site In Two Minutes

Lighthouse only checks the page you ran it on. Before declaring victory, sweep the rest: most crawlers (Screaming Frog's free tier, Sitebulb) report images missing alt site-wide. For a quick single-page check from a terminal:

# count img tags with no alt attribute at all on a page
curl -s https://yoursite.com/ | python3 -c "
import sys, re
imgs = re.findall(r'<img\b[^>]*>', sys.stdin.read())
missing = [t for t in imgs if 'alt=' not in t]
print(len(imgs), 'images,', len(missing), 'missing alt')
for t in missing: print(re.search(r'src=.([^\" ]*)', t).group(1))"

The Fix, Step By Step

1. 1

   Get the exact failing elements from Lighthouse

   Expand the audit in the report — it lists each failing img with a snippet and selector. Note the src of each; duplicates with the same src are slider clones of one image.

2. 2

   Sort each image: informative or decorative?

   Would the page lose meaning without it? Informative images (products, badges, people, screenshots, diagrams) get descriptive alt text. Purely decorative images and tracking pixels get alt="" — empty on purpose, which passes the audit.

3. 3

   Write the alt text before touching the CMS

   One line per image, under ~125 characters, content or function first, any visible text included, no "image of", no keyword stuffing. Writing them all at once keeps the voice consistent.

4. 4

   Add them where your platform keeps the field

   Page-editor images: click the image → alt/alt text field. Module or theme images with no field visible: the fix is in the module/template code — add the alt attribute (or an editable alt field) there.

5. 5

   Re-run Lighthouse and sweep the rest of the site

   Confirm the audit passes on the page you fixed, then run a site-wide crawl for missing alts — Lighthouse only ever saw one page.

Frequently Asked Questions