How does the text alternative differ between an image that is the entire content of a link, an image of text such as a wordmark, and a complex data chart?
answer
- classify the job before writing a word
- destination beats artwork
- the words are the content
- one attribute cannot hold a paragraph
- the equivalent should be visible too
basics
~20 sA functional image's alternative describes the destination or action, not the picture. An image of text reproduces that text verbatim. A complex chart gets a short alt identifying it plus a full text equivalent in real page content, because no attribute holds a paragraph well.
solid answer
~50 sThe category of the image decides the alternative. When an `<img>` is the only content of a link or a button, its `alt` becomes the control's name, so it must describe where the link goes or what the button does — `alt="Acme home"`, not `alt="Acme logo"` — because a user hearing "link, Acme logo" learns nothing about the destination. An image of text, such as a wordmark or a quote rendered as a graphic, needs `alt` reproducing the text, since that text *is* the content. A complex image — a chart, a flow diagram, a map — cannot be served by one attribute: give `alt` a short identification plus the headline finding, and put the full equivalent in visible page content, a data table, or a description the image points at. That way sighted users get it too. `longdesc` is obsolete; do not reach for it.
go deeper
Know the headline rule: for an image inside a link or button the alt says where it goes or what it does, and for an image of text the alt reproduces the words.
Explain why a functional image's alt becomes the control's accessible name, and why a complex image needs a short alt plus a text equivalent in the page rather than a paragraph crammed into an attribute.
Show you can classify images on a real page and defend the depth you chose for each, including when to argue that an image of text should be real text instead. Be ready to say what an automated checker can and cannot verify.
Own the programme: who authors alt text, what the CMS asks for per content type, which templates get a fixed pattern, how generated text is treated, and how you prove coverage without pretending an automated pass equals correctness.
## Start by classifying the image The question "what is the alt text?" is unanswerable until you know what job the image is doing. Three jobs need different answers, and an automated checker can detect none of them — it can only tell you whether the attribute exists. ## Functional images: describe the action, not the artwork When an image is the sole content of a link or a `<button>`, its `alt` becomes the name of that control. The user is not asking "what is in this picture"; they are asking "what happens if I activate this". ```html <!-- bad: names the artwork --> <a href="/"><img src="logo.svg" alt="Acme logo"></a> <!-- good: names the destination --> <a href="/"><img src="logo.svg" alt="Acme home"></a> <!-- a submit control built from an image needs the action --> <input type="image" src="search.png" alt="Search"> ``` The test: read the announced control aloud. "Link, Acme logo" tells a user nothing about where they will land. "Link, Acme home" does. The same rule handles a printer icon that triggers printing (`alt="Print this page"`) and a magnifier icon that submits a search (`alt="Search"`). A related case: when the link contains an image **and** visible text, the text already names the destination, so the image is redundant and takes `alt=""`. Labelling both produces a doubled announcement. ## Images of text: reproduce the text A wordmark, a pull quote rendered as a graphic, a screenshot of an error message, a scanned notice — the informational content is the words. The alternative reproduces them: ```html <img src="quote.png" alt="\"We ship on Fridays and we are not sorry.\" — Dana Okafor"> ``` Do not paraphrase, and do not describe the typography. If the words are long enough that reproducing them in an attribute feels wrong, that is a signal the design should be real text rather than an image in the first place — real text also reflows, scales, translates and can be selected. A logo is the standard exception, and there the wordmark's text is short. ## Complex images: alt plus a real text equivalent A bar chart, an architecture diagram, an org chart or a map carries more information than one sentence can hold. Trying to cram it into `alt` produces a paragraph announced with no way to pause, skim or re-read a part of it. The working pattern has two layers: 1. **Short `alt`** — identify the image and state the headline it is there to make: `alt="Bar chart: support tickets fell 40% after the March release"`. 2. **Full equivalent in page content** — the underlying data as an HTML `<table>`, a paragraph walking through the diagram, or a `<details>`/`<summary>` disclosure holding the description. Because this lives in the page, sighted users benefit too, which is usually the strongest argument for doing it. When the description sits elsewhere in the page and you want it associated with the image programmatically, `aria-describedby` on the `<img>` referencing that content's `id` is the mechanism. It supplements the name; it does not replace `alt`. Do not use `longdesc`. It was an HTML attribute pointing at a long description, it is obsolete, and support never justified it. ## Judgement calls you should be able to defend - **How much detail is enough?** Enough to serve the image's purpose *on this page*. The same chart in an analyst report and in a marketing block need different depth. - **Whose job is it?** Alt for editorial images is content, not code. A developer can guarantee the attribute exists; only the author of the page knows what the image is for. - **What can tooling verify?** Presence, emptiness, obvious junk like file names and "image". Correctness, never. Any programme that treats an automated pass as done will ship confidently wrong alternatives. ## The defects that ship Logo links announced as "Acme logo"; icon buttons whose alt names the glyph ("magnifying glass") rather than the action; a chart's entire data set stuffed into a single attribute; a data table replaced by a screenshot of a data table; and generated alt text applied in bulk across a catalogue, which produces plausible sentences that describe appearance rather than purpose.
- How would you audit alt text across a large content site, and what can tooling actually tell you?Tooling reliably reports absence, empty values, and obvious junk — file names, "image", "photo", duplicated strings across a gallery. It cannot judge correctness, because correctness depends on purpose in context. So automation gives you a triage queue, and the real audit is a sampled human review by template: logo links, icon controls, hero images, charts, then editorial images by content type.
- A product manager suggests generating alt text for a 50,000-image catalogue automatically. What is your position?It beats nothing for images that currently have no attribute at all, but it optimises for the wrong thing: generated text describes appearance, while good alt states purpose in context. For a catalogue where the purpose is uniform, a template driven by product data usually beats generation. Either way, treat output as a draft, sample it, and never let it overwrite human-written alt.
- Where should the long description of a chart live, and why not in the alt attribute?In visible page content — a data table, a paragraph, or a `<details>` disclosure beside the image. An attribute is announced as one uninterruptible run with no structure to navigate, so a paragraph in `alt` is hostile to read. Putting it in the page gives everyone the data, which is usually the more persuasive argument internally, and it can be styled, translated and tested like any other content.
saying these in an interview costs you the question
- Writes alt="Company logo" on a logo that links home
- Describes the icon's shape instead of the button's action
- Puts an entire chart data set into the alt attribute
- Reaches for longdesc for the long description
- Labels both the image and the visible link text