Alternative text

Alt text is the copy a screen reader announces in place of an image, icon, or chart. In a data-heavy product, most “images” are meaningful — a chart, a status icon, an avatar — so getting alt text right is part of writing, not an afterthought.

The one question to ask

Before writing alt text, decide what the element is doing. If it conveys information, describe the information. If it's decorative, hide it from assistive tech entirely so it doesn't add noise.

If the element is…Then…
Informative (a status, a trend)Describe the information it conveys, not its appearance.
Functional (an icon button, a logo link)Describe the action or destination, not the picture.
Decorative (a background flourish)Give it empty alt (alt="") or aria-hidden so it's skipped.
Complex (a chart, a diagram)Give a short summary, and put the detail in nearby text or a table.

Icons

An icon's alt text should match the action a sighted user understands — which is the visible verb, not the shape of the glyph. Decorative icons beside a text label need no alt at all.

Icon-only button
Use
aria-label="Delete plan"
Avoid
aria-label="Trash icon"
Status icon
Use
aria-label="Ready"
Avoid
aria-label="Green circle"
Icon next to a visible label
Use
aria-hidden on the icon — the label is already read
Avoid
aria-label that repeats the visible text

Charts & data visualizations

A chart's job is to answer a question. The alt text should give that answer, not narrate the geometry. Pair it with an accessible data table or nearby figures for the detail.

Readiness gauge
Use
Recovery readiness: 72% — on track.
Avoid
A circular gauge with a blue arc.
Trend sparkline
Use
Open risks: down from 14 to 9 over the last quarter.
Avoid
A line chart trending downward.
Risk matrix
Use
3 risks in the high-likelihood, high-impact zone.
Avoid
A 5×5 grid of colored cells.
Do

Lead with the takeaway — the number or trend the chart exists to show.

Don't

Don't describe colors and shapes; they mean nothing to a screen-reader user.

Do

Offer the underlying data as a table or text for anyone who needs the detail.

Don't

Don't leave a meaningful chart with empty or auto-generated alt.

Avatars & people

Avatars stand in for a person. Announce who, not what the picture looks like — and skip it when the name is already shown next to it.

Avatar without a visible name
Use
aria-label="A. Chen"
Avoid
aria-label="Profile photo"
Avatar beside the person's name
Use
aria-hidden — the name text is read instead
Avoid
alt="Avatar of A. Chen" (name read twice)

Writing good alt text

The mechanics that keep alt text useful and unobtrusive.

Do

Keep it short — a phrase, not a paragraph. Screen readers read every word.

Don't

Don't start with “Image of…” or “Icon of…”; the screen reader already says it's an image.

Do

Match the tone and terminology of the rest of the UI (“Plan”, not “BCP”).

Don't

Don't stuff keywords or repeat the surrounding caption verbatim.