How do you decide what alt text an image needs? When should alt be empty?
Judging an image's PURPOSE, not describing its pixels — including when the right alt is none.
Alt text conveys the image's FUNCTION in context, not a literal description of its pixels. Ask: if the image vanished, what information or action would be lost? That answer is the alt. An informative image (a chart, a product photo, a diagram) needs alt that carries its meaning — for a chart, summarise the takeaway, not 'chart'. A functional image (an icon inside a link or button) takes its alt from the action: a magnifying-glass link gets alt='Search', not 'magnifying glass'. A DECORATIVE image that adds nothing — a background flourish, a divider, an icon sitting next to text that already says the same thing — must get alt="" (empty, not missing). An empty alt tells the screen reader to skip it; a MISSING alt attribute makes many screen readers fall back to reading the file name ('IMG_2043.jpg'), which is noise. Never start alt with 'image of' — the role already says it's an image. Keep it concise; if the image needs a long description (a complex infographic), keep alt short and provide the detail in adjacent text or via a longer description. CSS background images are invisible to assistive tech entirely, so anything meaningful must be a real <img> with alt (or have its meaning conveyed in text).
Writing alt for any image; deciding when empty alt is correct vs describing the content.
<!-- Informative: alt carries the meaning -->
<img src="chart.png" alt="Sales doubled from Q1 to Q2">
<!-- Functional: alt = the action, not the picture -->
<a href="/search"><img src="lens.svg" alt="Search"></a>
<!-- Decorative: empty alt so the screen reader skips it -->
<img src="divider.svg" alt="">
<!-- WRONG: missing alt -> screen reader may read the filename -->
<img src="IMG_2043.jpg">