Make Website Images More Accessible with Alt Text

Write alt text for what an image does in its page context. For an informative image, briefly convey the meaning that matters to the page. For an image that works as a link or button, describe its destination or action. For a decorative image or one whose information is already available nearby, use an empty alt value: alt="". For a chart or other complex visual, provide the detailed information in accessible text on the page instead of packing it all into one long alternative.

There is no single caption formula that works for every image. Start with its purpose, then decide whether it adds information, performs an action, repeats nearby content, or needs a longer text equivalent. This follows the purpose-based guidance in the W3C WAI Images Tutorial and its alt decision tree.

1. Decide what the image is doing

Before writing, inspect the image in the context of its page. Ask these questions in order:

Does it contain meaningful text? If the same words are already available as real text nearby, avoid repeating them. If the image is the only place those words appear and they matter, include the words in its alternative. Prefer real page text over text embedded in an image when you can.
Is it a link or button? State where the link goes or what the control does, unless adjacent text already makes that purpose clear.
Does it add information to the page? If yes, describe the relevant meaning briefly. If no, use an empty alt value.
Is it too complex to explain briefly? Give it a concise identifier or takeaway, then put the full explanation or data in accessible text nearby.

The subject alone does not determine the alternative. A bird’s exact species may be central on an identification page but incidental in a general article about a park. Describe what the reader needs from the image in that particular context.

2. Write alternatives for informative images

An informative image contributes a concept or fact. Write a short phrase or sentence that communicates the relevant meaning. Include details that help someone understand the page; leave out visual inventory that does not.

<img src="trail-map.png" alt="The Cedar Loop trail follows the river for 3 miles.">

This alternative gives the route information a visitor needs. If the page is specifically teaching map symbols, those symbols may also matter; if it is about choosing a short walk, the route length and direction may be enough. Let the surrounding content guide the level of detail.

Alt text is not a place to repeat the entire paragraph next to an image or add search keywords. Repetition makes the reading experience less useful and does not explain the image’s particular contribution.

3. Use an empty alt value for decorative or redundant images

If an image is purely decorative, adds no information, or repeats content already described in text, mark it with an empty alternative:

<img src="blue-divider.png" alt="">

Keep the attribute and its empty value. Omitting alt is different: some screen readers may announce the file name when no alternative is present. Whether an image is decorative depends on its purpose in context, so an automated rule cannot make this decision reliably for every page. See W3C WAI’s guidance on decorative images.

Common candidates for empty alt values include visual flourishes, spacer graphics, and a thumbnail that duplicates the title and description immediately beside it. Check that the information really is available nearby before treating an image as redundant.

4. Describe the action of linked and clickable images

When an image is the only content in a link or button, its alternative should tell the reader the link’s destination or the control’s action. Describe the function, not just the appearance of the icon.

<a href="/print/">
  <img src="printer.svg" alt="Print this page">
</a>

If a linked image sits beside text that already names the same link, avoid announcing the same thing twice. For example, when the text “Download the report” is inside the same link as a report-cover thumbnail, the image may use alt="" because the link already has a clear name.

For image maps, provide enough context for the overall set of links and make each clickable area’s alternative identify its own purpose or destination. Do not make readers infer a link’s function from the picture alone. The W3C images tutorial covers functional images, groups, and image maps.

5. Handle text inside images

If words in an image carry information and are not present elsewhere as text, include the necessary words in the alternative. If those words already appear nearby, repeating them in alt text can be redundant. When the lettering is only a visual treatment and adds no information, an empty alternative may be appropriate.

Whenever possible, put important words on the page as real text rather than embedding them in an image. Real text is easier to adapt and access. The right choice depends on whether the image is the only source of meaningful wording and how that wording is used on the page.

6. Give complex images a short alternative and a full equivalent

Charts, diagrams, and other dense visuals often cannot be explained completely in a short alt value. Use the alternative to identify the graphic or communicate its main takeaway, then provide its full data or explanation in nearby text, a list, or a table.

<figure>
  <img src="monthly-visits.png" alt="Monthly visits rose from January through June, with the largest increase in May.">
  <figcaption>Monthly visits, January through June. Exact values are listed in the table below.</figcaption>
</figure>

