Alt text for screenshots and UI images

A screenshot is a picture of an interface or a document, and its value usually sits in the words and states inside it: a menu label, a setting that is switched on, an error message, a figure on a dashboard. Alt text, the text in an image's alt attribute that stands in for the picture, has to carry that for anyone who cannot see it. WCAG 1.1.1 Non-text Content asks for a text alternative that serves the equivalent purpose (our WCAG 1.1.1 explainer covers it), and our complete guide to alt text sets out the general rules. For a screenshot, the question is not "what does this look like?" but "what did this picture give the reader that the words around it did not?"

Why the screenshot is on the page

W3C's informative images tutorial says that treating an image as informative or decorative is a judgment based on the reason for including it. On a screenshot, that reason is usually one of three:

• Orientation. In a how-to, the screenshot shows what the screen looks like. The steps beside it usually already name the controls.
• Information. It holds content the reader needs: an error message, a value, the state of a setting.
• Demonstration. On a product page or in a review, it is the evidence that a feature exists and shows what it does.

Orientation screenshots often need very little alt text, because the text carries the instructions. Information screenshots need the content transcribed. Demonstration screenshots need a sentence about what is being shown.

W3C's alt decision tree opens with a question that fits screenshots well: does the image contain text? If the same text is also on the page as real text, use an empty alt="", which tells assistive technology to skip the image (see our guide to decorative images). If the text appears nowhere else, put it in the alt.

What to put in the alt text, and what to leave out

The HTML Standard's general guidelines say the intent is that replacing every image with its alt text does not change the meaning of the page, and they suggest imagining that you are reading the page aloud over the phone. W3C's tips page gives the same advice. Apply that test to each screenshot.

Put in:

• The screen or state. Name the page, dialog or tab and anything about its state that matters: "Billing settings with the annual plan selected."
• The words that matter, quoted exactly. Button labels, field names, error text and values. A reader told to choose "Change plan" needs those exact words to find the control.
• What to notice. If the screenshot circles a field or numbers its callouts, say which field and what each number marks.

Leave out:

• The frame. Browser chrome, window borders, scroll bars and device bezels.
• Position or color as the only clue. "The green button at the top right" helps only people who can see it. WCAG 1.3.3 Sensory Characteristics asks that instructions do not rely solely on shape, color, size or visual location, so name the control.
• Words that are already nearby. The HTML Standard says an alt value should not hold the image's caption or repeat the prose next to the image. Our guide to captions, alt text and figcaption shows how the three divide the work.

Should the alt start with "screenshot of"? W3C's tips page says words like image, icon and picture are usually superfluous, because screen readers announce the presence of an image. Our view: leave it out when the screenshot simply shows a screen, and keep it when the capture itself is the point, such as a captured social post, where the reader needs to know the words belong to someone else's page.

Alt text by kind of screenshot

These examples are our own and invented. The better version is a sentence or two, with interface text quoted exactly. Our alt text examples page covers other kinds of image.

Screenshots of text, code and error messages

An image of text is text that has been rendered as a picture. W3C's images of text tutorial calls real text good design practice, because it can be resized without losing clarity and its colors can be changed to suit the reader. Where an image of text must be used, its text alternative must contain the same text.

WCAG 1.4.5 Images of Text treats screenshots differently. Its definition of an image of text leaves out text that is part of a picture with significant other visual content, and W3C's Understanding page names screenshots among such pictures, meaning those that convey important information through more than just text. A capture of a whole app window is therefore not an image-of-text problem by itself. A tight crop of only words, such as terminal output, a block of code, a paragraph from an email or an error message, is much closer to an image of text, and the advice above applies.

Put those words on the page as text instead: code in a code block, a quotation in a quote block, an error message in the sentence that introduces it. The decision tree then gives any leftover image an empty alt. If the picture must stay, W3C's images of text tutorial requires its text alternative to contain the same text. Short text goes in the alt. For longer text, put the full text beside the image and have the alt say where it is, using one of the long description methods below. Our guide to images of text covers the criterion in depth. Redact personal data before you publish a screenshot, because alt text that transcribes an email address from the image publishes it as text too.

Dashboards and other dense screenshots

