Non-text Content (alt text).

Screen readers can't describe images without alt text — 1 billion+ people with disabilities rely on this

What does this check test?

This check verifies that every non-text element on the page — images, icons, SVGs, canvas elements, and image buttons — has an appropriate text alternative. Text alternatives are provided via the `alt` attribute on `<img>` elements, `aria-label` or `aria-labelledby` on SVGs and icon buttons, and `title` on `<iframe>` elements. Decorative images that convey no information should use an empty `alt=""` attribute so screen readers skip them entirely. This maps to WCAG 2.2 Success Criterion 1.1.1 (Level A), which is one of the most commonly failed criteria on the web.

Why does it matter?

Over 1 billion people worldwide live with some form of disability, and many rely on screen readers like JAWS, NVDA, or VoiceOver to navigate the web. When images lack alt text, screen readers either skip them entirely or announce the raw filename (e.g., "IMG_20230415_143022.jpg"), which is useless. Alt text also serves as fallback content when images fail to load on slow connections. Search engines use alt text to understand image content, providing secondary SEO value. Most importantly, missing alt text is one of the top legal risk factors — it is cited in the majority of ADA web accessibility lawsuits.

Who is affected?

Front-end developers adding images and icons to pages, content editors uploading media through a CMS, UX designers specifying decorative vs. informational imagery, and QA engineers validating compliance. Component library maintainers should ensure image and icon components require or encourage alt text props.

Where does this apply?

Every page and component that renders non-text content: hero images, product photos, avatars, logos, inline icons, SVG illustrations, image maps, `<canvas>` charts, video poster frames, and CAPTCHA images. Pay particular attention to dynamically loaded content (lazy-loaded images, carousel slides, user-uploaded content) where alt text is often forgotten.

How to fix it

<!-- Bad: missing or generic alt -->
<img src="chart.png" alt="image">
<img src="chart.png">

<!-- Good: describes what the image conveys -->
<img src="chart.png" alt="Q3 revenue grew 24% to $4.2M">

<!-- Decorative: empty alt + presentation role -->
<img src="divider.svg" alt="" role="presentation">

<!-- SVG icon with accessible name -->
<svg aria-label="Search" role="img">...</svg>

<!-- Icon button: label the button, hide the icon -->
<button aria-label="Close dialog">
  <svg aria-hidden="true">...</svg>
</button>

References

• WCAG 2.2 — Success Criterion 1.1.1 Non-text Content
• W3C WAI — Images Tutorial
• web.dev — Image alt text