Describe images in words

Give every <img> an alt attribute. Say what it shows if it carries meaning, or leave it empty if it is decoration.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Describe meaningful images in one short sentence about what matters. Give decorative images alt="". Hide icons inside labelled buttons with aria-hidden="true".

Example

<img src="team.avif" alt="Two reviewers checking code on one laptop" width="800" height="533">
<img src="divider.svg" alt="">
<button><svg aria-hidden="true">…</svg> Menu</button>

How to check

Lighthouse image-alt passes. Read the alt texts out of context and make sure they make sense.

Measured

On a reference site, removing the hero image's alt attribute took Lighthouse Accessibility from 100 to 95 and SEO from 92 to 85.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/image-alt-text.