Images have alt text

Screen readers announce images using the alt attribute. When alt is absent entirely — not empty, but missing — most screen readers announce the image filename or URL instead, producing output like 'img-2847-final-v3.jpg' read aloud to a user who cannot see the image. WCAG 2.2 SC 1.1.1 (Non-text Content) is a Level A requirement that mandates text alternatives for all non-decorative images. Section 508 (2018 refresh) 504.2 applies the same obligation. An empty alt="" is correct for decorative images — it signals 'skip this.' The missing-attribute case is distinct and always a failure regardless of intent.

Add an alt attribute to every <img> tag. Describe what the image conveys for content images; use an empty string for decorative images:

<!-- Content image — describe the meaningful information -->
<img src="chart.png" alt="Bar chart showing 40% growth in Q3 2024">

<!-- Decorative image — empty alt suppresses screen reader announcement -->
<img src="divider.svg" alt="">

<!-- Icon inside a button — describe the action on the button, not the icon -->
<button aria-label="Close dialog"><img src="x-icon.svg" alt=""></button>

In Next.js, the <Image> component enforces alt at the TypeScript level — the prop is required. For icon libraries (Lucide, Heroicons), use aria-label on the containing interactive element and set aria-hidden="true" on the icon itself.