Missing or meaningless alt text on images is a hard blocker for screen reader users — assistive technology reads the filename, URL, or nothing at all instead of the image's meaning. WCAG 2.2 SC 1.1.1 (Non-text Content) is a Level A requirement: failure makes a site legally non-conformant under Section 508 and the EU Web Accessibility Directive. Beyond compliance, poor alt text degrades SEO, since search crawlers rely on the same attribute to index images.
Critical because missing alt text creates a complete information blackout for blind and low-vision users who rely on screen readers, violating the foundational WCAG 2.2 SC 1.1.1 Level A requirement with no workaround.
Add descriptive alt text to every content image; use empty alt for decorative ones so screen readers skip them cleanly. In Next.js Image components:
// Content image — describe what it shows
<Image src="/hero.jpg" alt="Developer typing at a standing desk in a bright office" />
// Decorative image — suppress announcement
<Image src="/divider.svg" alt="" role="presentation" />
For charts and graphs, add a sibling text summary or table and link it with aria-describedby. Check every <img> in your codebase for missing or placeholder alt values like "image", "photo", or the filename.
ID: accessibility-wcag.perceivable.alt-text
Severity: critical
What to look for: Enumerate every relevant item. Examine all images, icons, charts, and embedded media. Check for alt attributes on <img> tags, alt props on <Image> components, and equivalent text or accessible descriptions for decorative images.
Pass criteria: At least 1 of the following conditions is met. All functional/content images have descriptive alt text. Decorative images use alt="" or role="presentation". Charts and data visualizations have a text alternative (caption, table, or aria-describedby). Before evaluating, extract and quote the relevant configuration or code patterns found. Report the count of items checked even on pass.
Fail criteria: Any functional image lacks an alt attribute, or uses placeholder text like "image" or "photo". Decorative images use generic alt text instead of empty alt.
Do NOT pass when: The item exists only as a placeholder, stub, or TODO comment — partial implementation does not count as passing.
Skip (N/A) when: Never — this check applies to all web projects.
Cross-reference: For related security patterns, the Security Headers audit covers server-side hardening.
Detail on fail: Name the specific images with issues. Example: "Hero image in Hero.tsx missing alt attribute; 4 product images use generic 'product' alt text instead of descriptive names"
Remediation: Alt text serves both accessibility and SEO. For content images, write a brief description:
<Image src="/team.jpg" alt="The engineering team at headquarters in 2024" />
For decorative images, use empty alt:
<Image src="/bg-pattern.png" alt="" role="presentation" />
For charts and graphs, provide a text summary or data table with aria-describedby.