Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Write alt text for the job an image performs on the page. Describe the meaning an informative image adds, leave a genuinely decorative or redundant image as alt='', and describe the action or destination of a functional image. Keep the essential information concise and put it first. A chart, map, or diagram may need a short summary in alt plus the full data or explanation in nearby, accessible text.
Start with purpose, not appearance
Before writing, ask: What would a reader lose if this image disappeared? The answer determines the alternative. The W3C Web Accessibility Initiative groups images into three practical categories:
| Image role | What the alternative should do | Typical HTML |
|---|---|---|
| Informative | Convey the page-relevant meaning or information. | <img src='route.jpg' alt='Two cyclists reviewing a route map'> |
| Decorative or redundant | Let assistive technology skip it when it adds no information beyond nearby text. | <img src='crocus-border.png' alt=''> |
| Functional | State the action, destination, or control purpose. | <button><img src='print.svg' alt='Print this page'></button> |
This classification is contextual. The same photograph can require different wording on a news story, a product page, and a staff directory because its role changes with the surrounding content.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsInformative image alt text examples
An informative image contributes facts, mood, or evidence that the surrounding copy does not already provide. Write the shortest phrase that preserves that contribution; do not inventory every color, object, or camera angle.
#1 Best Overall
Use the subject and its relevance
- Route-planning article:
alt='Two cyclists reviewing a route map' - Contact section:
alt='Telephone'before a phone number, when the icon identifies the number’s type - Product tutorial:
alt='Settings panel with two-factor authentication enabled' - Wildlife report:
alt='Red fox carrying a vole across a snowy field'if the behavior matters to the report
W3C guidance describes the text alternative as conveying the visual meaning, not a literal description. “A photo of a person standing in a room” is rarely useful if the page is about the person’s role, the object they are demonstrating, or the event taking place.
Front-load the important words
Screen-reader users often navigate quickly, so put the key subject or outcome first: alt='Solar eclipse viewed from the beach' is more useful than alt='A beach scene showing, in the distance, a solar eclipse'. Remove adjectives that do not change understanding. Do not add “image of” or “picture of” by default; the assistive technology already identifies the graphic role.
Decorative and redundant images need a real empty value
Use an empty alternative, alt='', for borders, flourishes, spacers, background-like illustrations, and images that repeat text immediately beside them. The attribute must be present. Omitting alt is not equivalent: some screen readers may announce the file name or URL, creating noise such as “hero-final-2.png.”
Recommended Free Tools
Examples
- A flower illustration next to the heading “Crocus bulbs”:
<img src='crocus.png' alt=''> - A decorative divider between sections:
<img src='divider.svg' alt=''> - A thumbnail inside a link that already says “Crocus bulbs”: keep the thumbnail’s
altempty so the link is not announced twice.
Do not use an empty value for an image that adds a fact, identifies a person, or contains a notice. If removing it would remove meaning, it is not decorative.
Functional images: describe the action or destination
When an image is a link, button, or control, users need to know what activating it will do. Describe the purpose, not the shape of the icon.
| Control | Useful alternative | Weak alternative |
|---|---|---|
| Search button | alt='Search' |
alt='Magnifying glass' |
| Print control | alt='Print this page' |
alt='Printer' |
| Brand link to the home page | alt='Example.com homepage' |
alt='Logo' |
| Download link | alt='Download the 2026 price list (PDF)' |
alt='Arrow pointing down' |
If visible link text already states the destination, make a linked image decorative or combine the image and text into one link to avoid duplicate announcements. If an icon has no visible text, its alternative must supply the missing label.
Images that contain words
Include words embedded in an image when those words are important to understanding or acting on the page. A campaign graphic that reads “Library closed Monday” should use alt='Library closed Monday', not alt='Banner'. Preserve capitalization only when it affects meaning; do not transcribe decorative lettering that communicates nothing.
Whenever possible, put important notices in real HTML text as well. HTML text is searchable, resizable, translatable, and easier to update. The image alternative remains necessary when the graphic itself carries the message or when the text cannot be provided elsewhere.
Charts, diagrams, maps, and other complex visuals
A short alt cannot carry every value in a dense visual. Give the takeaway first, then provide the detail in an adjacent table, paragraph, or a dedicated long-description mechanism.
Short summary plus detailed source
For example:
<img src='traffic.png' alt='Bar chart showing mobile traffic increased from 42% to 58% between 2024 and 2025; data table follows.'>The numbers above are illustrative wording. In a real chart, verify every value against the accompanying table. The nearby representation should expose labels, units, time periods, relationships, and any conclusion a sighted reader is expected to draw.
- Chart: state the trend or comparison, then list the values in a table.
- Diagram: summarize the system or process, then explain each relationship in text.
- Map: identify the location or route that matters, then provide directions, landmarks, or a text list.
- Scientific image: state the finding or feature relevant to the article, then describe measurements or annotations nearby.
Do not paste an entire essay into alt. A concise alternative keeps navigation efficient while the longer equivalent remains available to everyone.
Let the surrounding page set the wording
Alt text is not a standalone caption. Read the heading, caption, adjacent paragraph, and link label before deciding what to include.
When nearby text already says it
If a caption says “The 2025 team at the Berlin office” and the photo adds no other information, use alt='' or a brief role-specific alternative rather than repeating the caption. If the photo identifies which person is the new director while the caption names only the event, include that distinction.
When the image supplies unique information
Add what the prose does not: a damaged component in a repair guide, the warning color that determines a safety action, or the destination of an unlabeled logo link. The goal is equivalent access to the page’s task, not a word-for-word description of pixels.
A practical writing workflow
- Identify the user task. Is the reader learning a fact, activating a control, finding a destination, or skipping decoration?
- Check the context. Read the heading, caption, link text, and nearby paragraphs.
- Classify the image. Choose informative, decorative/redundant, or functional.
- Draft the shortest complete alternative. Put the subject, action, destination, or result first.
- Check embedded text and data. Include essential words; move dense values to nearby accessible content.
- Remove visual trivia. Delete camera angle, color, background, and “image of” unless they affect the task.
- Test the experience. Inspect the rendered page with images disabled, tab through controls, and listen with a screen reader or have another person review the spoken sequence.
Common mistakes and fixes
Missing alt attribute
Symptom: a screen reader announces a filename or a long URL. Fix: add an appropriate value, including the empty value alt='' for decoration.
Literal inventory instead of meaning
Symptom: “Three people, blue wall, table, window” gives no reason the image is present. Fix: identify the relevant action or information, such as “Engineers reviewing the incident dashboard.”
Rank #4
Icon name instead of control purpose
Symptom: “Magnifying glass” leaves users unsure what will happen. Fix: use “Search,” “Open filters,” or the actual destination.
Repeating visible text
Symptom: a link is announced twice. Fix: make the redundant image decorative or merge the image and label into one link.
Putting a complex explanation in one attribute
Symptom: a long, hard-to-navigate sentence contains chart values. Fix: provide a short summary in alt and a structured table or text explanation beside it.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallForgetting words inside graphics
Symptom: a sale deadline or closure notice is invisible to nonvisual readers. Fix: include the essential wording in the alternative and, preferably, duplicate it as live HTML text.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you are preparing screenshots to review page structure, image labels, or responsive layouts, ScreenshotNeo can return a rendered image or PDF through one request. It is a capture service, not an alt-text validator: you still need to write and test the alternatives themselves. Before capture, it accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and whether the request was billed. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
See the ScreenshotNeo API documentation for all options, including full-page and selector captures, lazy-image loading, device presets, dark mode, custom CSS or JavaScript, hidden selectors, waits, request blocking, cookies and headers, geolocation, PDFs, caching, signed links, webhooks, bulk capture, and usage data.
Best Value
cURL
curl -G 'https://api.screenshotneo.com/v1/shot' -d access_key=YOUR_API_KEY --data-urlencode url=https://freedom251.com -o shot.webpPython
import requests
r = requests.get('https://api.screenshotneo.com/v1/shot', params={'access_key': 'YOUR_API_KEY', 'url': 'https://freedom251.com'}, timeout=90)
open('shot.webp', 'wb').write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://freedom251.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The free plan includes 1,000 screenshots each month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan, and yearly billing gives two months free. Create a free ScreenshotNeo account to try it without a card.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Final review checklist
- Every
<img>has analtattribute. - Informative alternatives express page-relevant meaning, not a pixel inventory.
- Decorative or duplicate images use exactly
alt=''. - Controls state their action or destination.
- Important words in graphics are available in the alternative or live text.
- Complex visuals have a concise summary and a complete nearby equivalent.
- The wording makes sense with this page’s heading, caption, and links.
- Essential information appears early, without “image of” or unnecessary detail.
Frequently Asked Questions
Should I repeat an image’s caption in alt text?
Only when the image contributes information the caption does not. If the caption already provides the complete equivalent, use an empty alternative for a redundant image.
Can the HTML title attribute replace alt text?
No. A title tooltip is not a reliable text alternative and is not a substitute for the required alt attribute.
How should alt text be translated?
Translate the meaning and action for the page’s audience, including names and essential words in the target language; do not mechanically translate visual trivia.
Who should approve alt text for a specialized image?
Have a subject-matter expert confirm terminology and a disabled user or accessibility specialist check whether the wording supports the actual task.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
