Start with the image’s purpose
Alternative text is a text substitute for an image. In a web page, it can be announced by a screen reader and can appear when an image does not load. Its job is not to inventory every visible detail. Its job is to give someone who cannot see the image the information they need from it.
Before writing, ask what the image contributes at this point in the page. Does it show a result, explain a process, identify an object or provide evidence for a claim? Then ask what a reader would miss if the image were removed. That missing information is a good starting point for the text. The same photograph might need different alternative text on a product page and in an article about lighting, because each page uses it for a different purpose.
Describe the useful information, not everything visible
A useful description is specific enough to convey the point and short enough to be understood without effort. If an article explains where to find a setting, “The Notifications switch is below the Account heading” is more useful than “Screenshot of a settings page.” The location and label help the reader follow the instruction; the screenshot’s existence does not.
Choose details that matter to the surrounding text. Color may be essential when a diagram distinguishes two paths by color, but irrelevant in a photograph illustrating a general activity. Avoid guessing at a person’s feelings, identity or intentions from their appearance. If the image itself does not establish a fact, the alternative text should not assert it.
You generally do not need to begin with “image of” or “picture of.” The interface can usually convey that the item is an image. There are exceptions: naming the form, such as “line chart” or “map,” can help when that form affects how someone interprets the information.
Use the surrounding page to avoid repetition
Alternative text works with captions, headings and body copy. If a caption already names the subject, the alternative text can add what the reader would otherwise learn by looking: a visible comparison, position or relationship. Repeating the caption word for word rarely adds value. Likewise, if the adjacent paragraph fully explains an image’s information, a shorter description may be enough.
Consider a page about a form error. The paragraph says that an email address is required, while a screenshot shows a red message directly beneath the Email field. Alternative text such as “The message ‘Enter an email address’ appears below the Email field” conveys the screenshot’s useful detail. It does not need to list every field and button on the page.
Some images add no information beyond nearby text and serve only as decoration. Those images usually need an empty alternative rather than a description or a missing alternative. This distinction matters: an empty alternative signals that the image can be skipped, while a missing one may cause an assistive tool to announce an unhelpful file name.
Handle diagrams and linked images by their role
A complex image may contain more information than a short alternative can reasonably carry. Give it a brief alternative that identifies its subject and main takeaway, then provide the detailed information in nearby text. For a chart, that might mean stating the overall pattern in the alternative and providing the values or comparisons needed to understand the argument in the page content. A description should preserve meaningful relationships, not just list labels.
When an image is also a link or button, its text needs to communicate the action or destination. A linked logo that takes people to the home page is better described by the site name and destination than by the logo’s shapes. An icon-only button needs an accessible name such as “Close menu”; a description of the icon’s appearance would not tell someone what the button does. If an icon sits beside visible button text that already names the action, the icon may not need its own description.
Check the result in context
For a standard image element in a web interface, put the chosen text in its alt attribute. Keep important information in the page rather than relying on text embedded in the image. If a visual is presented in another way, such as a background image, check whether it carries information that also needs to be available as text.
Review the page with the images hidden or temporarily unavailable. Can you still follow the explanation and complete the task? Then read the alternative text in sequence with the nearby headings, links and paragraphs. This catches descriptions that are accurate in isolation but repetitive or confusing in context. If possible, also try the page with a screen reader: listen for unclear controls, repeated labels and file names that should not be announced.
Treat alternative text as part of the content, not a final technical checkbox. When an image or its purpose changes, revisit its text. The best description is the one that lets a reader understand what the image contributes without requiring them to see it.
