Screen readers announce images without alt text as "image" or read the filename, leaving millions of visually impaired users guessing what content they're missing.

What's Happening

Lighthouse flags <img> elements that lack an alt attribute entirely. Every image needs one of three things: descriptive alt text for informative images, an empty alt="" for decorative images, or role="presentation" to explicitly mark the image as non-essential. Without these, assistive technology cannot communicate the image's purpose.

Diagnose

1. Open DevTools and run Lighthouse accessibility audit
2. Expand "Image elements do not have [alt] attributes"
3. Click flagged images to locate them in the DOM
4. Check the Elements panel for the presence and value of the alt attribute
5. Right-click the image and select "Open image in new tab" to understand its content

Fix

1. Add Descriptive Alt Text (Informative Images)

Write concise text that conveys the image's meaning in context.

<!-- Before: no alt attribute -->
<img src="/team/sarah.jpg">

<!-- After: descriptive alt -->
<img src="/team/sarah.jpg" alt="Sarah Chen, Lead Developer">

<!-- Before: missing alt on functional image -->
<a href="/search">
  <img src="/icons/search.svg">
</a>

<!-- After: alt describes the action -->
<a href="/search">
  <img src="/icons/search.svg" alt="Search">
</a>

2. Use Empty Alt for Decorative Images

Images that add visual interest but no information should have empty alt text.

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

<!-- Background pattern in content -->
<img src="/hero-pattern.png" alt="">

3. Use role="presentation" for Layout Images

For images used purely for layout or spacing, remove them from the accessibility tree.

<!-- Spacer image (consider replacing with CSS) -->
<img src="/spacer.gif" role="presentation">

<!-- Or equivalently -->
<img src="/spacer.gif" alt="" role="none">

Framework Examples

<script setup lang="ts">
const props = defineProps<{
  src: string
  alt: string // Required prop enforces alt at build time
}>()
</script>

<template>
  <NuxtImg
    :src="props.src"
    :alt="props.alt"
  />
</template>

Verify the Fix

1. Re-run Lighthouse and confirm the audit passes
2. Use a screen reader (VoiceOver, NVDA) to navigate your images
3. Check that decorative images are skipped by the screen reader
4. Verify functional images (links, buttons) announce their purpose

Common Mistakes

• Using filenames as alt text — "IMG_2847.jpg" or "hero-banner-final-v2.png" tells users nothing
• Starting with "Image of" or "Picture of" — Screen readers already announce it's an image; this is redundant
• Writing alt text that's too long — Keep it under 125 characters; use longdesc or surrounding text for complex images
• Using the same alt text for different images — Each image's alt should reflect its specific content and context
• Leaving alt empty on functional images — Images inside links or buttons must describe the action, not be empty

Related Issues

Image alt issues often appear alongside:

• Link Name — Images inside links need alt text describing the destination
• Button Name — Icon buttons with images need accessible names
• Frame Title — Both involve describing embedded content

Test Your Entire Site

Missing alt text often accumulates in blog posts, product pages, and user-generated content areas that grow over time. Unlighthouse crawls your entire site to surface every image lacking proper alt text, generating a comprehensive report you can work through systematically.

Related

• All Accessibility Issues
• Accessibility Overview