替代文本
Alt Text
别名:替代文本图片描述图说alt 文本图片替代文本alt text
这是什么
给图片写一句文本替代：信息图传达同样的信息，装饰图写空 alt 让读屏跳过，功能图描述动作而非画面。读屏用户、图片加载失败的用户和搜索引擎都靠这句话理解图在说什么。
名词辨析
alt 文本是图片的文本替代，tooltip 是指针悬停的补充说明——前者服务读屏与图片失效场景，后者只服务看得见的指针用户。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 承载信息的图片、图表、插画、二维码
- 头像、商品图、文章配图等语义内容
- 图片是链接或按钮的唯一内容时
✕ 不适用场景
- 给装饰性纹理、分隔线写「图片」「image」占位
- 把长篇说明塞进 alt（应配 visible caption 或 aria-describedby）
- 相邻文字已完整描述时再把同一句念一遍
常见形式
信息型
Informative
传达图片信息本身，如「3 月销量环比上涨 18%」
装饰型
Decorative
alt="" 让读屏直接跳过，不留噪音
功能型
Functional
描述动作：「关闭」而不是「灰色叉号图标」
实现要点
altaria-labelrole="presentation"永远给 <img> 写 alt 属性；纯装饰用 alt=""（或 role="presentation" + aria-hidden），不要省略属性——省略会让读屏念出文件名。图标按钮用 aria-label 或可见文字，不要依赖图标字体的伪元素文本。图内文字尽量搬到 HTML；复杂图表配 aria-describedby 指向长描述。
平台 API
altaria-labelrole="presentation"代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| WCAG | 1.1.1 Non-text Content |
| W3C WAI | Images Tutorial |
相关概念
容易混淆
工具提示Tooltip
tooltip 是悬停才出现的补充说明，替代文本是图片本身无障碍必需的文本替身。