HTML Guides for alt

The alt attribute is one of the most important accessibility features in HTML. When a screen reader encounters an <img> element, it reads the alt text aloud so that visually impaired users understand the image's content and purpose. Without it, screen readers may fall back to reading the file name (e.g., "DSC underscore 0042 dot jpeg"), which is meaningless and confusing. Search engines also use alt text to understand and index image content, so including it benefits SEO as well.

The HTML specification requires the alt attribute on all <img> elements, with only narrow exceptions (such as when the image's role is explicitly overridden via certain ARIA attributes, or when the image is inside a <figure> with a <figcaption> that fully describes it—though even then, including alt is strongly recommended).

How to choose the right alt text

The value of the alt attribute depends on the image's purpose:

• Informative images — Describe the content concisely. For example, a photo of a product should describe the product.
• Functional images — Describe the action or destination, not the image itself. For example, a search icon used as a button should have alt="Search", not alt="Magnifying glass".
• Decorative images — Use an empty alt attribute (alt=""). This tells screen readers to skip the image entirely. Do not omit the attribute—use an empty string.
• Complex images (charts, diagrams) — Provide a brief summary in alt and a longer description elsewhere on the page or via a link.

Examples

❌ Missing alt attribute

This triggers the W3C validation error:

<imgsrc="photo.jpg">

A screen reader has no useful information to convey, and the validator flags this as an error.

✅ Informative image with descriptive alt

<imgsrc="photo.jpg"alt="Person holding an orange tabby cat in a sunlit garden">

The alt text describes what the image shows, giving screen reader users meaningful context.

✅ Decorative image with empty alt

<imgsrc="decorative-border.png"alt="">

When an image is purely decorative and adds no information, an empty alt attribute tells assistive technology to ignore it. This is valid and preferred over omitting the attribute.

✅ Functional image inside a link

<ahref="/home">

<imgsrc="logo.svg"alt="Acme Corp — Go to homepage">

</a>

Because the image is the only content inside the link, the alt text must describe the link's purpose.

✅ Image inside a <figure> with <figcaption>

<figure>

<imgsrc="chart.png"alt="Bar chart showing quarterly revenue growth from Q1 to Q4 2024">

<figcaption>Quarterly revenue growth for fiscal year 2024.</figcaption>

</figure>

Even when a <figcaption> is present, including a descriptive alt attribute is best practice. The alt should describe the image itself, while the <figcaption> provides additional context visible to all users.

Common mistakes to avoid

• Don't start with "Image of" or "Picture of" — Screen readers already announce the element as an image. Write alt="Golden retriever playing fetch", not alt="Image of a golden retriever playing fetch".
• Don't use the file name — alt="IMG_4392.jpg" is not helpful.
• Don't duplicate surrounding text — If the text next to the image already describes it, use alt="" to avoid redundancy.
• Don't omit alt thinking it's optional — A missing alt attribute and alt="" are fundamentally different. Missing means the screen reader may announce the file path; empty means the screen reader intentionally skips the image.

An empty alt attribute on an img element is a deliberate signal that the image is purely decorative and carries no meaningful content. According to the WHATWG HTML specification, this maps the element to the "presentation" role in the accessibility tree, effectively hiding it from screen readers and other assistive technologies.

When you add a role attribute to an img with alt="", you're sending contradictory instructions: the empty alt says "this image is decorative, ignore it," while the role attribute says "this image has a specific semantic purpose." Browsers and assistive technologies cannot reliably resolve this conflict, which can lead to confusing or inconsistent behavior for users who rely on screen readers.

This rule exists to enforce clarity in how images are exposed to the accessibility tree. If an image is truly decorative, it should have alt="" and no role. If an image serves a functional or semantic purpose — such as acting as a button, link, or illustration — it should have both a descriptive alt value and, if needed, an appropriate role.

How to fix it

You have two options depending on the image's purpose:

1. The image is decorative: Remove the role attribute entirely. The empty alt attribute already communicates that the image should be ignored by assistive technologies.

2. The image is meaningful: Provide a descriptive alt value that explains the image's purpose. If a specific role is genuinely needed, keep it alongside the non-empty alt.

Examples

❌ Incorrect: empty alt with a role attribute

<imgsrc="icon.png"alt=""role="img">

<imgsrc="banner.jpg"alt=""role="presentation">

Even role="presentation" is redundant and invalid here — the empty alt already implies presentational semantics.

✅ Correct: decorative image with no role

<imgsrc="icon.png"alt="">

If the image is decorative, simply remove the role attribute. The empty alt is sufficient.

✅ Correct: meaningful image with a descriptive alt and a role

<imgsrc="warning-icon.png"alt="Warning"role="img">

If the image conveys information, give it a descriptive alt value. The role="img" is typically unnecessary here since img elements already have an implicit role of img when alt is non-empty, but it is at least valid.

✅ Correct: meaningful image used in a specific context

<button>

<imgsrc="search-icon.png"alt="Search">

</button>

Here the image has a descriptive alt and doesn't need an explicit role because its purpose is conveyed through the alt text and its context within the button.

An img element with a role attribute cannot have an empty alt attribute because the role overrides the default semantics, and an empty alt signals that the image is decorative — two intentions that contradict each other.

When an img has alt="", it tells assistive technologies to skip the image entirely. The image is treated as presentational, equivalent to role="presentation" or role="none". Assigning a different role (such as button, link, or tab) tells assistive technologies the element has a specific function and should be announced. These two signals conflict: one says "ignore this," the other says "this is interactive" or "this has meaning."

To fix this, decide what the image actually does:

• If the image is decorative and should be ignored, remove the role attribute and keep alt="".
• If the image has a functional role, provide a descriptive alt value that explains the image's purpose.

HTML examples

Image with conflicting role and empty alt

<imgsrc="search.png"alt=""role="button">

Fixed: decorative image without a role

If the image is purely decorative, remove the role:

<imgsrc="search.png"alt="">

Fixed: functional image with descriptive alt

If the image acts as a button, give it a meaningful alt:

<imgsrc="search.png"alt="Search"role="button">

An img element without an alt attribute cannot carry any aria-* attributes except aria-hidden.

When an img lacks an alt attribute, its role and purpose are undefined from an accessibility standpoint. The HTML specification treats this as an image whose text alternative has not been provided, and assistive technologies handle it in a special fallback way. In this state, adding ARIA attributes like aria-label, aria-labelledby, or aria-describedby creates a contradiction: the markup simultaneously says "this image has no known alternative" and "here is semantic information about this image."

The only ARIA attribute allowed on an img without alt is aria-hidden="true", because hiding the image from the accessibility tree is consistent with having no text alternative.

There are two ways to fix this. Either add an alt attribute to the img (which you should almost always do), or remove the ARIA attributes and optionally add aria-hidden="true" if the image is purely decorative.

HTML examples

Invalid: img with no alt but with aria-label

<imgsrc="photo.jpg"aria-label="A sunset over the ocean">

Fixed: add an alt attribute

If the image conveys meaning, provide an alt attribute. Once alt is present, ARIA attributes are allowed.

<imgsrc="photo.jpg"alt="A sunset over the ocean">

Fixed: decorative image hidden from assistive technology

If the image is decorative and carries no meaning, use an empty alt or drop ARIA attributes in favor of aria-hidden:

<imgsrc="decoration.jpg"alt="">

<imgsrc="decoration.jpg"aria-hidden="true">