Screenshot Alt Text: 12 Real Examples From Help Docs
By AutoBoost Team · 2026-10-29 · 7 min read
One help page had four screenshots with alt text over 200 characters, long enough to repeat the whole step, while others were missing, empty or cut off mid-sentence. On 29 October 2026 we tried 89 pages on 59 websites, mostly software help docs, tutorials and WordPress plugin guides. 32 sites gave us a page we could read, 4 refused us and the rest returned "not found". We fetched each page ourselves, read the HTML and copied the alt text exactly as written. The 12 examples come from 11 of those sites. They are not a random sample. We kept examples that show a clear good or bad habit, and we tried to keep a fair mix.
Key takeaways
- Only 4 of the 12 screenshots had good alt text. 2 were fine, and 6 had a fault.
- The faults were mostly about neglect, not bad writing. 2 had no alt text at all, 1 was cut off mid-sentence, and 1 reused the same words on 4 different screenshots.
- The good ones were between 56 and 137 characters. They named the screen and the one thing the reader needs to find.
- Over-describing is as common as under-describing, so length is worth watching.
Twelve screenshots from help docs
Each site name links to the exact page we fetched. Characters are counted from the alt text as it appears in the HTML.
| Site | Alt text | Characters | Verdict |
|---|---|---|---|
| GitHub Docs | "Screenshot of a diff for the README.md file. 3 red lines list the text that's being removed, and 3 green lines list the text being added." | 137 | Good. Says what the reader should see. |
| WordPress.org | "Dropdown of alignment options in the image block toolbar" | 56 | Good. Names the control and where it sits. |
| GitLab Docs | "Red arrows indicate the ‘Clone’ button and the ‘Clone with SSH’ option in the upper-right corner of the page" | 108 | Good. Tells you what the arrows point at. |
| WooCommerce | "WooCommerce Status page Help panel with the Setup wizard tab selected." | 70 | Good. Screen, panel and selected tab. |
| Microsoft Learn | "Screenshot showing how to create a container in the Azure portal" | 64 | Fine. Describes the task, not what is on screen. |
| Microsoft Support | "The Snipping tool interface in Windows 11." | 42 | Fine. Names the app but nothing about the state shown. |
| Hostinger Tutorials | "The Hostinger onboarding wizard showing the " | 44 | Fault: cut off. The sentence stops before it says what the wizard shows. |
| Hostinger Tutorials | "The Install WordPress modal showing the website credentials form with Website title, Administrator email, username, and password fields, and the Advanced section expanded with the Installation path and database options." | 219 | Fault: too long. Lists every field on the screen. |
| Elementor Help | empty (the screenshot file is called Click-Connect-Activate-scaled.png) | 0 | Fault: empty. |
| Elegant Themes | "how to install a WordPress plugin" | 33 | Fault: same alt on different images. It is used on 4 different screenshots on the page. |
| WP Rocket Docs | missing (the img tag has no alt attribute) | 0 | Fault: missing. |
| wikiHow | "Step 3 Take your screenshot." | 28 | Fault: a step label and an instruction. It says nothing about the image. |
Two notes on method. The Elementor and WP Rocket images are judged to be screenshots from their file names and the step they sit in, because we read the HTML and did not look at each picture. The Elegant Themes alt is on four screenshot files: add-new-plugin-1.jpg, compress-zip-file.jpg, FileZilla-Quick-connect.jpg and installed-plugin-FTP.jpg.
Name the screen, then the one thing on it
The four good examples share a pattern.
- Name the place first. "Dropdown of alignment options in the image block toolbar" tells a screen reader user where they are before anything else.
- Say what is selected, highlighted or changed. WooCommerce says the "Setup wizard tab" is selected. GitLab says red arrows point at the Clone button. The screenshot exists to show that one thing, so the alt text should too.
- Use colour only as a pointer. GitHub and GitLab mention outlines and arrows because that is how the writer marks the target. That is fine. Colour on its own, with no target, would not be.
- Keep the key words from the interface. "Clone with SSH" and "Setup wizard" are the words the reader will see on their own screen.
- Leave out the instruction. The steps in the page already say "click Revoke". The alt text should say what the image shows, not repeat the step. "Step 3 Take your screenshot." fails here.
- Leave out the field-by-field list. The Hostinger modal alt names five fields and two sections. A reader wants to know it is the credentials form, not every box on it.
- Do not lean on "screenshot of". Two of the 12 start with "Screenshot". It does no harm, but it costs about 14 characters in every alt text. The WordPress.org, GitLab and WooCommerce examples skip it and read well.
If the page text already describes everything in the screenshot, a short alt is enough. If the screenshot holds information the text does not, such as an error message, put that in the alt text or in the text beside it.
Neglect more than bad writing
Of the 12 examples, 6 had a fault and 2 were only fine.
- Empty: 1. Elementor's help page has 7 different screenshot files with an empty alt, out of 11 on the page. A screen reader skips all of them, so the steps make less sense. The same page has an older screenshot of the same step with a proper 77 character alt, so the team knows how to do it.
- Missing: 1. WP Rocket's screenshot of the options box has no alt attribute at all. That is worse than empty, because some screen readers read out the file name instead.
- Cut off: 1. Hostinger's onboarding screenshot has an alt that ends on the word "the". It looks like a generated description that was trimmed by a character limit.
- Too long: 1. Hostinger's install modal alt is 219 characters. On that one page, 4 of the 10 screenshot alts are over 200 characters, and the longest is 301.
- Same alt on different images: 1. Elegant Themes uses "how to install a WordPress plugin" on four different screenshots. A screen reader user hears the same thing four times and learns nothing from any of them.
- A step label, not a description: 1. wikiHow's "Step 3 Take your screenshot." is a heading for the step, not a description of the image.
- Describes the task, not the screen: 2 (fine). Microsoft Learn's "Screenshot showing how to create a container" and Microsoft Support's "The Snipping tool interface" are not wrong. They leave out what is actually on screen.
We did not find a file name used as alt text, or a keyword-stuffed one, in this set. Help docs and tutorials tend not to be written for search terms. The risk for screenshots is not stuffing. It is skipping the field or pasting a note about the step.
Sixty to 140 characters did the job
The 4 good alt texts were 56, 70, 108 and 137 characters, and the middle of that range is about 90. The 2 fine ones were 42 and 64, short because they say less. The step label (28), the repeated alt (33) and the cut-off one (44) fail on what they say, not on length. The longest, 219 characters, was a fault.
So an alt of roughly 60 to 140 characters did the job in every good case. Under 40 tends to name the app and stop. Over 200 tends to list the screen. If you cannot say it in one sentence, the screenshot probably needs a caption or a line in the body text as well.
Tip: read each draft against the screen
Tutorials and how-to posts are where screenshots pile up, and the alt field is usually the part left blank when uploading in a hurry. Check that each draft names the right screen and what the step is about, and cut it back if it lists every field. Screenshots of data are close cousins of table alt text and diagram alt text, and the main guide to bulk alt text covers the whole library.
The free AutoBoost SEO plugin hooks your WordPress site up to the AutoBoost SEO app, where missing alt text for the images in your posts is written in bulk. Nothing saves to the post or the media library until you approve it.