Alt Text
替代文本
Aliases:替代文本图片描述图说alt 文本图片替代文本alt text
What is it
A text alternative for every image: informative images convey the same information, decorative images get empty alt so readers skip them, functional images describe the action rather than the pixels. Screen-reader users, users on failed image loads and search engines all lean on this one line.
Name disambiguation
Alt text is the image's text alternative; a tooltip is a pointer-hover add-on — the former serves screen readers and failed loads, the latter only sighted pointer users.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Images that carry information — charts, illustrations, QR codes
- Semantic content — avatars, product shots, article figures
- When an image is the sole content of a link or button
✕ When not to use
- Writing "image" / "图片" for decorative texture or dividers
- Stuffing essays into alt — use a visible caption or aria-describedby
- Re-reading text that the adjacent copy already states
Variants
Informative
信息型
Conveys the image's information — e.g. "March sales up 18% month over month"
Decorative
装饰型
alt="" so readers skip it without noise
Functional
功能型
Describes the action — "Close", not "grey X icon"
Implementation
altaria-labelrole="presentation"Always set alt on <img>. Purely decorative images take alt="" (or role="presentation" + aria-hidden) — omitting the attribute makes readers speak the filename. Icon-only buttons get aria-label or visible text, never icon-font pseudo-element text. Keep text in images out of the bitmap when possible; complex charts point aria-describedby at a long description.
Platform API
altaria-labelrole="presentation"In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| WCAG | 1.1.1 Non-text Content |
| W3C WAI | Images Tutorial |
Related concepts
A small round or rounded-square image representing a user or organisation: photo, initials or an icon placeholder. Appears with names in navs, comments and member lists; can carry a status dot or stack several people together.
ComponentsUsed withA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsUsed withWhen a list or page has no data, don't leave a void — fill it with an illustration, one sentence of explanation and a clear next action. It solves the "blank screen" problem where users can't tell what happened or what to do next, turning dead space into a starting point: onboarding for first use, a way out for fruitless searches.
PatternsUsed withNot to be confused with
tooltip is hover-only supplementary text; alt text is the image's required accessible stand-in.