Alt text examples › Screenshots
Screenshots in documentation are there to show one thing: where to click, what a setting looks like, what an error says. Good alt text describes that one thing, not the whole window. If the screenshot contains text the reader needs (an error message, a value), quote it.
| # | The image | Bad alt | Good alt | Why |
|---|---|---|---|---|
| 1 | Screenshot of WordPress Settings > Media page with "Organize uploads" checkbox highlighted | screenshot | WordPress Media Settings with the "Organize my uploads into month- and year-based folders" checkbox highlighted | Name the screen and the highlighted control, which is why the screenshot exists. |
| 2 | Screenshot of an error dialog | error | Error dialog: "Upload failed: file exceeds the 2 MB limit" | Quote the error text exactly. Users search for it, and screen-reader users cannot read it otherwise. |
| 3 | Full-desktop screenshot where only the browser address bar matters | Screenshot of a Mac desktop with Chrome open, dock at the bottom, several tabs, a bookmark bar and a website | Chrome address bar showing the padlock icon next to https://example.com | Describe the part the text refers to. Everything else is noise. |
| 4 | Screenshot of code in an editor | code | (alt: "Code example, also shown as text below" and the code in a <pre> block) | Code in an image cannot be copied or read reliably. Put it in text; keep the alt as a pointer. |
| 5 | Mobile app screenshot on an App Store listing | app screenshot 1 | Habit tracker home screen: weekly streak calendar with 5 of 7 days checked | Store screenshots sell features. Say which feature the screen shows. |
| 6 | Before/after screenshot of a page redesign | before and after | Before: dense product page with small buttons. After: same page with a single large Add to cart button | Comparisons need both states described. |
| 7 | Screenshot of a Google Search Console report | GSC | Search Console performance report: 1,240 clicks and 38,000 impressions over the last 3 months | Data screenshots should give the numbers the article discusses. |
| 8 | Animated GIF showing drag-and-drop in an editor | gif | Animation: dragging an image block above a paragraph in the block editor | Describe the action the animation demonstrates. |
WCAG 1.1.1 Non-text Content (Level A) and 1.4.5 Images of Text (Level AA): text inside a screenshot that the reader needs, such as an error or a code snippet, should also appear as real text. The full requirement is explained in our guide to WCAG 1.1.1 alt text requirements.
Upload a photo to the free generator and get a draft in seconds (3 images a day, no signup). On WordPress, Alt Text BYOK writes it automatically on upload and fixes your whole media library in bulk, using your own AI key.
Try the free alt text generator Alt Text BYOK for WordPress