# An “img” element must have an “alt” attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images. > Canonical HTML version: https://rocketvalidator.com/html-validation/an-img-element-must-have-an-alt-attribute-except-under-certain-conditions-for-details-consult-guidance-on-providing-text-alternatives-for-images > Attribution: Rocket Validator (https://rocketvalidator.com) > License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/) The `alt` attribute is one of the most important accessibility features in HTML. When a screen reader encounters an `` 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 `` 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 `

` 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: ```html ``` A screen reader has no useful information to convey, and the validator flags this as an error. ### ✅ Informative image with descriptive `alt` ```html ``` The `alt` text describes what the image shows, giving screen reader users meaningful context. ### ✅ Decorative image with empty `alt` ```html ``` 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 ```html ``` Because the image is the only content inside the link, the `alt` text must describe the link's purpose. ### ✅ Image inside a `
` with `
` ```html

Quarterly revenue growth for fiscal year 2024.

``` Even when a `
` is present, including a descriptive `alt` attribute is best practice. The `alt` should describe the image itself, while the `
` 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.

Person holding an orange tabby cat in a sunlit garden — ` 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: ```html ``` A screen reader has no useful information to convey, and the validator flags this as an error. ### ✅ Informative image with descriptive `alt` ```html ``` The `alt` text describes what the image shows, giving screen reader users meaningful context. ### ✅ Decorative image with empty `alt` ```html ``` 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 ```html ``` Because the image is the only content inside the link, the `alt` text must describe the link's purpose. ### ✅ Image inside a `
` with `
` ```html

Quarterly revenue growth for fiscal year 2024.

``` Even when a `
` is present, including a descriptive `alt` attribute is best practice. The `alt` should describe the image itself, while the `
` 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.