Images Published With No Alt Attribute at All

Why it matters

Someone checking tomorrow's forecast by screen reader may hear a file name like "sunny-icon.png", or just "image", instead of "Sunny, 72°F", and the refresh button gives no clue what it does.

How to test

Inspect every img in DevTools (and any image-map area or input type="image"): if it has no alt attribute and no aria-label, aria-labelledby or title, it fails (F65). Automated checkers such as axe flag these too. Then decide what each image needs: an image that carries information or is the only content of a button needs alt text that says what it means or does. A purely decorative image needs an empty alt (alt="") instead; that case is scenario 4.

How to fix

Give every img an alt attribute (technique H37). The refresh icon is the only content of its button, so its alt becomes the button's name: say what the button does, "Refresh forecast". The weather icon carries the forecast itself, so its alt says the condition, "Sunny". There's no need to repeat the temperature, because 72°F is already text right next to it. If an image is purely decorative, give it an empty alt (alt="") rather than a description; that's scenario 4.

<button type="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°F" clearly, then finds the "Refresh forecast" button by name.

Who is affected

Screen reader users on icon-heavy screens get file names or a bare "image" instead of the one fact they opened the app to find. Voice control users can't say the refresh button's name to press it, because it has none.