The alt attribute gives an image a text alternative for screen readers, fallback rendering, and search understanding. The common mistake is writing alt text for what the image looks like instead of what the image contributes to the page.
What is the purpose of the alt attribute in the <img> tag?
Quick Answer
Answer
The Core Idea
The alt attribute (short for “alternative text”) in the <img> tag provides a text alternative for what the image means in context. It’s a key part of web accessibility, and the common production mistake is treating alt text like a caption or SEO keyword bucket. Good alt text tells assistive tech what the image contributes, while decorative images should usually use empty alt so screen readers skip noise.
HTML
<img src="sunset.jpg" alt="A beautiful orange sunset over the ocean">
In this example:
- If the image loads successfully, users see the picture.
- If it fails to load, the browser displays the text: “A beautiful orange sunset over the ocean.”
- Screen readers announce this description for visually impaired users, allowing them to understand the page content.
Scenario | Behavior of the alt Attribute | Example |
|---|---|---|
Image loads correctly | The alt text is hidden but available for accessibility tools. | <img src='logo.png' alt='Company logo'> |
Image fails to load | The alt text appears in place of the image. | <img src='missing.jpg' alt='Product image not available'> |
Screen reader use | The alt text is read aloud to the user. | <img src='map.jpg' alt='Map of Europe showing capitals'> |
Accessibility Importance
The alt attribute is a cornerstone of web accessibility (a11y). Screen readers — used by visually impaired users — read the alt text aloud, helping them navigate and understand the page. Without it, users may miss critical information, especially for images conveying meaning, such as charts, infographics, or buttons.
Example:
`html
<img src="search-icon.png" alt="Search button">
If the image is used as a button, the alt text communicates its purpose clearly to assistive technologies.
SEO Benefits
Search engines cannot “see” images — they rely on alt text to understand their content. Descriptive alt attributes help search engines index images correctly, improving visibility in Google Image Search and enhancing overall page SEO.
For instance:
`html
<img src="organic-tea.jpg" alt="Cup of organic green tea on wooden table">
This helps search engines associate your image with queries related to organic tea, potentially increasing site traffic.
When to Leave alt Empty
If an image is purely decorative (e.g., background shapes or design icons that convey no essential information), the alt attribute can be left empty but must still be present:
`html
<img src="decorative-line.png" alt="">
This tells screen readers to skip the image entirely, improving the experience for assistive users.
Common Mistakes
- Missing alt attribute: Leaves visually impaired users without context and causes HTML validation errors.
- Overstuffed alt text: Stuffing keywords for SEO hurts accessibility and can be flagged as spam.
- Redundant descriptions: Repeating information already given nearby (like 'Image of a logo' when the caption says 'Company Logo').
- Using file names: Alt text like 'img12345.jpg' provides no value.
HTML
<!-- Bad -->
<img src="dog.jpg">
<!-- Good -->
<img src="dog.jpg" alt="Golden retriever playing with a ball in the park">
Still so complicated?
Think of the alt attribute as a backup voice for your image. If someone can’t see it — whether because of a screen reader or a slow internet connection — the alt text speaks on the image’s behalf, describing what’s there and why it matters.
Summary
- The alt attribute provides a text alternative for images.
- Essential for accessibility and SEO optimization.
- Appears when images fail to load or are read by assistive technologies.
- Keep alt text concise, descriptive, and contextually meaningful.
- Use an empty alt (
alt="") for purely decorative images.
Similar questions
Guides
Preparing for interviews?
Use the relevant interview-question hub first, then move into a concrete study plan before targeted company sets.