Image Alt Text Examples: How to Write Accessible Descriptions
Learn how to write concise, useful alt text for photos, links, icons, charts, maps and images containing words.
Alt text is a short text alternative that communicates an image’s purpose and meaning in its page context. Write it for the person who cannot see the image, not as a list of every visible detail.
Use a concise description for an informative image, alt="" for decorative or redundant imagery, and action or destination wording for an image that works as a link or control. Include important words embedded in the image. For charts, maps and diagrams, provide a short summary in alt and put detailed data or relationships in nearby text or a longer description.
1. Decide what the image does
Classify the image before writing anything. The same photograph can require different alt text on different pages because its relevant meaning changes with the surrounding content.
| Image purpose | Use | Example |
|---|---|---|
| Informative | Conveys information that is not available in nearby text | alt="Two cyclists reviewing a route map" |
| Decorative | Adds visual interest but contributes no information | alt="" |
| Redundant | Repeats an adjacent heading, link or caption | alt="" |
| Functional | Activates a link or control | alt="Search" |
| Text in an image | Contains words essential to understanding the page | alt="Library closed Monday" |
| Complex visual | Needs a summary plus detailed accessible data | alt="Bar chart showing mobile traffic increased; data table follows." |
The W3C Images Tutorial describes these purpose-based choices. Its central rule is to convey the image’s meaning or function rather than describe every visible object.
2. Write informative alt text
- Identify why the image is present.
- State the most important subject, action or result first.
- Keep the wording as short as possible while preserving the information.
- Use words already established by the page when they make the meaning clearer.
Good examples
alt="Two cyclists reviewing a route map"for an article about route planning.alt="Telephone"before a phone number.alt="Solar panels installed on the school roof"in a case study about the installation.alt="Chef pouring sauce over a plated dish"in a recipe explaining that technique.
What to leave out
Do not automatically start with “image of” or “picture of”; assistive technology generally announces the graphic role. Avoid camera details, subjective adjectives and visual inventory that do not help the user complete the page’s task.
For example, alt="Image of a beautiful sunny blue-sky outdoor photograph of two cyclists" is usually less useful than alt="Two cyclists reviewing a route map".
3. Know when alt should be empty
Use a real empty attribute, alt="", when an image is decoration, a border, a spacer or a duplicate of adjacent text. Do not omit the attribute. If it is missing, some screen readers may announce the file name.
<!-- Decorative flourishes -->
<img src="divider.svg" alt="">
<!-- The adjacent heading already gives the meaning -->
<h2>Crocus bulbs</h2>
<img src="crocus.jpg" alt="">
<!-- A decorative background should normally be CSS, not content -->
<div class="hero-background" aria-hidden="true"></div>An empty alt value tells assistive technology to skip the image while preserving a valid text alternative attribute.
4. Write alt text for links, buttons and icons
When an image is the control, describe the action or destination. The user needs to know what will happen, not what the symbol resembles.
<a href="/search">
<img src="search.svg" alt="Search">
</a>
<a href="/print">
<img src="printer.svg" alt="Print this page">
</a>
<a href="https://example.com">
<img src="logo.svg" alt="Example.com homepage">
</a>A label such as alt="magnifying glass" or alt="printer" describes an object but not the control’s purpose. If visible text already labels the control, make the image decorative:
<button type="submit">
<img src="search.svg" alt="">
Search
</button>5. Handle images containing words
If words in an image are important to understanding the page, include those words in the alternative text. Do not replace a meaningful notice with a generic label such as “banner” or “graphic.”
<img src="library-notice.png" alt="Library closed Monday">If the image repeats a nearby heading or paragraph exactly, use alt="" and keep the text in HTML so it remains selectable, searchable and editable.
6. Describe charts, diagrams and maps
A short alt value cannot carry every data point in a complex visual. Put the main takeaway in alt, then provide the exact values or relationships in a data table, adjacent paragraph or another long-description method.
<img
src="traffic-by-year.png"
alt="Bar chart showing mobile traffic increased from 42% to 58% between 2024 and 2025; data table follows."
>
<table>
<caption>Mobile traffic by year</caption>
<tr><th>Year</th><th>Share</th></tr>
<tr><td>2024</td><td>42%</td></tr>
<tr><td>2025</td><td>58%</td></tr>
</table>For a diagram, summarize the relationship first: alt="Checkout flow from cart to payment confirmation; detailed steps follow." Then provide those steps as real text. For a map, state the relevant route, location or relationship instead of listing every street.
7. Alt text for common image types
People and events
Name the action and the people’s role when relevant: alt="Nurse demonstrating an inhaler to a patient". Do not guess identities, emotions or attributes that the page does not establish.
Products and objects
Include the product or object detail that supports the surrounding task: alt="Black USB-C hub with four ports" in a hardware comparison. Omit color or model details when they do not matter.
Logos
When a logo links to a home page, identify the destination, such as alt="Example.com homepage". When the company name is already adjacent and the logo is decorative, use alt="".
Avatars and profile photos
Use a person’s name when the identity is relevant and known: alt="Avery Chen". If the avatar is purely decorative next to a visible name, use alt="".
Captions and nearby text
Alt text is not a caption. A caption can provide context, attribution or interpretation visible to everyone; alt text should provide the essential equivalent for someone who cannot see the image. Avoid repeating the caption word for word unless repetition is needed to preserve the meaning.
8. A repeatable writing checklist
- What is the image’s purpose on this page?
- Does it add information that nearby text does not?
- What is the shortest wording that preserves that information?
- Is the image a link or button? If so, does the text state its action or destination?
- Are important words printed inside the image included?
- Is it a chart, map or diagram that needs a nearby table or explanation?
- If it is decorative or redundant, did you use
alt=""rather than omit the attribute? - Would the wording still make sense when read without the image?
9. Implement and review alt text in HTML
<!-- Informative image -->
<img src="route-review.jpg" alt="Two cyclists reviewing a route map">
<!-- Functional image -->
<a href="/search">
<img src="search.svg" alt="Search">
</a>
<!-- Decorative image -->
<img src="confetti.svg" alt="">During review, disable images or read the page with a screen reader and ask whether the remaining text supports the same task. Inspect the DOM to confirm every meaningful <img> has an alt attribute, including images inserted by components or CMS fields.
10. Troubleshooting common mistakes
| Problem | Cause | Fix |
|---|---|---|
| Screen reader announces a file name | The alt attribute is missing |
Add meaningful alt text or alt="" for decoration. |
| Users hear the same description twice | Alt repeats a visible caption or link text | Make the image decorative or shorten the alternative. |
| Control is announced as “magnifying glass” | Alt describes the icon instead of its action | Use “Search” or the control’s destination. |
| Important notice is missed | Text inside the image was omitted | Include the words in alt text and, when possible, provide them as HTML too. |
| Chart is impossible to understand | Alt attempts to list every value or says only “chart” | Give the key takeaway in alt and add a table or detailed text. |
| Decorative artwork interrupts reading | It has a descriptive alt value | Change it to alt="". |
| Alt sounds correct but is misleading | The author described appearance without page context | Rewrite around the image’s purpose and the user’s task. |
11. Performance, reliability and maintenance
Alt text itself adds negligible page weight. The reliability risk is editorial: component changes can turn a decorative image into a functional one, or a chart can change while its description stays old. Keep meaningful labels near the component data, review generated images in content pipelines, and include alt checks in pull requests and CMS validation.
For complex visuals, keeping the detailed representation in HTML makes it searchable, responsive and easier to update than embedding all information in a bitmap. Do not use an image-generation or screenshot workflow as a substitute for accessible text.
12. Or skip the browser setup
If you are generating screenshots for documentation, visual regression examples or accessibility review, ScreenshotNeo can return an image or PDF from one GET request. Its cleanup steps accept consent banners and remove more than 60 known consent platforms, newsletter popups and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. ScreenshotNeo also provides an MCP server for AI agents through take_screenshot, get_page_info and capture_pdf.
See the ScreenshotNeo API documentation for all options.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
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)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Use the returned screenshot as a visual artifact, then write and review its alt text using the purpose-based rules above. ScreenshotNeo includes full-page capture with lazy images loaded, CSS-selector element capture, dark mode, device presets, custom viewport and retina scale, custom CSS and JavaScript, click and wait actions, request blocking, headers, cookies, user agent, authorization, timezone, geolocation, transparent backgrounds, resizing, caching with a chosen TTL, signed links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, a usage API and an OpenAPI specification.
Free accounts include 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account.
13. FAQ
How long should alt text be?
As short as possible while preserving the image’s page-relevant meaning or function. Complex visuals need their detail elsewhere.
Should I describe colors?
Only when color is necessary to the user’s task, such as identifying a color-coded status that is also explained accessibly.
Can a caption replace alt text?
No. A caption is visible context; alt text is the equivalent needed when the image cannot be seen. They may overlap when that is the clearest result.
What if an image is both decorative and inside a link?
Describe the link’s action or destination. If visible text already labels the link, the image can use alt="".
Should AI write alt text automatically?
Automated suggestions can help at scale, but a person must check context, accuracy, sensitive assumptions and whether the image is informative, decorative or functional.
Do SVGs need alt text?
If an SVG is exposed as an image, give its accessible name through the surrounding HTML or an appropriate alternative. Decorative SVGs should be hidden from assistive technology and have no redundant label.