<table>
  <caption>Monthly visits</caption>
  <thead>
    <tr><th scope="col">Month</th><th scope="col">Visits</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">January</th><td>120</td></tr>
    <tr><th scope="row">February</th><td>145</td></tr>
    <tr><th scope="row">March</th><td>168</td></tr>
    <tr><th scope="row">April</th><td>190</td></tr>
    <tr><th scope="row">May</th><td>260</td></tr>
    <tr><th scope="row">June</th><td>280</td></tr>
  </tbody>
</table>

The short alternative gives the reader an orientation; the table makes every value available without requiring a long, difficult-to-navigate alt string. Choose a summary that is accurate and useful, and ensure the accompanying text contains the detail the graphic communicates. W3C WAI explains this approach in its complex images guidance and tips and tricks.

7. Review groups of images together

When several images combine to communicate one idea, provide the information for the group in a way that makes sense as a whole. Avoid forcing readers to piece together multiple repetitive alternatives. For example, a sequence of instructional images may need each step’s distinct instruction, while a row of decorative thumbnails may be better skipped.

8. Add alt text in HTML and content systems

In HTML, the alternative belongs on the img element. An informative image has a meaningful value, while a decorative or redundant image has an explicitly empty value.

<!-- Informative image -->
<img src="team-at-work.jpg" alt="A technician checks the water sample beside the field station.">

<!-- Decorative image -->
<img src="corner-decoration.svg" alt="">

If you add images through a content management system, look for its alternative-text field and enter the same purpose-based wording. Do not assume an image’s filename, caption, or nearby heading will automatically serve as its alternative; check the resulting HTML and the image’s context.

9. Audit alt text with a repeatable review

List the images on the page, including linked images and graphics inside components.
For each one, decide whether it is informative, functional, decorative or redundant, or complex.
Write the shortest alternative that communicates the image’s relevant meaning or function.
For complex visuals, add the complete equivalent information as page text, such as a data table.
Check for missing alt attributes, repeated announcements, and empty alternatives on images that actually convey information.
Review the page in context, because the same asset can need different treatment on different pages.

A screenshot can help you see which images appear together and what text surrounds them, but it cannot determine whether an image is decorative or whether its alternative conveys the right meaning. That remains an editorial decision based on the page’s purpose.

Or skip the browser setup

If you need screenshots of pages while reviewing image context, ScreenshotNeo can return an image with one API request. Screenshot capture can help with visual review; it does not write or validate alt text for you. See the ScreenshotNeo API documentation for options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import 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}`);

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

Troubleshooting alt text problems

Problem	Likely cause	Fix
A screen reader announces a filename	The `alt` attribute is missing.	Add a meaningful alternative, or `alt=""` if the image is decorative or redundant.
The same link name is announced twice	Both adjacent link text and the image alternative describe the same function.	Make the image alternative empty when the text already names the link.
The alternative is a long inventory of visual details	It describes everything visible instead of the information relevant to the page.	Rewrite it around the image’s purpose and the reader’s need.
A chart’s values are unavailable without the image	The alt value is being asked to carry a full data series.	Add the values or explanation as accessible text, such as a nearby table, and keep the alt concise.
Text in a graphic is missing to screen-reader users	The words appear only in the image and are not included in its alternative or elsewhere.	Provide the meaningful wording as real page text where possible, or include it in the alternative when appropriate.
An empty alt hides meaningful content	The image was marked decorative based on appearance or automation alone.	Reassess its role in the page context and add a concise alternative if it contributes information.

Performance, reliability, and standards context

Alt text is part of the page markup and does not require a separate image download to be announced. The main reliability concern is editorial: a technically present alternative can still be unhelpful if it misses the image’s function or duplicates nearby content. Review meaningful images when page context changes, and provide complex-image detail in ordinary page text that remains available independently of the image.

W3C WAI relates its images tutorial to WCAG 2.2 Success Criterion 1.1.1, Non-text Content, Level A. This is standards context, not a determination of legal obligations for any particular site or jurisdiction.

FAQ

Should every image have an alt attribute?

For HTML img elements, provide an alternative that fits the image’s role. Use meaningful text for informative or functional images and an explicit empty value for decorative or redundant ones.

Should alt text start with “Image of”?

Usually the surrounding context already makes clear that an image is present. Use the limited space for its meaning or function instead.

Can a screenshot tell me whether alt text is correct?

A screenshot can show visual context, but it cannot establish an image’s purpose or whether its alternative is useful. Review the page content and intended task alongside the rendered image.

Is alt text a caption?

No. A caption is visible page content; alt text is an alternative associated with an image. They can convey related information, but should not repeat one another without a reason.