The alt attribute gives an image a text alternative for screen readers, fallback rendering, and search understanding. The real production decision is whether an image is decorative, informative, or functional, because linked logos and icon buttons should describe the destination or action, not the pixels.
Interview answer drill
Use this HTML interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.
What is the purpose of the alt attribute in the <img> tag?Frontend interview answer
Interview focus
This HTML interview question tests whether you can explain HTML img alt attribute: accessibility, SEO, and common mistakes, connect it to production trade-offs, and handle common follow-up questions.
- HTML img alt attribute: accessibility, SEO, and common mistakes explanation without falling back to memorized docs wording
- Accessibility and Attributes reasoning, edge cases, and production failure modes
- How you would answer the most likely HTML interview follow-up
Interview quick answer
Full interview 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'> |
Image type | How to write alt | Example |
|---|---|---|
Decorative | Use empty alt so assistive tech skips noise. | <img src='divider.svg' alt=''> |
Informative | Describe the information the image adds in context. | <img src='sales-chart.png' alt='Quarterly sales up 18%'> |
Functional | Describe the action or destination, not the picture itself. | <a href='/'><img src='logo.svg' alt='FrontendAtlas home'></a> |
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.
Functional-image follow-up
If a logo links back home, alt like "FrontendAtlas home" is usually more helpful than "Company logo". If an icon-only button opens search, the alt or accessible name should expose the action, not the artwork. If nearby text already says the same thing, keep the alt short and avoid repeating the visible label or stuffing extra SEO keywords.
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 this as one explanation rep, then continue with the HTML interview questions cluster or a guided prep path.