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.
Low because image alt text and optimization failures are individually recoverable without code structure changes, and the SEO and accessibility impact accumulates gradually rather than causing acute failures.
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.
seo-advanced.technical-seo.image-optimizationlow<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."8 of 24 images lack alt text; 'banner.png' weighs 3.2 MB; total page image weight 6.8 MB (exceeds 5 MB limit)".next/image in your page components (e.g., app/page.tsx), use next-gen formats (WebP/AVIF), add descriptive alt text, and compress.