• Success Criterion 1.1.1
  • Conformance level A
  • W3C reference F65

Images Published With No Alt Attribute at All

1.1.1 — Non-text Content

Scenario

Setting

A weather app's forecast screen

What’s wrong

Images, image-map areas, or image buttons have no alt attribute at all — screen readers read the filename or say just 'image'.

Example 

<button><img src="refresh-icon.png"></button>
<img src="sunny-icon.png">72°F

Why it matters

Someone checking tomorrow's forecast by screen reader hears a long file path read character by character instead of "sunny, 72 degrees."

How to test

Inspect every img, area, and input type="image" in DevTools: any missing the alt attribute entirely fails, regardless of whether it's meaningful or decorative.

How to fix

Add the alt attribute to every image, even icon buttons. A missing alt attribute makes screen readers fall back to reading the full file path.

<button><img src="refresh-icon.png" alt="Refresh forecast"></button>
<img src="sunny-icon.png" alt="Sunny">72°F

Outcome

A commuter checks the forecast before leaving and hears "sunny, 72 degrees" clearly.

Who is affected

Screen reader users on icon-heavy dashboards get noise instead of the one fact they opened the app to find.

Learn more

Related scenarios