All images have descriptive alt text, semantic filenames, and optimized weight

Images with empty, missing, or filename-only alt text fail WCAG 2.2 SC 1.1.1 (Non-text Content), exposing the site to accessibility compliance risk and excluding screen reader users from content. Beyond accessibility, search engines use alt text as an image indexing signal — non-semantic filenames like IMG_1234.jpg provide no keyword relevance, and unoptimized images above 1 MB inflate page weight past the 5 MB threshold that degrades mobile performance scores. iso-25010:2011 performance-efficiency.resource-utilisation maps to the weight problem; wcag:2.2 1.1.1 maps to alt text. Both compound each other.

Audit every <Image> and <img> in your components for alt text and file weight. Replace generic filenames at the source before they enter your asset pipeline. For Next.js projects, migrate raw <img> tags to next/image in app/page.tsx and component files:

import Image from 'next/image'

// Before (fails alt + weight checks)
<img src="/images/IMG_1234.jpg" />

// After (passes both)
<Image
  src="/images/product-widget-hero.webp"
  alt="Widget Pro on a white desk — front view"
  width={800}
  height={600}
/>

For existing JPEG/PNG assets above 200KB, convert to WebP with cwebp or Squoosh before committing. Set a CI lint rule (e.g., eslint-plugin-jsx-a11y alt-text rule) to block missing alt text before merge.

• ID: image-optimization
• Severity: low
• What to look for: Count all <img> and <Image> components across the codebase. For each, check: (1) alt text is present and descriptive (not empty, not just the filename), (2) filename is semantic (descriptive, not IMG_1234.jpg or screenshot-2024.png), (3) individual file weight under 1 MB per image. Enumerate the total image weight per page; target no more than 5 MB per page.
• Pass criteria: At least 90% of content images have descriptive alt text (minimum 3 words) and semantic filenames. Total page image weight under 5 MB per page. No single image exceeds 1 MB without being optimized. Report: "X of Y images have descriptive alt text; total page weight Z MB."
• Fail criteria: More than 10% of images lack alt text or have non-semantic filenames, or total page image weight exceeds 5 MB.
• Skip (N/A) when: No images present in any page component.
• Detail on fail: "8 of 24 images lack alt text; 'banner.png' weighs 3.2 MB; total page image weight 6.8 MB (exceeds 5 MB limit)".
• Remediation: Optimize images with next/image in your page components (e.g., app/page.tsx), use next-gen formats (WebP/AVIF), add descriptive alt text, and compress.