Alt text for screenshots
In documentation, a screenshot usually shows one thing the reader needs to find or confirm. The alt should name that thing, not inventory the interface.
Rules for this kind of image
- Start with "Screenshot:" only when the medium matters (usually it does in docs).
- Name the screen and the control or state that matters.
- Error messages: quote the message text exactly.
- Code in screenshots: put the code in a real code block instead.
4 examples, weak vs better
Settings screen with a toggle on · Help article step
Weak
settings.pngBetter Screenshot: Settings > Notifications, with Email alerts switched on67 charspasses checks
Path and state are the instruction.
Error dialog · Troubleshooting page
Weak
errorBetter Error dialog reading "Payment declined: card expired"53 charspasses checks
Exact text helps users match their screen and search.
Dashboard overview · SaaS landing page
Weak
dashboardBetter Analytics dashboard showing daily visitors, top pages and a traffic graph for the last 30 days94 charspasses checks
Tells a prospect what the product shows.
Screenshot of code · Tutorial
Weak
codeBetter Code for the config file, also shown as text below50 charspasses checks
Code belongs in text; alt just points there.
Have your own images? Draft alt text with the AI alt text generator, then edit it using these patterns.
Questions people ask
Should I start alt text with "Screenshot of"?
In documentation it is useful, because it tells the reader this is the interface they should see. Elsewhere, "image of" style openers are usually redundant.