Alt Text and Accessibility
The alt attribute on an <img> provides a text alternative for the image. It's read aloud by screen readers, shown when an image fails to load, indexed by search engines, and displayed by browsers with images disabled. Writing it well is one of the highest-value accessibility habits you can build.
basic-alt.html
<img src="/golden-gate-bridge.jpg" alt="The Golden Gate Bridge spanning San Francisco Bay at sunset">
Writing Good Alt Text
Good alt text describes what the image conveys, not just what it literally shows. Ask: what information would someone lose if they couldn't see this image? Keep it concise — usually one short sentence — and skip details that don't matter to the surrounding content.
Context | Poor alt text | Better alt text |
|---|---|---|
Product photo on a shopping page | alt="IMG_4021.jpg" | alt="Blue ceramic mug with a wraparound wave pattern" |
Team headshot on an About page | alt="photo" | alt="Maria Alonso, Head of Engineering, smiling in front of a whiteboard" |
Chart illustrating a trend | alt="chart" | alt="Line chart showing signups tripling from January to June 2026" |
alt text, so prefixing it with "image of" or "picture of" is redundant and wastes the listener's time. Just describe the content directly: alt="A golden retriever catching a frisbee", not alt="Image of a golden retriever catching a frisbee".Decorative Images: alt=""
Some images are purely decorative — they add visual polish but convey no information a screen reader user would need. For these, use an empty alt="" (not a missing alt attribute — an empty one). This tells assistive technology to skip the image entirely instead of announcing its filename or guessing at a description.
decorative-image.html
<!-- A decorative divider icon with no informational content --> <img src="/leaf-divider.svg" alt=""> <!-- The heading already conveys the meaning; this icon is purely visual --> <h2><img src="/star-icon.svg" alt=""> Featured Articles</h2>
alt entirely is technically invalid and screen readers commonly fall back to reading the file name (e.g. "IMG dash 4021 dot jpg") — often worse than saying nothing. alt="" is the deliberate, correct way to mark an image as decorative.Alt Text vs the title Attribute
alt and title are not interchangeable. alt is the text alternative — it's what's announced in place of the image and what displays if the image fails to load. title is supplementary, shown as a hover tooltip, and is inconsistently (or not at all) exposed by screen readers and unavailable to touch/keyboard-only users.
Attribute | Purpose | Screen reader behavior |
|---|---|---|
| Required text alternative for the image content | Always announced in place of the image |
| Optional supplementary tooltip on hover | Support varies — often not announced, and unreachable without a mouse |
alt-and-title.html
<img src="/eiffel-tower.jpg" alt="The Eiffel Tower illuminated at night" title="Photographed by our Paris correspondent, June 2026" >
SEO Impact
Search engines can't "see" images the way humans do — they rely heavily on alt text to understand what an image depicts and how it relates to the surrounding page. Well-written, specific alt text can help an image (and the page it's on) rank in image search results, while missing or keyword-stuffed alt text can hurt both accessibility and SEO.
alt ("blue mug coffee cup kitchenware home decor gift ceramic sale discount") to game search rankings makes the description useless to screen reader users and is flagged by search engines as manipulative. Write for the person who can't see the image first — good SEO follows naturally.When NOT to Say "Image Of..."
Never prefix alt text with "image of," "picture of," or "graphic of" — screen readers already announce the element type.
If the image is purely decorative, use
alt=""rather than a lengthy description no one needs.If the image is also a link (wrapped in <a>), describe the link's destination or action, not just the visual, e.g. alt="Company logo, links to homepage".
If a nearby caption or heading already fully describes the image, a short or even empty alt may be appropriate to avoid repeating the same text twice.
Alt Text for Functional Images (Links and Buttons)
When an image is the only content inside a link or button, its alt text needs to describe the action or destination, not just the picture. A screen reader user tabbing to that link only hears the alt text — it has to communicate what will happen if they activate it.
functional-image-alt.html
<!-- Poor: describes the picture, not the action --> <a href="/"><img src="/logo.svg" alt="Blue swirl logo"></a> <!-- Better: describes what activating the link does --> <a href="/"><img src="/logo.svg" alt="Acme Inc. — go to homepage"></a> <!-- A search icon button --> <button type="submit"> <img src="/search-icon.svg" alt="Search"> </button>
Alt Text for Complex Images: Charts and Infographics
A short alt attribute can't fully capture a complex chart or infographic's data. For these, write a concise alt summarizing the key takeaway, and provide the full data set nearby in an accessible format — a data table, or a longer description linked from the image.
complex-image-alt.html
<figure>
<img
src="/revenue-by-quarter.svg"
alt="Bar chart: quarterly revenue grew from $2M in Q1 to $4.5M in Q4 2025"
>
<figcaption>
Full data available in the <a href="/data/revenue-2025.csv">CSV export</a>.
</figcaption>
</figure><figcaption> nearby, the alt attribute is still required — screen readers announce them as separate, complementary pieces of information, not as substitutes for one another.Alt Text and Background Images
CSS background images (background-image: url(...)) have no alt equivalent at all — they are invisible to screen readers entirely. This is exactly why they're the right tool for purely decorative images, and the wrong tool for any image that conveys real information.
Image type | Correct approach |
|---|---|
Meaningful content (photo, chart, logo) | Use |
Purely decorative pattern or texture | CSS |