Image is missing alt text

What’s wrong

An <img> element has no alt attribute.

Why it matters

Screen reader users — including people who are blind or have severe low vision — rely on alt text to understand what an image shows. Without it, most screen readers will read out the file name instead, like “hero-banner-final-v3.jpg”, which tells the user nothing. For informative images, this means the content is simply lost.

How to fix it

Add an alt attribute to every <img>. If the image conveys information, describe that information. If the image is purely decorative, use an empty alt="" so screen readers skip it.

<img src="/team/sarah.jpg">
<img src="/divider-wave.svg">

<!-- Informative image: describe what matters -->
<img src="/team/sarah.jpg" alt="Sarah Johnson, Head of Design">

<!-- Decorative image: empty alt so screen readers skip it -->
<img src="/divider-wave.svg" alt="">

A common mistake is writing alt text that just restates the file name or says “image of”. Describe what the image communicates, not what it literally depicts. “Bar chart showing 40% growth in Q3” is good. “Chart image” is not.

Learn more

• WCAG Understanding 1.1.1
• MDN: alt attribute
• W3C Alt text decision tree