a11y/img-alt

Why

Without alt, a screen reader announces the file name or nothing, and the image's meaning is lost; when the image fails to load, nothing replaces it.

Fix

Describe what the image says in this context (alt="Revenue grew 20% in 2026"), not what it looks like. For an image that only decorates, write alt="" so assistive technology skips it. An image inside a link that has no other text needs the link's purpose as its alt.

Examples

<!-- bad -->
<img src="chart.png">
<!-- good -->
<img src="chart.png" alt="Revenue grew 20% in 2026">
<img src="divider.svg" alt="">

Sources

• WCAG 2.2, Understanding SC 1.1.1 Non-text Content
• MDN, the img element (alt)
• WAI Images Tutorial, decorative images

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/img-alt