In HTML, what should an img element's alt attribute say, and when is alt="" (an empty value) the correct choice?
answer
- substitution, not description
- purpose in context decides it
- decorative gets a deliberate value
- empty string is not the same as absent
- screen readers read the file name otherwise
basics
~20 sAlt text states the image's purpose in its context, not its appearance — what a reader would lose if the image never rendered. Purely decorative images take alt="" so assistive technology skips them instead of announcing a file name.
solid answer
~50 sAlt text is a replacement for the image, not a description of it: write what a reader would lose if the image failed to load. That makes it context-dependent — the same product photo might be `alt="Blue running shoe, side view"` in a catalogue and `alt=""` next to a paragraph that already names it. Leave out "image of" or "photo of", since a screen reader already announces that it is an image. When the image carries no information — a divider, a decorative flourish, an icon beside text that already repeats the same word — use `alt=""`, which maps the image to a presentational role so it is skipped. That empty value is a deliberate statement, and it is not the same as leaving `alt` off entirely: with no attribute the image has no author-supplied text at all, and screen readers commonly fall back to reading the file name or URL.
go deeper
Be ready to say plainly that alt replaces the image rather than describing it, and to write alt="" for a purely decorative image. Knowing that an empty alt differs from no alt at all already puts you ahead.
Explain the mechanics: an empty alt maps the image to a presentational role so it never reaches the accessibility tree, while a missing attribute leaves an unnamed image that screen readers repair by reading the file name. Show that the right text changes with surrounding content.
Demonstrate judgment on real pages — spotting redundant alt beside a caption, functional images inside links, and content images buried in CSS backgrounds where no alternative can attach. Interviewers want to hear you reason about a specific page, not recite a rule.
Own the fact that alt quality is an authoring-process problem, not a markup problem. Be ready to discuss where alt text comes from in a CMS, who is accountable for it, why automated checkers can only detect absence and never correctness, and what you enforce in review versus in tooling.
## What `alt` actually is The `alt` attribute on `<img>` holds a **text alternative**: the words that take the image's place for anyone who does not perceive the image. That is screen reader users, but also anyone whose image request failed, anyone who blocked images, and any tool that consumes the markup as text. The model that keeps you out of trouble is substitution: remove the image, put the alt text where it was, and read the page. If nothing was lost, the alt text is right. This is why alt text is *not* a description of what the picture looks like. A photograph of a smiling person holding a card is described one way in a photo archive and another way on a bank's "activate your card" page. The pixels are identical; the purpose is not. ## Context decides the text There is no correct alt text for an image in the abstract — only for an image *in a place*. Three common cases: - The image carries information not present in nearby text. Write that information: `alt="Sales fell from 40% to 12% between January and June"`. - The image duplicates adjacent text. It is redundant for a non-visual reader, so `alt=""` is usually right — otherwise the same sentence is announced twice. - The image is functional (inside a link or a button). The alternative describes the destination or the action, not the artwork. ```html <!-- informative --> <img src="chart.png" alt="Revenue doubled between Q1 and Q4 2025"> <!-- redundant with the visible label next to it --> <a href="/cart"><img src="cart.svg" alt=""> Cart</a> <!-- functional: no visible text, so the alt is the link text --> <a href="/"><img src="logo.svg" alt="Acme home"></a> ``` ## Decorative images and the empty alt An image is decorative when removing it costs a non-visual reader nothing: rules, spacers, background flourishes, mood photography chosen purely for texture, an icon that sits beside text saying the same thing. Give those `alt=""`. HTML maps an `<img>` with an empty `alt` to a presentational role, so the element does not surface in the accessibility tree at all and a screen reader moves straight past it. Write it as a genuinely empty string — `alt=""`, not `alt=" "` with a space, and not `alt="spacer"`. A single space is content in some implementations, and a filler word is noise announced on every page. ## Empty alt is not a missing alt This distinction is the reason interviewers ask the question at all. - `alt=""` says: *the author considered this image and decided it needs no alternative*. It is skipped. - No `alt` attribute says: *nothing*. The image is still exposed as an image with no author-supplied text, and screen readers typically repair the gap by announcing the `src` file name — so users hear `hero_final_v3_2x.png`, which is worse than silence and worse than a real description. The HTML specification requires `alt` on `img` outside a few narrow cases, so a validator or a linter flags the missing attribute. An empty `alt` passes because it is an explicit, meaningful value. ## Writing alt that reads well Keep it short — roughly a sentence for a typical informative image. It is announced linearly with no way to skim, so front-load the point. Skip "image of", "picture of", "graphic showing": the role is already announced. End the sentence's punctuation naturally so it does not run into the next line of content. Never use alt as an SEO keyword field: search engines and screen readers read the same attribute, and keyword stuffing degrades the experience for the users the attribute exists for. An image of text — a wordmark, a quote rendered as a graphic, a screenshot of an error message — needs alt that reproduces the text, since that text is the content. ## Common defects The recurring ones are: alt copied from the file name; alt describing colour and composition on a page where only the fact matters; the same alt string reused across every image in a gallery; a decorative image left with the attribute off; and content images pushed into CSS backgrounds, where no alternative can be attached at all — content images belong in `<img>` precisely so they can carry one.
- Someone argues that a missing alt attribute is fine because the image is decorative anyway. What do you tell them?That it produces the opposite result. A decorative image with no `alt` is still exposed as an image with no name, so a screen reader typically announces the file name — `bg_texture_02.png` on every page. `alt=""` is what removes it from the accessibility tree. It also happens to be the difference between passing and failing HTML validation.
- How long should alt text be, and what do you do when an image genuinely needs a paragraph?Aim for around a sentence — it is announced linearly with no skimming. When the image really needs more, the alt gives a short identification and the long description lives in real page content next to it: a caption, a visible "described below" section, or a text equivalent such as a data table. Do not reach for `longdesc`; it is obsolete.
- Does alt text help SEO, and should that change what you write?Search engines do read `alt`, which is exactly why it should stay honest. It is the same string a screen reader announces, so keyword stuffing buys little ranking value and directly degrades the experience for the users the attribute exists for. Accurate, purpose-driven alt text is both the accessible answer and the one crawlers reward.
saying these in an interview costs you the question
- Says alt should describe how the image looks
- Thinks omitting alt is the same as alt=""
- Starts every alt with 'image of' or 'photo of'
- Treats alt as a place for SEO keywords
- Claims one correct alt exists regardless of context