W3C calls an image complex when it holds more information than a short phrase or sentence can convey. Its examples are graphs and charts, diagrams and maps, so a screenshot of a dashboard often counts, because it contains charts. The complex images tutorial asks for a two-part text alternative: a short description that identifies the image and, where appropriate, says where the long description is, and a long description that is a textual representation of the essential information. Three of its points carry over to screenshots:

• Make long descriptions available to everyone. Complex images are harder for many people, especially those with low vision, learning disabilities or limited subject knowledge, so showing the description in the main content reaches beyond screen reader users.
• Refer to the image in the text. A sentence beside the screenshot that says what it shows points readers to the part that matters.
• Reduce the complexity. The tutorial notes that simplifying an image can make it easier for everyone. For a screenshot, crop to the panel you are discussing.

The tutorial shows three ways to attach a long description: a link beside the image, an alt that names the heading where the description sits, and a figure element with the description inside its figcaption, which keeps headings, paragraphs and tables. A fourth, aria-describedby, suits only plain text, because the referenced content is read as one paragraph and loses its structure. Our alt text for charts guide works through all four.

How much can the alt itself hold? W3C's tips page says that if more than a short phrase or sentence is needed, a long description method is better. The HTML Standard's own screenshot example, from a gallery of screenshots for a new operating system, puts a full paragraph in the alt, because there the screenshot is the whole point of the page (see its section on images that are a key part of the content). Our rule of thumb: keep the alt short unless the screenshot is itself the subject of the page, and give anything a reader might scan, compare or copy as visible text or a table. How long should alt text be? covers length in general.

Product tours, mockups, mobile screens and UI icons

• Product tour and marketing images. Say what the screenshot demonstrates, not every widget in it.
• Mockups and wireframes. Describe the structure the reader is meant to judge, in reading order, and leave styling out unless it is under discussion.
• Phone and tablet captures. A device frame is decoration. Describe the screen inside it.
• Icons inside a screenshot. Name the icon by what it does or how it is labeled, such as "the gear icon labeled Settings". Icons in your own live interface are a separate case: see alt text for icons and icon buttons.
• Captured social posts and chats. Transcribe the words and say whose they are if the image shows it. Alt text on social media covers the platforms' own alt fields.

Steps that work without the screenshot

The most reliable fix is in the surrounding text. In its bottle-cap example, W3C's informative images tutorial notes that giving instructions in the main content makes the information available to everyone, while the illustration stays for people who prefer to see it. For a how-to, that means a step that works with images off: "Select Billing in the left menu, then choose Change plan." The screenshot then orients sighted readers, and its alt can be short or empty. The tutorial's guide-dog example gives the test: when the text already explains what the image shows, the image may be treated as decorative. When the picture shows something the text does not, such as the confirmation a reader should expect, it needs alt text.

Check it yourself

Start with a read-through. Replace each screenshot on a page, in your head or aloud, with its alt text or with nothing. Can you still finish the task? Is any exact wording missing that a reader needs to find a control? That is the HTML Standard's test, applied one screenshot at a time. Two free tools help with the rest:

• The alt text checker reads a page address and checks up to six of its described images, saying whether each description is true of the picture. Each verdict shows what the model saw in the image, so you can confirm it against your screenshot.
• The alt text generator writes a draft for each image you upload. Add a line of page context, then check every label, number and message against the screenshot. The tool shrinks each image so its longest side is at most 1,200 pixels before sending it, so crop to the part that matters first: small text in a full-screen capture is harder to read once shrunk. Our AI alt text accuracy write-up tested product photos and gradients, with no screenshots, so treat a screenshot draft as a starting point.

The free scan also looks at your pages. Scan my site for free runs 16 rule-based checks, including images with no alt attribute and alt text that looks like a placeholder, such as a filename. Its rule checks read the page's HTML and do not open images, so they cannot say whether a description is true. What we check lists every rule.

Keep it checked

Screenshots go out of date. A release renames a menu, someone swaps in a new capture, and the alt text still describes the old screen. Nothing in the markup looks wrong: the alt attribute is there and is not empty. GotAlt checks the pages you monitor every week. It runs its rule checks, compares image alt text with the image itself (on up to six images per page), opens monitored pages in a browser for contrast and other render-dependent checks (see what we check), and reports what changed. Plans start at $69 a month: Audit my whole site from $69/mo.

Automated checks cover part of WCAG. A tool can flag a description that does not match the picture. Whether it is the description this reader needs, on this page, is still a judgment for a person.