Images without meaningful alt text are invisible to search engine crawlers — Google Image Search cannot index them, and they contribute no keyword signal to the surrounding page content. This is also the most frequently failed WCAG criterion: WCAG 2.2 SC 1.1.1 (Non-text Content) requires every content image to have a text alternative that conveys equivalent information. Screen reader users hear nothing for images missing alt, or hear raw filenames like "IMG_2034.jpg" that provide no useful context. In regulated industries (healthcare, finance, education), missing alt text on content images is an ADA liability vector that has resulted in class-action settlements.
High because missing alt text simultaneously removes image content from search indexing and creates an ADA/WCAG 1.1.1 accessibility barrier that exposes the product to legal liability.
Add descriptive alt text to every content image. Write what the image shows, not what it is:
// Correct — describes the subject
<Image src="/founder.jpg" alt="Sarah Chen, founder of YourSite, speaking at DevConf 2024" />
// Correct — decorative image explicitly marked
<Image src="/divider.svg" alt="" role="presentation" />
// Wrong — generic
<Image src="/team.jpg" alt="image" />
// Wrong — filename
<Image src="/banner.png" alt="banner.png" />
For icons used as interactive controls (buttons with no visible label), set aria-label on the button instead and use alt="" on the icon itself. Grep for alt="" to find decorative-marked images and verify each is genuinely non-content.
ID: seo-fundamentals.content-structure.image-alt-text
Severity: high
What to look for: Check <img> tags and Next.js <Image> components for alt attributes. The alt text should be descriptive (not empty, not just "image", not a file name). Decorative images may use alt="" intentionally — this is acceptable.
Pass criteria: Count all <img> tags and <Image> components in the project. For each, classify as "content image with alt" / "decorative with alt=''" / "missing or inadequate alt." All content images (non-decorative) must have descriptive alt text of at least 4 words. Decorative images must use alt="" or role="presentation". Report the ratio: "X of Y images have adequate alt text."
Fail criteria: Any content image has a missing alt attribute, an empty alt on a non-decorative image, or alt text that is just a file name (e.g., alt="IMG_2034.jpg") or generic (e.g., alt="image", alt="icon", alt="photo"). Do NOT pass when more than 0 content images lack descriptive alt text.
Skip (N/A) when: The project has no images (no <img> tags or <Image> components found).
Detail on fail: Count the images with issues and give examples. Example: "5 of 12 images lack alt text. Example: hero image in components/Hero.tsx has no alt attribute" or "3 images use filename as alt text (e.g., 'banner.png')"
Cross-reference: For a deeper analysis of image accessibility, the Accessibility Fundamentals audit covers this in detail.
Remediation: Alt text serves two purposes: it helps search engines understand image content, and it provides text for screen readers. For content images, write a brief description of what the image shows:
<Image src="/team.jpg" alt="The YourSite team at our 2024 company retreat" />
For purely decorative images (borders, spacers, background textures), use an empty alt: alt="".