Definition: The alt attribute is an HTML attribute that provides a text alternative for an image. It is written inside the HTML img element and communicates the image’s function or information when the image is unavailable or when someone uses assistive technology. Its content depends on the image’s purpose on the page: it may describe information, identify a destination, or remain empty when the asset is purely decorative. The alt attribute is therefore part of web accessibility, not a field for accumulating keywords.
Table of contents
How the Alt Attribute Works
The attribute is added to an image through the alt property. For example:
<img src="sales-chart.png" alt="Sales increased by 18% between January and June">
A screen reader can use this text as an alternative to the image. Some browsers also display it when the file fails to load. Its main purpose is not to list every visual feature, but to convey the information a person would miss if they could not perceive the image.
A missing attribute and an empty attribute do not mean the same thing. If alt is absent, assistive technology may announce the filename, URL, or other unhelpful information. By contrast, alt="" intentionally signals that the image adds no content and can be skipped. The W3C image decision tree helps determine which alternative each situation requires.
Alt text is not a substitute for a caption, filename, or title attribute. A caption is visible to everyone and may provide additional context. The filename identifies the asset, while title is not a reliable accessible alternative. When the same information already appears next to the image, the alt attribute should avoid unnecessary repetition.
Alt Text for Different Image Types
The appropriate wording depends on the function the image performs within the content. These are the most common situations:
- Informative image: conveys the relevant data or meaning in context through a concise, specific description.
- Decorative image: uses
alt=""so assistive technology can ignore it. An image added as a CSS background has no alt attribute and should not contain essential information. - Functional image: when it acts as a link or button, the text names the action or destination, such as
alt="Search"oralt="Download the report", instead of describing the icon. - Image of text: reproduces the visible words when they are needed to understand the content. For a logo linked to the homepage, the organization’s name is usually sufficient.
- Complex chart, map, or diagram: uses a short alternative that identifies the main point and provides the details in nearby text, a data table, or a longer explanation.
The same photograph may need different alternatives on different pages. A portrait might identify a person in a biography, describe an action in a news story, or be decorative in a visual block. Context determines which information is equivalent.
It is usually unnecessary to begin with phrases such as image of or photo of because the screen reader already identifies the element as an image. Naming the format is useful when it contributes to the meaning, as with a map, illustration, or screenshot.
The Alt Attribute and SEO
Search engines combine the alt attribute with visible content, the filename, and other page signals to interpret an image. Accurate text can help associate it with the URL’s topic and understand it in services such as Google Images. This is part of OnPage SEO, but it does not guarantee rankings or replace the quality and relevance of the page.
A keyword should appear only when it naturally describes the image. Adding repeated terms, variants, or promotional phrases that do not match the asset harms the experience and may be treated as keyword stuffing. Google’s image SEO guidelines recommend useful, contextual alt text and warn against filling it with keywords.
It is also incorrect to use the alt attribute for information the image does not contain. If a product appears in a photograph, the text may identify the product and a relevant visible detail, but it should not include a list of features, locations, or search queries unrelated to the image.
Implementation Mistakes
Most problems arise from applying one rule to every image. Before writing the text, identify the asset’s function and check the result both with the image available and unavailable.
- Omitting the attribute instead of declaring
alt=""for a decorative image. - Copying the filename, a URL, or generic wording such as image.
- Repeating the caption or adjacent paragraph without providing a more useful alternative.
- Reusing the same text for different images or describing irrelevant details.
- Turning the attribute into a list of keywords.
- Trying to place every data point from a complex visualization in an excessively long string.
The alt attribute should be reviewed whenever the image, its destination, or its context changes. A correct text alternative describes the asset’s current function and preserves its meaning without relying only on visual presentation.