Alt text, or alternative text, is the text equivalent of an image supplied in the alt attribute of an HTML img element or through equivalent mechanisms for other graphics. In web accessibility it allows screen reader users to receive the information or function an image conveys, and it is displayed by the browser when the image cannot load.
Alt text is required by WCAG success criterion 1.1.1, Non-text Content, at Level A, the lowest conformance level. Writing it well is less about describing pixels and more about conveying purpose in context: the same photograph may need different alt text on two different pages.
How alt text reaches assistive technology
When a browser builds the accessibility tree, it computes an accessible name for each image. For an img element, that name usually comes from the alt attribute, unless aria-labelledby or aria-label overrides it. Screen readers then announce the image role and its name, for example “graphic, bar chart of quarterly sales”.
An empty alt attribute, written as alt="", has a specific meaning: it marks the image as decorative, and assistive technology skips it. A missing alt attribute is different and harmful, because many screen readers then fall back to announcing the file name, such as “IMG underscore 4021 dot jpg”.
The following table shows how each markup pattern is exposed to users of assistive technology.
| Markup | Accessibility tree result | What a screen reader does |
|---|---|---|
alt="Red delivery van" | Image with that name | Announces the description |
alt="" | Image hidden as presentational | Skips the image silently |
| No alt attribute | Image with no reliable name | Often reads the file name |
| Image inside a link, alt present | Link named by the alt text | Announces the link destination |
role="img" with aria-label | Image named by the label | Announces the label, used for SVG or icon groups |
Types of images and the alt text each needs
The right alt text depends on what the image does on the page. Accessibility practitioners commonly sort images into functional categories, each with a distinct rule.
| Image type | Recommended alt text | Example |
|---|---|---|
| Informative image | A concise statement of the information | “Map showing the office two blocks north of the station” |
| Decorative image | Empty alt so it is ignored | Background flourish, divider ornament |
| Functional image | The action or destination, not the picture | “Search” for a magnifying-glass button |
| Image of text | The same words as shown in the image | A logo reading the company name |
| Complex image | Short summary plus a longer description nearby | Chart summary with a data table below |
| Image group | One alt on the main image, empty alt on the rest | Five star icons rated as “4 of 5 stars” |
Functional images are the most frequently mishandled. A logo that links to the home page should usually say where the link goes, such as the organization name followed by “home”, rather than describing colors and shapes.
Writing effective alt text
Good alt text is accurate, concise and context-driven. There is no hard limit in the HTML specification, but practical guidance favors a sentence or less, often under about 125 characters, because long alternatives are tiring to hear and some tools truncate them. Content that needs more detail belongs in visible text or a linked description.
- Start with the purpose: ask what a sighted reader gains from the image at that point in the content.
- Omit redundant phrases such as “image of” or “picture of”, because the screen reader already announces the role.
- Do not repeat adjacent text: if a caption already says the same thing, a shorter or empty alt avoids duplication.
- Include text visible in the image when that text matters, such as a sign or a button label.
- Use proper punctuation so that the speech output pauses naturally.
Context changes the answer. A photograph of a scientist on a news article about her award might need only her name and the setting, whereas the same image in a laboratory equipment catalog should describe the instrument she is using.
Alt text compared with related techniques
Several attributes and elements look similar to alt text but serve different roles in the accessibility tree. Confusing them is a common source of audit findings.
| Technique | Purpose | Read by screen readers |
|---|---|---|
| alt attribute | Text equivalent of the image | Yes, as the accessible name |
| title attribute | Supplementary tooltip | Inconsistently, not a substitute |
| figcaption | Visible caption for all users | Yes, as part of the content |
| aria-describedby | Points to a longer description | Yes, as the accessible description |
| Text in SVG title element | Name for inline SVG graphics | Yes, when correctly referenced |
Alt text also differs from automatic image descriptions generated by software. Machine descriptions may identify objects, but they cannot know why an author placed the image there, so they do not replace authored alt text; accessibility overlays that claim to fix alt text automatically do not achieve conformance.
Common mistakes and how audits detect them
Automated checkers can find missing alt attributes reliably, but they cannot judge whether existing alt text is meaningful. A complete accessibility audit therefore pairs tools with manual review in context, ideally with a screen reader.
| Mistake | Effect on users | Correction |
|---|---|---|
| File name used as alt | Meaningless announcement | Write a real description or use empty alt |
| Keyword-stuffed alt text | Long, confusing output | Describe the image for people, not for search engines |
| Decorative image with descriptive alt | Noise that slows navigation | Set alt to empty |
| Icon button with no name | Button announced as unlabeled | Add alt or aria-label naming the action |
| Chart with only “chart” as alt | Data is inaccessible | Summarize the trend and provide a data table |
Content management systems add their own risk. A media library field for alt text applies one value everywhere the image appears, yet the correct alternative can change from page to page, so editors should be able to override it in context.
The simple explanation
Alt text is a short written description attached to a picture on a web page. People who cannot see the picture, for example blind users who listen to pages with a screen reader, hear this text instead of seeing the image.
Good alt text tells them what the picture means for the page, not every detail in it. If a picture is only decoration, the best alt text is empty, so it does not interrupt the listener.
How it is used in practice
An online furniture store runs an accessibility audit before a redesign. The review finds that product photos use alt text copied from file names, the cart icon button has no accessible name, and a decorative wood-texture banner is announced with a long description on every page.
The team rewrites product alt text to state the item, color and key visible feature, such as “Oak dining table with tapered legs, seats six”. The cart button receives the name “Cart, 2 items”, and the banner gets an empty alt attribute. After the changes, a screen reader user test shows that checkout takes noticeably fewer steps, because users no longer have to listen through irrelevant image announcements.