How to Make Website Screenshots Accessible
Learn when to use descriptive or empty alt text for website screenshots, how to handle embedded text and complex interfaces, and how to review alternatives in context.
Make a website screenshot accessible by giving it an alternative that serves its purpose in the page. Use concise descriptive alt text when it conveys information, alt="" when it is decorative or redundant, and an action or destination when it is a link or control. For a complex interface, chart, or workflow, use short alt text to identify the screenshot and provide its important details in nearby text, a list, or a table.
There is no single alt string that works for every use of the same screenshot. Decide what a reader who cannot see it needs from this page, then preserve that information in an appropriate form. W3C WAI’s Images Tutorial likewise describes the alternative as dependent on the image’s usage, context, and content.
1. Decide what the screenshot does on this page
Before writing alt text, consider why the screenshot is included and whether nearby copy already communicates the same information. Describe what matters to understanding or using the page, not every visible pixel.
| Screenshot’s purpose | What to provide | Example approach |
|---|---|---|
| Decorative or redundant | Empty alt text: alt="" |
Use when removing the image would leave the same information and function available. |
| Informative | Concise description of its unique, relevant point | Identify the interface state or task-relevant detail not already stated nearby. |
| Functional link or control | The action or destination | Describe what happens when activating it, rather than merely listing what it depicts. |
| Image containing meaningful text | The meaningful words, with a visible equivalent for substantial copy where practical | Include a short instruction or label; put longer text in the page itself. |
| Complex interface, chart, or workflow | Short identifying alt plus detailed equivalent nearby | Use prose or steps for a workflow and a table for important data and relationships. |
These are decision aids, not fixed categories. A screenshot can be decorative in one article and informative in another because the surrounding content changes what it contributes.
2. Write the alternative
Informative screenshots
State the key message, state, or task detail that is unique to the image. Keep the text concise enough to identify that contribution. Do not narrate browser chrome, colors, spacing, or every control unless those details are relevant to the task.
<img src="checkout-error.png" alt="Checkout displays an address validation error below the postal code field.">This example is useful only if the validation state is the point being explained and is not already fully conveyed in adjacent text. If the paragraph already explains the same error and the image adds nothing, an empty alternative may be more appropriate.
Decorative or duplicated screenshots
Use an explicit empty alt attribute when the screenshot adds no information or function beyond nearby content:
<img src="settings-example.png" alt="">Do not omit the alt attribute on an informative image. An omitted alternative can leave assistive technology without a useful author-provided description. Empty alt is a deliberate choice that tells it the image can be skipped.
Clickable screenshots
If the screenshot is itself a link or button, write the alternative for what activating it does or where it goes. A purely visual description can fail to communicate the control’s purpose. For example, a linked screenshot that opens a larger preview could use wording such as “Open the full-size dashboard screenshot.” Make sure the link’s accessible name makes sense in its surrounding context.
Text inside a screenshot
When words shown in the image carry meaning or give instructions, include those words in the alternative if they are short. WAI’s image guidance says the text alternative for an image of text should contain the same words. For substantial copy, provide the text visibly in the page where practical instead of making readers depend on text embedded only in an image.
3. Provide an equivalent for complex screenshots
A dashboard, chart, multi-step flow, or dense application screen may contain more detail than belongs in one alt string. Identify the screenshot briefly, then put its important information in normal page content. Choose the format that preserves the meaning:
- Use a table for values, labels, and comparisons.
- Use prose for a conclusion, state, or relationship that needs explanation.
- Use a numbered list for steps in a workflow.
- Include relevant error messages, labels, or instructions as text when they affect how a task is completed.
<figure>
<img src="monthly-usage.png" alt="Bar chart comparing monthly usage across four services; data follows.">
<figcaption>Monthly requests by service. The table gives the values shown in the chart.</figcaption>
</figure>
<table>
<caption>Monthly requests by service</caption>
<thead><tr><th scope="col">Service</th><th scope="col">Requests</th></tr></thead>
<tbody>
<tr><th scope="row">Alpha</th><td>120</td></tr>
<tr><th scope="row">Beta</th><td>95</td></tr>
<tr><th scope="row">Gamma</th><td>140</td></tr>
<tr><th scope="row">Delta</th><td>80</td></tr>
</tbody>
</table>The figures above are illustrative markup examples, not measured results. Keep the chart’s key conclusion or relationship in the equivalent too; a table of raw values alone may not communicate the point the chart was included to make.
4. Add alt text to generated screenshot files
Screenshot capture creates an image file. It does not determine how that image is used in a page, so it cannot choose the right alternative for every context. Add alt text where the screenshot is embedded, and decide there whether it is informative, redundant, functional, or complex.
A simple HTML embedding might look like this:
<figure>
<img src="account-settings.png" alt="Notification settings page with email alerts disabled and weekly summaries enabled.">
<figcaption>Account notification settings used in the setup guide.</figcaption>
</figure>Use that description only if those settings are the relevant information and are not already stated in surrounding text. For a screenshot included solely for visual atmosphere, use alt="". For a complex settings page, summarize its purpose in alt text and describe the relevant options in the instructions.
5. Review the result in context
- Read the surrounding paragraph and ask what information the screenshot uniquely adds.
- Choose a concise alternative that preserves that information or the control’s function.
- For complex content, check that a nearby text equivalent contains the important details and relationships.
- Review the page with the image unavailable or hidden: the essential information and action should still be understandable.
- Have a person judge the alternative in context; a presence check alone cannot judge whether it communicates the right thing.
WAI Easy Checks explains that an automated test can detect a missing alt attribute, while deciding whether the alternative is appropriate requires seeing the image and judging its context. ADA.gov web guidance also cautions that automated checkers need careful use; a clean scan does not establish that all accessibility needs are met.
6. Understand the standards context
WAI’s image tutorial connects its guidance to WCAG success criterion 1.1.1 Non-text Content (Level A), 1.4.5 Images of Text (Level AA), and 1.4.9 Images of Text (No Exception) (Level AAA). The advice in this article is practical authoring guidance; do not treat every tip as a separate criterion or assume that one alt string establishes conformance. The reviewed WCAG 2.1 Recommendation describes its criteria as testable and technology-independent and discusses combining automated tests with human evaluation. Check the applicable standard, version, jurisdiction, and policy before making a compliance claim.
7. Capture screenshots without losing the accessibility context
If you automate screenshot capture for documentation, preserve the URL and the relevant page state alongside the resulting file so an author can describe it accurately. Capture one element when a particular interface component is the subject; use a full-page image only when the full page contributes useful information. Regardless of capture method, make the accessible alternative decision where the image is published, based on the surrounding content.
Common problems and fixes
| Problem | Why it happens | Fix |
|---|---|---|
The screenshot has no alt attribute |
The file was embedded without an author-provided alternative. | Add a concise description or a deliberate empty alt="" if it is decorative or redundant. |
| The alt text lists everything visible | It describes pixels rather than the screenshot’s purpose in context. | Keep only details that matter to understanding or using the page. |
| A linked screenshot says what it depicts but not what it does | The alternative describes appearance instead of function. | State the action or destination, such as opening a full-size preview. |
| A dashboard alt string is very long | Too many values and relationships are being compressed into a short text alternative. | Use brief identifying alt text and a nearby table or prose equivalent. |
| An automated scan passes but the image is still confusing | Presence of an attribute does not establish the quality or contextual fit of its text. | Review the screenshot and surrounding page manually, including with the image unavailable. |
| Important instructions are only visible in the screenshot | Meaningful text has no equivalent outside the image. | Reproduce the important wording in page text; use concise alt text for short embedded text. |
Performance, reliability, and cost considerations
Alt text itself does not change the size or speed of screenshot capture. A textual equivalent can make the information usable without depending on the image rendering correctly. Keep the capture workflow and the publishing workflow distinct: an API can return an image, but the author still needs to supply context-sensitive alternative text. If screenshots are generated repeatedly, avoid treating successful file generation as proof that the published alternative is correct.
Or skip the browser setup
For a screenshot you need to publish, add its contextual alternative in your page markup after capture. ScreenshotNeo’s single GET request returns an image or PDF; it does not select alt text for your publishing context. The [ScreenshotNeo API documentation](https://screenshotneo.com/docs/) covers the capture API.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. See ScreenshotNeo and the API documentation. Sign up for 1,000 free screenshots a month with no card.
FAQ
Should every website screenshot have descriptive alt text?
No. Use descriptive text when the image contributes information or function. Use alt="" when it is decorative or redundant with the surrounding content.
Can an automated accessibility checker approve my screenshot’s alt text?
A checker can flag missing attributes, but a person must judge whether the alternative communicates the right information in context.
How should I handle text-heavy screenshots?
Include short meaningful wording in the text alternative. For substantial content, put the wording in visible page text and use nearby structured content for the full explanation.
Does good alt text by itself make a page conformant?
No. The screenshot is one part of the page. Applicable requirements depend on the relevant standard and context, and an alt string alone does not establish conformance.
