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.
Frontend interview practice question
What is the purpose of the alt attribute in the <img> tag?
Interview quick answer
Interview focus
This HTML interview question tests whether you can explain HTML img alt Attribute: Definition, Examples and Mistakes, connect it to production trade-offs, and handle common follow-up questions.
- HTML img alt Attribute: Definition, Examples and Mistakes explanation without falling back to memorized definitions
- Accessibility and Attributes reasoning, edge cases, and production failure modes
- How you would answer the most likely HTML interview follow-up
Interview answer drill
Use this HTML interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.
Full interview answer
What is the alt attribute?
The alt attribute (alternative text, often called the alt tag) gives an <img> a text alternative. Screen readers announce it, the browser shows it when the image fails to load, and search engines use it to understand the image. Every <img> should carry an alt attribute; the value is empty (alt="") when the image is decorative. The common production mistake is treating alt text like a caption or an SEO keyword bucket instead of describing what the image contributes in context.
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.
alt attribute examples
Functional images live inside links, so the destination still comes from the href attribute and the opening context from the target attribute; the alt text only names the action.
HTML
<!-- Informative image: describe what it adds in this context -->
<img src="q3-revenue.png" alt="Q3 revenue up 18% over Q2">
<!-- Functional image (inside a link): describe the destination or action -->
<a href="/"><img src="logo.svg" alt="FrontendAtlas home"></a>
<!-- Decorative image: empty alt so screen readers skip it -->
<img src="divider.svg" alt="">
<!-- Image of text: repeat the text -->
<img src="banner.png" alt="Summer sale: 20% off all plans">
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.
Guides
Preparing for interviews?
Use this as one explanation rep, then continue with the HTML interview questions cluster or a guided prep path.
Open frontend interview questionsPractice more HTML interview questionsOpen HTML/CSS interview questionsOpen Essential 60Open Machine Coding HubOpen Question LibraryOpen system design questionsOpen interview preparation guideOpen system design blueprintOpen framework prep pathsOpen Study PlansOpen 7-day crash study planBrowse company questions
Built in public
The code behind FrontendAtlas lives on GitHub. A star helps other frontend engineers find it.