How to Write Alt Text, with Examples for Every Kind of Image
Alt text is what a screen reader says in place of an image, and what a browser shows when the image fails to load. Good alt text is not a description of pixels. It says what the image is doing on that page, in as few words as that takes. This guide gives you a decision process for every kind of image, worked examples of good and bad alt text, the markup, and how to add alt text on social media.
Reviewed by Khushwant Parihar, CPACC
Updated W3C Images Tutorial
Free tool: Alt Text Checker
Enter a page address and every image a visitor can see is checked for missing alt, image links with no name, file names, placeholders and alt that repeats the caption. An optional AI review looks at up to eight images in context and suggests better text.
What Alt Text Is For
The alt attribute gives an image a text alternative. Screen readers speak it, braille displays show it, and browsers display it when the image does not load because of a slow connection, a blocked request or a broken link. Search engines read it too: Google's image SEO guidance says it combines alt text with computer vision and the page's content to work out what an image shows.
The requirement comes from WCAG 1.1.1 Non-text Content: every image that conveys something needs a text alternative that serves the equivalent purpose, and every image that is pure decoration must be marked so assistive technology can ignore it. Purpose is the word that matters. The alt does the image's job, which is not always the same as describing what the image looks like.
| Criterion | Level | What it means for images |
|---|---|---|
| 1.1.1 Non-text Content | A | Informative images get a text alternative with the same purpose; decorative images get alt="" so they are skipped. |
| 2.4.4 Link Purpose (In Context) | A | When an image is the only content of a link, its alt is the link text, so it must say where the link goes. |
| 4.1.2 Name, Role, Value | A | Image buttons and icon-only controls need an accessible name that says what they do. |
| 1.4.5 Images of Text | AA | Use real text instead of text baked into images, except for logos and where a particular look is essential. |
So does every image need alt text? Every img needs an alt attribute. Whether that attribute holds words or is left empty depends on what the image is for, which is the next decision.
Decide What the Image Is For First
The same photo can need a full sentence on one page and nothing at all on another. A picture of a red bicycle on a product page is the product, so it needs a description. The same picture inside a link that already says “Shop bikes” adds nothing, so it gets alt="". Before you write a word, work through these questions in order. They follow the logic of the W3C alt decision tree, in our own words.
- Does the image contain text?If the same words appear as real text next to it, or the lettering is only there for visual effect, use alt="". If the text has a function, as on an icon, say what the function is. Otherwise put the words from the image in the alt, and consider replacing the image with real text (1.4.5).
- Is it in a link or a button?If the control's purpose would be unclear without it, the alt says where the link goes or what the button does, not what the picture shows.
- Does it add meaning to the page?If it is a simple photo or illustration, write a short alt that carries that meaning. If it is a chart, diagram or map, write a short alt and give the full information in text elsewhere on the page. If it only repeats nearby text, use alt="".
- Is it decoration, or not meant to be seen? Borders, flourishes, mood photos, spacers and tracking pixels get alt="".
- Still unsure? The full W3C Images Tutorial covers the edge cases, including image maps.
What to write for each kind of image
| Purpose | What the alt should do | Example |
|---|---|---|
| Informative | Give the information or impression the image adds, in a phrase or a sentence. | Volunteers planting trees along the canal towpath |
| Functional (links and buttons) | Say where the link goes or what the button does. | Acme home; Search; Print this page |
| Decorative | Nothing. Use alt="" so screen readers skip it. | A wave divider; a mood photo; an icon next to text that says the same |
| Image of text | Repeat the words in the image, unless they are already real text nearby. | Summer sale: 30% off all lamps |
| Complex (charts, diagrams, maps) | Name it and give the main point; put the full detail in text on the page. | Bar chart: sales doubled between 2023 and 2025. Data in the table below. |
| Group of images | Let one image carry the alt for the whole group; give the rest alt="". | Five star icons: first gets "Rated 4 out of 5", the others alt="" |
Informative or decorative is a decision the author makes, based on why the image is on the page. Nobody else can make it for you, which is why automated tools can find missing alt but cannot tell you whether the alt you wrote is right.
Alt Text Examples: Good and Bad
Eleven common images, each with the context that decides its alt text, a good version, versions to avoid, and the reasoning. Change the context and the right answer changes with it.
Product photo
The main image on a product page for a coat. The product name and price are in the text beside it.
- Good
alt="Navy wool overcoat, knee length, with notch lapels and two flap pockets"- Avoid
alt="coat"alt="mens-coat-navy-01.jpg"alt="best wool coat mens winter coat navy coat sale"- Why
- Describe what a shopper would look at: colour, cut, material, details. The name is already on the page, so spend the words on what the photo adds. In a product grid where the image and the product name sit inside one link, use alt="" so the name is not read twice.
Logo on its own
A partner's logo in a row of client logos. It is not a link.
- Good
alt="Northwind Bank"- Avoid
alt="logo"alt="northwind_logo_rgb.png"- Why
- A logo is an image of text, so the alt is the words in it. Add "logo" only when the fact that it is a logo matters, for example on a brand guidelines page.
Logo as a home link
The site logo in the header, linking to the home page, with no other text in the link.
- Good
alt="Acme home"- Avoid
alt=""alt="Acme logo, click here to go to the home page"- Why
- The alt becomes the link's name, so it should say where the link goes. An empty alt leaves the link with no name at all. If the link also contains the visible word "Acme", give the image alt="" instead.
Icon button
A magnifying glass button that opens site search. There is no visible text.
- Good
aria-label="Search" on the button, with the SVG inside it hiddenalt="Search" on an image button- Avoid
alt="magnifying glass"alt="icon"alt="search-icon.svg"- Why
- For controls, describe the action, not the picture. A printer icon is "Print this page", a cross is "Close", an arrow in a carousel is "Next slide". A visible text label is better still.
Chart or graph
A line chart in a quarterly report. The figures are in a table under the chart.
- Good
alt="Line chart: website visits grew every quarter in 2025, from 40,000 to 95,000. Full figures in the table below."- Avoid
alt="chart"alt="graph showing data"a 300-word alt that reads out every data point- Why
- The alt gives the point the chart makes and says where the detail is. The table gives the data in a form people can navigate. Without the table, the chart fails anyone who cannot see it.
Image of a data table
A screenshot of a delivery price table pasted into a blog post.
- Good
A real HTML table instead of the imageIf the image must stay: alt="Delivery prices by zone, also listed in the table below"- Avoid
alt="table"every cell of the table typed into the alt- Why
- An image of a table cannot be navigated cell by cell, resized, searched or translated. Screen reader users move through real tables with the row and column headers announced, which no alt text can match.
Photo of a person in a news story
A news photo with the caption: Council leader Maria Lopez after Tuesday's budget vote.
- Good
alt="Lopez at the podium, holding up a copy of the flood defence plan"- Avoid
alt="Woman smiling"alt that repeats the caption word for word- Why
- The caption already names her, so the alt says what the photo shows that matters to the story. Mention appearance, such as age or ethnicity, only when it is relevant and you know it to be true.
Artwork
A painting on an art history page about the painter.
- Good
alt="The Starry Night by Vincent van Gogh, 1889: swirling blue sky with glowing stars and a crescent moon over a sleeping village, a dark cypress in the foreground"- Avoid
alt="painting"alt="A beautiful masterpiece"- Why
- Art is a sensory experience, so WCAG only asks you to identify it at minimum. On a page that is about the art, describe the subject, composition, colour and style. Put longer interpretation in visible text where everyone can read it.
Screenshot
A step in a help article showing where a setting lives.
- Good
alt="Settings page with the Accessibility tab open and the Reduce motion switch turned on"- Avoid
alt="Screenshot"alt="Screen Shot 2026-03-14 at 10.42.17.png"- Why
- Say what the reader should see to confirm the step, not everything on the screen. The written steps should still work without the picture.
CAPTCHA
An image CAPTCHA on a sign-up form.
- Good
alt="CAPTCHA: type the letters shown in this image. An audio version is available below."- Avoid
alt that contains the answeralt="captcha"- Why
- WCAG 1.1.1 asks the alt to say what the CAPTCHA is and what it is for, and requires another version in a different sense, such as audio. Better still, avoid image CAPTCHAs: at login, 3.3.8 Accessible Authentication rules out a transcription test as the only way in.
Decorative flourish
A swirl divider between two sections of an article.
- Good
alt=""or a CSS background image- Avoid
alt="decorative swirl"alt="divider"no alt attribute at all- Why
- An empty alt tells screen readers to skip the image. Describing it only adds noise, and leaving the attribute out can get the file name read aloud.
For charts, the accessible charts guide covers the data table and description patterns in depth, and the accessible data tables guide shows how to build the table that replaces an image of one. Maps have their own accessible maps guide.
How Long Should Alt Text Be?
You will see “keep alt text under 125 characters” repeated as a rule. It is not one. WCAG sets no limit, and neither does the W3C Images Tutorial.
Where the 125-character figure comes from
The number traces back to an old test in which JAWS 6, a screen reader release from around twenty years ago, read long alt text in chunks of roughly 125 characters. People who saw the break took it for a cut-off, and the figure spread from there, but the same testing found no screen reader that cut long alt text off. The history is laid out in a W3C WCAG discussion on alt text length and in accessibility consultant Eric Eggert's 2022 post There is no character limit for alt text.
What actually matters
- Purpose sets the length. A home link needs two words. A product photo needs a sentence. A painting on a page about the painting may need two.
- Lead with what matters. Screen reader users hear alt text read straight through and cannot skim it the way they skim a page, so put the key information first.
- Say it once.No “image of”, no repeating the caption or the heading above, no list of keywords.
- Long means move it. Alt text is invisible to sighted users. If a description needs more than a couple of sentences, the detail probably helps everyone, so put it in visible text: a caption, the body copy, or a long description linked to the image. Keep the alt short and say where the detail is.
As a working signal, our Alt Text Checker flags alt over 150 characters for a person to review rather than failing it. Some platforms set their own caps: X allows up to 1,000 characters per image description.
Common Alt Text Mistakes and How to Fix Them
| Mistake | Why it fails | The fix |
|---|---|---|
| Starting with "image of" or "picture of" | Screen readers already announce that it is an image, so the user hears it twice. | Start with the content. Name the medium only when it matters: "Oil painting of", "Screenshot of", "Pencil sketch of". |
| File names as alt (IMG_2041.jpg, hero-final-v3.png) | They say nothing about the image, and they tend to appear when alt is filled in automatically rather than written. | Write the alt by hand, and check whether your CMS, theme or upload tool fills it in for you. |
| Keyword stuffing | A list of keywords is useless to someone listening. Google's image guidance warns that it is a poor experience and can look like spam. | Describe the image. If it is relevant to the page, the right words appear naturally. |
| Repeating the caption | A screen reader reads both, so the user hears the same sentence twice. | Let the alt say what the picture shows and the caption give context, credit or date. If nearby text already describes the picture fully, alt="" is fine. |
| Empty alt on a linked image | When the image is the only content of a link, the link has no name. Screen readers fall back to the URL or file name. W3C lists this as failure F89 of 2.4.4 and 4.1.2. | Give the image alt text that says where the link goes. |
| A title attribute instead of alt | The title is only a fallback for the accessible name and only appears as a mouse tooltip, so keyboard and touch users never see it. | Put the text in alt. Drop the title, or keep it only if it adds something the alt does not. |
| CMS placeholders ("image", "photo", "untitled", "alt text here") | Placeholder words pass a check for an alt attribute while telling the user nothing. | Ask for alt on every upload, with an explicit "decorative" option and help text that explains the decision process above. |
| No alt attribute at all | Assistive technology cannot tell whether the image matters. Some screen readers read out the file name. | Every img gets an alt attribute: descriptive text, or empty for decoration. |
Auto-generated alt text deserves the same scepticism. Facebook, Instagram and LinkedIn can add descriptions from object recognition, and AI tools write fluent drafts, but neither knows why the image is on your page. Treat them as a first draft to correct, never as the finished text.
The Markup: alt, Empty alt, SVG, Figures and Long Descriptions
The alt attribute and alt=""
An empty alt is a deliberate signal that says “skip this”. A missing alt is an unanswered question, and some screen readers answer it by reading the file name.
<!-- Informative: the alt carries the meaning -->
<img src="towpath.jpg"
alt="Volunteers planting trees along the canal towpath">
<!-- Decorative: empty alt, never a missing alt -->
<img src="wave-divider.svg" alt="">
<!-- Linked logo with no other text: say where it goes -->
<a href="/">
<img src="acme.svg" alt="Acme home">
</a>
<!-- Logo beside the visible name in the same link: empty alt -->
<a href="/">
<img src="acme-mark.svg" alt=""> Acme
</a>SVG icons and images
Inline SVG has no alt attribute. Give an informative SVG role="img" and a name, either with aria-label or with a title element referenced by aria-labelledby. Hide decorative SVGs, and SVG icons inside a button that already has a name, with aria-hidden="true". An SVG used through an img element takes a normal alt.
<!-- Informative inline SVG -->
<svg role="img" aria-label="Warning" viewBox="0 0 24 24">...</svg>
<!-- Or name it with a title element -->
<svg role="img" aria-labelledby="growth-title" viewBox="0 0 400 200">
<title id="growth-title">Visits doubled between 2024 and 2025</title>
...
</svg>
<!-- Icon button: name the button, hide the icon -->
<button type="button" aria-label="Search">
<svg aria-hidden="true" viewBox="0 0 24 24">...</svg>
</button>
<!-- Better still: a visible label -->
<button type="button">
<svg aria-hidden="true" viewBox="0 0 24 24">...</svg>
Search
</button>The guide to using ARIA explains how aria-label, aria-labelledby and aria-hidden combine into the accessible name.
figure and figcaption
A figcaptionis visible to everyone and labels the figure, but it does not replace the image's alt. Let the two divide the work: the alt says what the picture shows, the caption adds the context, credit or date.
<figure>
<img src="lopez-budget-vote.jpg"
alt="Lopez at the podium, holding up the flood defence plan">
<figcaption>
Council leader Maria Lopez after Tuesday's budget vote.
Photo: City Press.
</figcaption>
</figure>Long descriptions for complex images
For a chart or diagram, keep the alt short and put the full description in the page. The most robust pattern is a figure that contains the image, a caption and the data table. For a description that is plain text with no headings or tables, aria-describedby links it to the image; screen readers read the referenced text as one continuous paragraph, so keep it simple.
<!-- Preferred: the detail is visible to everyone -->
<figure>
<img src="visits-2025.png"
alt="Line chart of 2025 visits. Figures in the table below.">
<figcaption>Website visits by quarter, 2025</figcaption>
<table>
<tr><th scope="col">Quarter</th><th scope="col">Visits</th></tr>
<tr><th scope="row">Q1</th><td>40,000</td></tr>
...
</table>
</figure>
<!-- Text-only description linked with aria-describedby -->
<img src="process.png" alt="Diagram of the returns process"
aria-describedby="process-desc">
<p id="process-desc">Customers request a label, post the item,
and get a refund within five working days of it arriving.</p>Groups of images and CSS backgrounds
When several images form one piece of information, such as a star rating, give one image the alt for the whole group and the rest alt="". Images set with CSS background-image have no alt at all, so use them only for decoration; anything informative belongs in an img element.
<span class="rating">
<img src="star-full.svg" alt="Rated 4 out of 5">
<img src="star-full.svg" alt="">
<img src="star-full.svg" alt="">
<img src="star-full.svg" alt="">
<img src="star-empty.svg" alt="">
</span>How to Add Alt Text on Instagram, X, LinkedIn and Facebook
The same rules apply on social media: say what the image adds to the post, and if it contains text, such as a quote card or an event flyer, include the words. Menu names change often; these steps match each platform's help pages as of October 2026.
- New post in the app: after editing the photo, tap Next, then More options, then Write alt text. Type it and tap Done.
- Existing post in the app: open it, tap the Options menu, tap Edit, then Edit alt text in the bottom right.
- On a computer: choose Accessibility while editing the post, or for a shared post, Options, Edit, then Accessibility.
Instagram fills in automatic alt text if you write none. Replace it. Instagram help: edit alt text
X
- In the apps: after adding the image to a post, tap +ALT on the image, type the description and tap Done.
- On the web: select Add description under the image, type it and select Save.
- An ALT badge then shows on the image. Each description can be up to 1,000 characters.
X's help covers adding it while you write the post, so do it before posting. X help: add image descriptions
- On desktop: after uploading the image, click the Alt text option below it, write the description and click Save.
- On mobile: tap ALT below the image, write the description and tap Done.
LinkedIn may add alt text automatically to images that have none, and on mobile it does not tell you, so check before posting. LinkedIn help: alternative text
- Before posting, on a computer: hover over the photo, click Edit, choose Alternative text, then Custom alt text. Write it and click Save.
- After posting: open the photo, choose Options, then Change alt text on a computer or Edit alt text in the iPhone and Android apps.
The apps only let you change alt text after posting; the automatic text starts with “Image may contain”. Facebook help: alternative text
How to Test Your Alt Text
Testing alt text has two halves. A tool can find alt that is missing or malformed on every image in seconds. Only a person can judge whether the alt that is there is right, so finish with a short screen reader pass.
Step 1: run the Alt Text Checker
Check one page of each template: home, article, product, listing. Fix the Failures first (missing alt, image links and buttons with no name, file names, placeholders), then work through Needs review. The optional AI review suggests alt for up to eight images; treat its suggestions as drafts.
- Draft what is missing. For a single image, the AI Alt Text Generator writes a first draft from an upload or an image address, with optional context about where the image is used. Edit it with the page in front of you.
- Jump through the images with a screen reader. In NVDA (browse mode) and JAWS (virtual cursor), press G to move from graphic to graphic. In VoiceOver on a Mac, press VO+Command+G. Then read the page from the top, because alt only makes sense in context.
- Ask four questions of each image. Would I understand this part of the page without seeing it? Does each linked image say where it goes? Are decorative images silent? Do I hear anything twice?
- Check controls and the reading order. The screen reader simulator lists every image and control a screen reader meets on a page, and the accessible name previewer shows the name each button and link exposes.
New to screen readers? Start with the screen reader testing guide, then the NVDA or VoiceOver walkthrough.
Alt Text Checklist
- Every img has an alt attribute. Words for images that convey something, empty for decoration, never missing.
- Purpose decided first. Informative, functional, decorative, text, complex or group, before any words are written.
- Links and buttons say what they do. No image-only link or button is left without a name (2.4.4, 4.1.2).
- Text in images is repeated. And replaced with real text wherever possible, logos excepted (1.4.5).
- Complex images have a long description. A short alt plus the full information in visible text or a table.
- Key information first.Concise, no “image of”, no file names, no keyword lists.
- No duplication. Alt does not repeat the caption, the link text or the heading beside it.
- SVGs are named or hidden. role="img" with a name for informative SVGs, aria-hidden for decorative ones.
- No placeholders shipped. CMS defaults, automatic captions and AI drafts reviewed by a person.
- Tested. The Alt Text Checker is clean and a screen reader pass makes sense in context.
Then verify the rest of the page against the WCAG 2.2 checklist.
Find Every Image That Needs Better Alt Text
Audit a whole page in one pass, then draft the alt text that is missing and review it in context.
Frequently Asked Questions
How do you write good alt text?
Start with what the image is doing on that page, not what it looks like. If it is a link or a button, say where it goes or what it does. If it shows information, write the information in a short phrase or sentence, leading with what matters most. If it repeats nearby text or is only decoration, use an empty alt attribute (alt="") so screen readers skip it. If it is a chart, diagram or map, write a short alt that gives the main point and put the full detail in text on the page. Leave out "image of", file names and keywords, and read it back in context to check it makes sense without the picture.
What is an example of good alt text?
For a product photo of a coat, "Navy wool overcoat, knee length, with notch lapels and two flap pockets" is good, while "coat" is too vague and "best mens wool coat winter sale" is keyword stuffing. For a logo that links to the home page, "Acme home" is good because it names the destination. For a magnifying glass search button, "Search" is good and "magnifying glass icon" is not. For a chart, "Line chart: visits grew every quarter in 2025, from 40,000 to 95,000. Full figures in the table below" gives the point and says where the data is.
How long should alt text be?
As long as it needs to be to do the image's job, and no longer. WCAG sets no character limit. The often repeated 125-character rule traces back to an old version of the JAWS screen reader that read long alt text in pieces of about 125 characters, which some people mistook for a cut-off. Most informative images need a phrase or one or two sentences. Screen reader users hear alt text in one go and cannot skim it, so lead with what matters. If you need more than a couple of sentences, the image is probably complex: keep the alt short and put the full description in visible text.
When should alt text be empty?
Use an empty alt attribute (alt="") when the image adds nothing a screen reader user needs: decorative flourishes, dividers, background-style photos, and images whose meaning is already in the text right next to them, such as an icon beside a link that already says the same thing. Keep the attribute and leave the value empty. Never leave the attribute out, because some screen readers then read the file name. And never use an empty alt on an image that is the only content of a link or button, because the control is then left with no name.
What alt text should a logo have?
A logo is an image of text, so its alt text is usually the words in the logo: the organisation's name, such as "Acme". When the logo is a link to the home page, the alt becomes the link's name, so say where it goes, such as "Acme home". If the link also contains the visible name as text, give the logo alt="" so the name is not read twice. Add the word "logo" only when the fact that it is a logo matters, for example on a page about brand guidelines.
How do you write alt text for a chart or graph?
Give the chart a short alt that names the type of chart and states its main point, for example "Bar chart: sales doubled between 2023 and 2025", and say where the detail is. Then put the full data on the page as text, ideally as a real HTML table next to the chart or in a figure with a caption. Do not cram every data point into the alt attribute: screen reader users cannot navigate it the way they can navigate a table, and sighted users who would benefit from the numbers never see it.
How do I add alt text on Instagram?
In the Instagram app, when you create a post, tap Next after editing the photo, tap More options, then Write alt text, type your description and tap Done. To change the alt text of a post you have already shared, open it, tap the Options menu, tap Edit, then Edit alt text in the bottom right. On a computer, choose Accessibility while editing the post and write the alt text there. Instagram adds automatic alt text from object recognition if you write none, and your own description is almost always better.
Essential Accessibility Resources
Comprehensive tools, checklists, and guides to help you create inclusive digital experiences