J2.04.1functional alternative textdesignresearch

Describe function and information, not appearance

Aliases: alt text · accessible name · functional description

What it is

Alternative text answers what someone who cannot see the image still needs to know or do. A magnifying glass on a search control is “Search,” not “white magnifying glass on a blue circle.” A cracked-screen photo in a repair piece names the crack if the crack is the evidence; if the photo is atmosphere, an appearance catalog is off-target. The same bitmap is a function name on a button and information in an article — context chooses the layer, not the pixels.

Why it happens

Assistive technology puts the accessible name into a linear speech stream. Appearance prose spends time and supplies neither the next action nor the fact. A functional image (a graphic inside a control) should be named as the action; an informative image should be named as the fact it was placed to add. Sighted people use the image as a parallel channel; people who do not see have only this string. Likeness is not the goal. Equivalence is.

Filenames, IMG_3847, and a leading “image of” get spoken, which injects implementation into content. A logo is the organization, not “blue wordmark.” Decorative images should not have this name at all — that is the next group. Here the image needs to be spoken; the question is which layer to speak. A short alt cannot carry a chart’s trend; it is enough to note that a longer equivalent is required. How to write that longer form sits later.

Studying it

Turn images off or cover the screen and listen only to names: can the task be finished, can the fact be restated. Compare three drafts: appearance, function/information, filename. Use the accessibility tree to see whether the computed name is the visible words (especially on buttons).

Independent variables: alt strategy (appearance / function or information / filename), image role (control / content / logo). Dependent variables: task success with images off, wrong actions, times appearance words are heard but the job cannot be done.

Automation can catch a missing alt attribute. It cannot catch whether the layer is the right one.

Where it stops holding

Art, comics, and CAPTCHAs sometimes are their appearance, but the sentence still lands on what the reader must take away, not a pigment list. If product shots differ only by color or cut, color is information, not ornament. An icon button with no visible word has alt as its only name — still not a description of the glyph. Type baked into the image is information and belongs in the name or adjacent text, not in “a picture that has words.”

Applying it

  • Before writing, ask whether the image is there to be activated or to be known. Use a verb or control name for the first; the fact for the second.
  • Strip shells such as “image / icon / blue” unless color or material is the fact.
  • Name logos as the organization or product. When a graphic next to visible text would repeat that text, do not let the graphic steal the name.
  • Verify: listen to image names only, screen covered, and complete the action or restate the fact. If you hear a look and cannot act, rewrite.

Related

  • Same group: J2.04.2 Alt text should be long enough to convey, short enough not to stall · J2.04.3 Complex graphics need a long description
  • Nearby: J2.05 Decorative Images · J5.10 Name, Role and State
  • Search terms: alternative text · accessible name · functional alt

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/J2.04.1