使用替换文字和描述性文本
学习目标
完成本单元后，您将能够：
- 了解何时使用描述性文本。
- 总结如何将替换 (alt) 文字与描述性文本结合使用。
让我们来看几种类型的图像，然后为它们创建替换和描述性文本。如果建议的文本不是您认为的最佳选择，不要感到沮丧。请记住，学习创建有效的替换文字和描述性文本需要时间，而且没有唯一的正确答案。请将重点放在用您认为最合适的词语为屏幕阅读器用户清晰简洁地总结图像的含义。
示例 1：装饰性图像：页脚
因为装饰性图像并不会给内容增加意义，所以将替换文字设置为空字符串：alt=“”，并且不包含描述性文本。
示例 2：信息性图像：图标
图标在内容中相当常见，而且几乎总是提供信息。
在您的内容中描述图标时，请包含标识图标及其功能的描述性文本和空的 alt 属性以避免冗余。如果提供的替换文字没有描述性文本，屏幕阅读器用户可能会比其他用户获得更好的体验。如果无法添加描述性文本，请确保图标清晰易懂、足够大以便于查看，并且具有提供图标名称和功能的替换文字。
以下示例涉及作为页面内容一部分的搜索图标，而不是页面上的活动元素，例如页脚中的可选社交媒体图标。以下描述性文本和替换文字变体提供了不同层次的含义：
搜索图标的替换文字变体
| 描述性文本 | 替换文字 | 用户体验 |
|---|---|---|
|
选择 |
alt=“搜索” |
差：为非屏幕阅读器用户提供了极少含义。 |
|
选择图标 |
alt=“” |
差：没有给屏幕阅读器用户提供信息 |
|
选择放大镜搜索图标 |
alt=“搜索图标” |
差：冗余 |
|
选择放大镜搜索图标 |
alt=“” |
较好 |
|
选择 |
alt=“放大镜” |
较好 |
。
。
。示例 3：信息性图像：复杂图像
这张 Salesforce Customer 360 产品时钟的图片非常详尽。图像的含义可能无法用 125 个字符充分概括，而这正是建议的替换文字字符上限。因此，需要同时使用描述性文本和替换文字来为屏幕阅读器用户提供足够的信息。
以下是此图片替换文字的一些示例。
Salesforce Customer 360 平台图像的替换文字变体
| 描述性文本 | 替换文字 | 用户体验 |
|---|---|---|
|
不适用 |
alt=“Salesforce Customer 360 平台” |
差 |
|
不适用 |
alt=“Salesforce 以客户为中心的产品列表” |
差 |
|
Salesforce 360 包括销售、服务、市场营销、商务、应用程序、分析、集成、员工体验、Trailblazer 和再培训、行业、合作伙伴以及 AI 和客户成功。 |
alt=“Salesforce Customer 360 平台” |
较好 |
|
Salesforce 360 平台代表了在一个平台上予以支持的整个 Salesforce 产品套件，以集中式人工智能和客户为中心。通过连接 Salesforce 产品，各公司可以针对每个客户创建一个跨销售、服务、市场营销、商务、应用程序、分析、集成应用程序、数据和设备的、员工体验以及教育和再培训的统一视图。Salesforce 产品的强大功能适用于各个行业和合作伙伴。 |
alt=“一个圆圈，外侧包含 Salesforce 产品徽标、行业和合作伙伴，围绕着中间的 Einstein AI 和客户。” |
最佳 |
示例 4：信息性图像：具有突出显示区域的用户界面屏幕截图
现在让我们来看一个屏幕截图示例，看看要在替换文字和描述性文本中包含哪些信息。确保将重点放在与图像周围信息的上下文相关的细节上。
在描述性文本中包含有关特性、功能或任务的信息。然后使用替换文字来描述图形的其他重要细节，这些细节与任务无关，但屏幕阅读器用户会需要。
下面这个例子来自“在 Studio 中配置 Private Cloud Edition”帮助文档，步骤 7 的屏幕截图中包含一个标注，应在描述性文本中对其进行说明。如果有带编号的标注，则描述性文本将包含一个列表，并用相应的数字描述所有标注。
执行以下步骤将您的 Studio 安装与 Private Cloud Edition (PCE) 部署中的 Anypoint Platform 组件集成：
- 在 Anypoint Studio 显示屏顶部的任务栏中，选择 Anypoint Studio >首选项。
- 选择 Anypoint Studio > Anypoint Platform。
- 选择使用 Private Cloud Edition (PCE) 实例复选框。
- 在 Private Cloud 实例 URL 字段输入您的 PCE 安装 URL。
在此例中，图像前面的描述性文本包含用户完成任务所需的所有相关信息，但该屏幕截图还包含一个屏幕阅读器用户看不到的示例 URL。
Anypoint Studio 文档屏幕截图的替换文字变体
| 替换文字 | 用户体验 |
|---|---|
|
alt=“Anypoint Studio UI” |
差：未提供有用信息 |
|
alt=“Studio 首选项页面” |
差：未提供有用信息 |
|
alt=“Private Cloud 实例 URL 字段包含 https://anypoint.mulesoft.com/。” |
较好：信息性 |
示例 5：信息性图像：带文本的图像
尽可能避免使用带有文本的图像。图片文本无法被搜索引擎或辅助技术读取，并且会因放大而变得模糊。如果必须包含带有文本的图像而不仅仅是为了视觉效果，请将图像中的所有文本逐字包含在替换文字或描述性文本中。
如果图像仅包含文本，则这些文本通常可以直接用作替换文字。
如果图像中的文字已包含在描述性文本中，则不要在替换文字中重复。在这种情况下，使用替换文字来包含图像中提供且并未在周围的文本中加以描述的含义。如果图像不包含其他含义，请指定一个空的替换文字值。
下图是一个有趣的示例，因为它包含不止一种文本样式。在这种情况下，除了替换文字之外，还需要描述性文本来传达图像的完整含义。
带有文本的 Salesforce Marketing 图像的替换文字变体
| 描述性文本 | 替换文字 | 用户体验 |
|---|---|---|
|
不适用 |
alt=“两个人与 Salesforce 吉祥物 Astro 手牵手。” |
差：替换文字没有传达图像的目的，即表明 Salesforce 连接客户和公司。 |
|
Salesforce 将人们联系起来。 |
alt=“一位商人、Salesforce 吉祥物 Astro 和一位穿着便装的女士站在一起。” |
差：描述性文本和替换文字均未准确再现图像的文本。 |
|
在 Salesforce，我们将公司和客户联系在一起。 |
alt=“一位商人、Salesforce 吉祥物 Astro 和一位客户手拉手站在一起，表明 Salesforce 让企业和客户相联合。” |
差：替换文字冗长生硬。还超过了建议的长度。 |
|
在 Salesforce，我们将公司和客户联系在一起。 |
alt=“Salesforce 吉祥物 Astro 站在一名商人和一位客户之间，和他俩手牵手。 |
较好：描述性文本和替换文字相结合，在上下文中传达出图像的完整含义。 |
示例 6：信息性图像：图片链接
当图像是链接中的唯一内容时，使用替换文字提供链接的目标，而不是图像的视觉内容。链接目标是屏幕阅读器用户需要听到的内容。
图像链接可以附有描述性文本，但不是必须的。
例如，Salesforce 徽标可用作 Salesforce 产品概述页面的链接，网址为 https://www.salesforce.com/form/demo/salesforce-products/。
如果没有可供选择的链接文本来激活链接，则必须包含提供链接目标的替换文字。如果没有链接文本或替换文字，屏幕阅读器会说出“链接”一词或链接目标的实际 URL，这无法让用户理解链接目标的内容。
此图像链接的替换文字将设置为：alt=“Salesforce 产品概述页面”。
如果提供了充分描述链接目标的链接文本，并且图像本身不传达任何其他有意义的信息，则使用空的替换文字值来避免冗余和重复。例如：
alt=""
此外，请考虑链接在被选中时是否会打开一个新的浏览器选项卡 (target=”_blank”)。在这种情况下，务必要让用户知道链接将在新窗口中打开。为此，请在链接标签文本后使用一个表示新窗口的图标，并指定 alt=“（在新窗口中打开）”。
例如：
Salesforce 产品概述页面 
alt=“（在新窗口中打开）”。
让我们总结一下
很棒——您现在已经为各种图像创建了替换文字和描述性文本！虽然此处并未详尽列出您可能遇到的所有图像类型，但您在本单元中学到的一般原则可以帮助您为任何类型的图像创建有效的替换文字和描述性文本。
资源
- W3C：页面结构概念
- WebAIM：替换文字
- 国家无障碍媒体中心 PDG：在数字有声书籍中描述科学内容的有效实践
