alt-text-design

替代文本设计

编写替代文本时，应传达视觉内容相同的信息和用途——不仅说明图像看起来是什么样，还要说明它传达了什么。

核心原则

替代文本回答的问题是：如果这张图像消失了，会丢失什么信息？这些信息就应该写入替代文本。

决策树

1. 图像是否纯属装饰？

• 背景纹理、分隔线、视觉点缀
• 在相邻文本中重复已有信息的图像
• **操作：**使用空替代文本（alt=""），让屏幕阅读器跳过它

2. 图像是否具有功能？

• 可点击的 Logo、图标按钮、图像链接
• **操作：**替代文本应描述功能，而不是图像
• 链接到主页的 Logo：alt="公司名称 — 主页"
• 搜索图标按钮：alt="搜索"
• 不要写 alt="放大镜图标"

3. 图像是否包含信息？

• 能提供额外信息的照片、插图、屏幕截图
• **操作：**描述图像传达的信息
• 受损产品的照片：alt="屏幕底边有一道裂纹"
• 不要写 alt="手机照片"或 alt="product-image-032.jpg"

4. 图像是否复杂？

• 图表、示意图、信息图、地图
• **操作：**用简短的替代文本概述关键信息，并在附近提供更详细的描述（页面文本中或链接到详细说明）
• 柱状图：alt="显示销售额增长的柱状图——详情见下方"，后面再附上数据文本摘要
• 不要只写 alt="柱状图"，也不要把整组数据都放进 alt 属性中

如何编写优质替代文本

描述具体

• 不佳："一群人"
• 良好："三位团队成员在白板前审阅原型"

传达用途，而不仅是外观

• 不佳："带数字的红色圆圈"
• 良好："3 条未读通知"

符合上下文

同一张图像在不同上下文中需要不同的替代文本：

• 在食谱页面："白碗中的成品意式烩饭，撒有帕尔马干酪和罗勒"
• 在厨具产品页面："直径为 22cm 的白色圆形陶瓷餐碗"

保持简洁

• 尽量用一句话，最多两句
• 不要以"图像显示……"或"图片显示……"开头——屏幕阅读器已经会告知用户这是图像
• 对于复杂图像：替代文本应简短，并在其他位置提供详细信息

特定内容类型

图表

• 替代文本：说明图表类型和关键结论
• 在附近提供文本摘要或数据表
• "折线图显示网站流量在 2026 年 1 月至 6 月间翻了一番。完整数据见下方表格。"

屏幕截图

• 描述屏幕截图中对读者有用的内容
• "设置面板中的通知开关已关闭"
• 不要写"设置页面的屏幕截图"

带标签的图标

• 如果图标旁有可见的文本标签，则图标属于装饰元素（alt=""）
• 如果图标是唯一的指示标记，替代文本必须传达其含义

文本图像

• 尽可能避免使用文本图像——应使用真实文本
• 如果无法避免：替代文本必须包含图像中的全部文字

评估问题

1. 每张非装饰图像是否都有有意义的替代文本？
2. 替代文本是否传达了用途，而不仅是外观？
3. 装饰图像是否标记为空替代文本？
4. 复杂图像是否同时提供了简短的替代文本和更详细的描述？
5. 使用屏幕阅读器的人能否获得与看到图像的人相同的信息？