Alt text is a short written replacement for an image, stored in the alt attribute of the HTML image tag, that screen readers speak aloud, browsers show when the picture fails to load and search engines read to understand the picture. Good alt text gives someone who cannot see the image the same information or function the image gives everyone else.
The idea is simple, but choosing the right words depends on why the image is there. A product photo, a logo that links home, a chart and a decorative swirl each need a different answer, and sometimes the right answer is an empty alt. This hub covers the basics and points you to a detailed guide for each task.
Quick facts
Full form
Alternative text (thealtattribute)Where it lives
<img src="..." alt="...">in the page codeWho uses it
Screen reader users, people on slow or broken connections, search enginesWCAG rule
1.1.1 Non-text Content, Level ADecorative images
Empty alt:alt="", with no spaceTypical length
One or two short sentences; about 125 characters is a common soft target
Alt text meaning in plain words
"Alt" is short for alternative, so the full form of alt text is alternative text. It is the text that stands in for an image when the image cannot be seen. People also call it an image description, alt tag (strictly it is an attribute, not a tag) or alt attribute.
Think of reading a web page to a friend over the phone. When you reach a picture, you would not say "image dot jpeg". You would say what matters: "a red running shoe, side view". That spoken replacement is exactly what good alt text is.
Alt text is different from a caption. A caption is visible to everyone and usually adds context. Alt text is mostly hidden and replaces the image for people who cannot see it. An image can have both, and they should not simply repeat each other.
What alt text looks like in HTML
In a web page, alt text is an attribute inside the img element:
<img src="red-runner.jpg" alt="Red running shoe with a white sole, side view">A purely decorative image gets an empty value. The attribute is still there; it just has nothing between the quotes:
<img src="divider-swirl.svg" alt="">Other kinds of images use their own method. An image button (<input type="image">) and image map areas (<area>) also take an alt attribute. An inline SVG usually gets role="img" and a <title> or aria-label. CSS background images cannot carry alt text, so never use one for an image that carries meaning.
Leaving out the attribute is not the same as an empty one. Drop the attribute and assistive software may announce the image's file name instead, and a string like DSC 0093 tells the listener nothing.
Who reads image alt text and when
| Reader | What happens |
|---|---|
| Blind and low vision people who use screen readers | The software announces "image" or "graphic", then speaks the alt text. Braille displays show it as braille. |
| Anyone whose image fails to load | The browser prints the description where the picture should be, for example on a slow mobile connection or when a file is missing. |
| People who turn images off | Some users switch images off to save data or reduce distraction, and read the alt text instead. |
| Voice control users | For linked images and image buttons, the alt text becomes the name they say to activate it. |
| Search engines | Crawlers read alt text with the page text to understand what an image shows. See alt text for SEO. |
If you have never heard a page read aloud, read what a screen reader is. Listening to your own images once teaches more than any rule list.
Why alt text is important for accessibility
Images carry meaning: a product's color, a chart's trend, the button that searches the site. Without a text alternative, that meaning is simply missing for anyone who cannot see it.
WCAG, the international standard for web accessibility, makes this its very first success criterion. Criterion 1.1.1, about non-text content, is Level A and asks for a text alternative for every image that is not purely decorative. Because laws and contracts in the US, EU, UK and India point to WCAG AA, which includes every A rule, missing alt text is one of the most common findings in audits and complaints. The W3C images tutorial is the reference most auditors use.
There is a plain business case too: alt text keeps product details readable on poor connections and helps images appear in search results.
Informative, functional and decorative images
Every image falls into one of a few roles. The role decides the alt text, not the picture itself.
| Role | Example | What the alt says |
|---|---|---|
| Informative | Photo of a dish on a restaurant menu page | The key details: "Paneer tikka on a skewer with mint chutney" |
| Functional (link or button) | Magnifying glass icon that submits a search | The action: "Search" |
| Image of text | A banner reading "Sale ends Sunday" | The same words as the image |
| Complex | Bar chart of monthly sales | A short summary, with the full data in a table or text nearby |
| Decorative | Background swirl, spacer, stock photo that adds nothing | Nothing: alt="" |
The same photo can change role. A team photo on an "About us" page is informative; the same photo used as faint background texture is decorative.
A quick decision guide
Run through these questions in order and stop at the first yes:
- Is the image inside a link or a button? Write the destination or action ("Home page", "Download the brochure").
- Does it contain text that matters? Use the same words.
- Is it a chart, map or diagram? Write a short summary and put the details in nearby text or a table.
- Does it add information the surrounding text does not already give? Describe that information briefly.
- Otherwise it is decorative. Use
alt="".
The W3C publishes a fuller alt decision tree if you want a printable version.
Descriptive alt text without the clutter
Descriptive alt text is specific about what matters and silent about what does not. A few habits make most of the difference:
- Skip "image of" or "picture of". Screen readers already announce that it is an image.
- Keep it short. There is no hard length limit in HTML, but long alt text cannot be paused or reread easily, so aim for one or two sentences.
- Write for this page. A photo of a laptop on a review page needs the model and color; on a blog post about remote work, "Person working on a laptop at a kitchen table" may be enough.
- Do not repeat the caption or the sentence right next to the image.
The full method, including punctuation and how to handle people and text, is in how to write alt text. To see dozens of before and after pairs, open the alt text examples.
Adding, editing and checking alt text
Where you type alt text depends on the tool. Most content management systems show an "Alternative text" field when you select an image. Word processors and slide apps have an alt text panel in the picture's right click menu. Photo sharing apps hide it in advanced settings: on Instagram it sits under Advanced settings when you post, and you can edit alt text later from the post menu. Our step by step guide to adding alt text covers the common platforms, and Instagram alt text has its own page.
To audit an existing page, copy its HTML and drop it into the alt text checker on this site. Browser extensions that show alt text over each image are also handy for a quick visual scan.
Every alt text guide on this site
| Task | Page | What you will find |
|---|---|---|
| Writing | How to write alt text | Rules on length, context, punctuation and what to leave out |
| Writing | Alt text examples | Weak and better versions for photos, logos, icons, charts and more |
| Writing | Alt text generator | A guided tool that drafts alt text and the HTML from your answers |
| Adding | How to add alt text | Where the alt field is in common site builders, documents and slides |
| Adding | Instagram alt text | Adding and editing descriptions on posts |
| Adding | PDF alt text errors | Fixing "figures alternate text" and similar checker failures |
| Checking | Alt text checker | Paste a page's HTML and list missing, empty and suspicious alt values |
| Search | Alt text and SEO | How search engines use alt text and how to avoid keyword stuffing |
Questions people ask
What does alt text mean?
Alt text means alternative text: a short description attached to an image so that people who cannot see it still get its information. Screen readers speak it, and browsers display it if the image fails to load.
Alt text kya hota hai, and what is the alt text meaning in Hindi?
In Hindi, alt text can be called वैकल्पिक पाठ (vaikalpik paath), which simply means alternative text. It is a short written description of a picture that a screen reader speaks aloud and that the browser shows when the picture does not load. Pictures that are only decoration get an empty alt.
Is there an alt text length limit?
HTML sets no limit. Many guides suggest staying near 125 characters because long descriptions are tiring to hear and hard to review. If an image needs more, such as a chart, keep the alt short and put the detail in the page text.
Should every image have alt text?
Every img element needs an alt attribute, but not every one needs words in it. Decorative images get an empty alt so screen readers skip them. Leaving the attribute out entirely is a failure.
Is there an alt text extension for Chrome?
Yes, several browser extensions overlay each image's alt text on the page or list images without it. They are useful for quick checks, but you still have to judge whether each description is right. You can also paste a page's source into our alt text checker.
What is the alt text icon on some sites?
Some apps show a small ALT badge on images that have a description, which lets sighted users read it too. It is a display feature of that app, not part of HTML.