Alternative Text (Alt Text)

Alternative text gives users who cannot see an image access to its meaningful information or function. Use concise `alt` text for informative images and use `alt=""` for decorative images so assistive technology can skip them.

The HTML `alt` attribute provides a text alternative for an image represented by an `<img>` element. Screen readers can announce this text instead of the image, allowing users to understand relevant content without seeing the visual.

Write alt text based on the image's purpose and surrounding context, not merely its visual appearance. For example, an image of a chart may need a concise statement of its key takeaway, while a profile image used next to a person's name may need only the person's name.

Images that are purely decorative should use an empty `alt` value: `alt=""`. This tells assistive technology that the image does not add information, avoiding unnecessary announcements. Omitting the `alt` attribute altogether is different and can cause assistive technologies to expose the image in an unhelpful way.

When an image functions as a link or control, the alternative text should describe the action or destination rather than simply describing the picture. For complex information such as detailed charts, a short alt text can identify the image while the surrounding page provides the full textual explanation.

Key points

• Use `alt` text for images that convey information or meaning.
• Use `alt=""` for purely decorative images.
• Describe an image's purpose and relevant information, not every visible detail.
• For linked or interactive images, describe the destination or action.
• Do not omit `alt` on an `<img>` merely because an image seems unimportant.

Interview questions

What is the purpose of the `alt` attribute?

The `alt` attribute supplies a text alternative for an image. It allows users who cannot perceive the image to access its relevant information or purpose. Good alt text is concise and contextual rather than a literal inventory of everything visible. For decorative images, an empty `alt` value tells assistive technology to skip them.

When should you use `alt=""`?

Use `alt=""` when an image is purely decorative and does not contribute information or functionality. This explicitly marks the image as having no useful text alternative for the accessibility experience. Examples can include decorative flourishes or redundant visual elements. The empty attribute is preferable to simply removing `alt` from the `<img>` element.

How would you write alt text for a chart?

First, determine what role the chart plays in the page. If users need the chart's conclusion, the alt text can concisely communicate the important takeaway rather than listing every visual feature. For a complex chart where users need detailed values or trends, provide the detailed information in accessible surrounding content or another suitable text representation. The right wording depends on the chart's purpose and the information already available nearby.

What should alt text contain when an image is inside a link?

The alternative should communicate what the link does or where it goes. A purely visual description may be insufficient if the image is functioning as a control. For example, an image linking to a profile could use the person's name if that identifies the destination. The surrounding context should also be considered so the accessible name is not unnecessarily repetitive.

Why is omitting `alt` different from using an empty `alt` value?

An empty `alt` value explicitly states that the image has no alternative text and should be treated as decorative. Omitting the attribute does not make that same semantic statement, so assistive technologies may handle the image in a less predictable or useful way. This distinction is important when implementing accessible HTML consistently. Developers should therefore make the intended image semantics explicit.