Alt text

Accessibility

Alt text is the textual alternative provided via the alt attribute on img and input type=“image” elements. It communicates an image’s purpose when the visual cannot be perceived, enables assistive technologies to announce images, and is used by search and browsers in specific contexts. An empty alt value marks decorative or redundant images, while meaningful images require concise, contextual text.

Definition

Alt text provides a text alternative for images so content and purpose remain available when images are not seen or fail to load. It differs from captions, which describe or add context to the figure as a whole, and is typically concise and aligned with the image’s role in the page.

HTML attribute and markup context

In HTML, the alt attribute on img is required for conformance. An empty value (alt="") marks an image as decorative or redundant and removes it from the accessibility tree.

For input type="image", alt provides the control’s accessible name. CSS background images have no alt and are treated as presentational by default; any essential information must exist in HTML text.

How screen readers obtain text for images

Screen readers compute an accessible name. For img, alt is the primary source; if absent, aria-label or aria-labelledby may name elements with role="img", and some readers fall back to link text, surrounding context, or a file name.

Captions via figcaption are announced as related content but not as the image’s accessible name. The title attribute is inconsistently exposed and is not a reliable substitute for alt.

SEO relevance and image indexing

Search engines use alt text alongside surrounding copy, captions, file names, structured data, and computer vision to understand images. For linked images, alt is treated similarly to anchor text for the destination.

Accurate alt can improve image search visibility and the relevance of link text. Overly generic or keyword-stuffed alt offers limited value and may be interpreted as spam.

Scope and intent

Alt conveys the image’s equivalent purpose rather than a literal description. Informative images state the essential information; functional images communicate the outcome of activation (for example, “Search”).

Complex graphics such as charts usually pair a brief alt with a nearby or linked detailed description that captures all data. Decorative images that add no information use empty alt to avoid noise in assistive technology.

Common mistakes

Omitting alt, using file names or hashes as text, or duplicating adjacent captions verbatim reduces accessibility and clarity. Providing non-empty alt for decorative imagery creates unnecessary verbosity in assistive technology.

Relying on the title attribute, stuffing keywords, or placing meaningful content only in CSS backgrounds prevents correct exposure to users and indexing systems. Using alt for analytics or stylistic notes diverges from its semantics.

Synonyms

alternative textalt attributealt tagimage altalt description