The alt (alternative text) attribute in the <img> tag provides a textual description of an image. It helps users who cannot see the image — such as visually impaired users using screen readers — and also appears if the image fails to load. Additionally, alt text improves SEO by allowing search engines to understand image content.
What is the purpose of the alt attribute in the <img> tag?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
The Core Idea
The alt attribute (short for “alternative text”) in the <img> tag provides a textual description of an image. It’s a key part of web accessibility, ensuring that users who cannot see the image — due to visual impairments, slow connections, or technical errors — still understand what the image represents. Search engines also rely on this attribute to interpret image content for ranking and indexing.
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