照片的替代文字

在您的图片中添加替代文本,让您的网站更易于访问,并改善您的 SEO。

照片的替代文本在网站创建和发展过程中起着至关重要的作用。您不仅可以确保您的网站更容易被盲人或有视力障碍的人访问,而且有效的替代文本还有助于丰富您网站的搜索优化。

在本教程中,您将发现有关照片替代文本的所有内容:

  1. 决定何时使用替代文本
  2. 为单张照片指定替代文字
  3. 为 CMS 照片指定替代文本
  4. 为多照片 CMS 字段中的照片分配替代文本

注册整个无障碍课程。 

决定何时使用替代文本

当您为项目中的一张图片(或多张图片)指定替代文本时,屏幕阅读器会检测到该替代文本照片说明。通过为图片指定替代文本,您可以增强网站对盲人或有视觉障碍人士的可访问性。这对有感官处理或学习障碍的个人也有好处。

有用的信息: 屏幕阅读器是一种主要供视力障碍人士使用的辅助工具。它以口头方式传达文本、按钮、图片和其他屏幕组件,或以盲文形式呈现。 

此外,如果图片无法正确加载,或者甚至在有人选择禁用图像的浏览器中,替代文本也会出现在浏览器视口中。 

《纽约时报》的替代文本在网页加载时显示为损坏的图像上突出显示。

通过使用替代文本描述图片内容,您还可以为搜索优化成功做好准备。您向所有用户描述图片的效果越好,搜索引擎就越容易识别和解释该内容。 

在大多数情况下,设计中的大多数图片都会受益于替代文本,因为它们会向网站访问者(和搜索引擎)传达重要信息。不过,您的网站中可能有一些图片更具装饰性,不会传达任何相关重要性,因此不需要替代文本。 

突出显示装饰图像图标的示例。 

撰写相关替代文本

替代文本应描绘并传达图片的含义。有时,将其视为为新闻图片写标题的做法会很有帮助。例如,在解释图片之前,您无需添加“图片”或“图像”等术语 — 除非添加这些术语会为您所描述的内容增添重要性或含义。 

在决定何时以及如何编写替代文本时,最好始终严格评估受众及其使用设计的体验。问问自己以下问题:

  • 使用屏幕阅读器浏览页面的体验如何? 
  • 如果没有图片会发生什么改变? 
  • 如果不添加替代文本,您的用户是否会被剥夺重要内容?

在设计和开发过程中考虑这些因素不仅可以促进包容性,还可以简化您的开发过程——从概念到发布。

有效的替代文本示例

《纽约时报》一张图片的替代文字写道:“本月,长时间曝光的照片显示了堪萨斯州佛罗伦萨上空的一系列 SpaceX StarLink 卫星。”
苹果图片的替代文字提到,“AirTag 的正面和背面视图,用笑脸表情符号个性化。” 
Slack 图片的替代文字为“连接到 Slack 的 Salesforce 和 Google Drive 等应用程序的图标”。

为单张照片指定替代文字

通常,向图片添加替代文本的最可扩展且最省时的方法是在 资源面板. 每当你添加一个 图像 包含已分配 alt 文本的资产的元素, 图像 元素会继承您已分配给资产的替代文本。您可以插入 图像 元素可以按需要多次添加到您的项目中,并且该元素的每次出现都会始终从分配给所使用的资产的替代文本中提取。

要将替代文本分配给 图像 在里面 资源面板:

  1. 启动 资源面板
  2. 将鼠标悬停在 图像 要求 替代文本 
  3. 点击“齿轮”图标来揭开图片的 资产详情 情态动词
  4. 输入您的 替代文本 填写空白字段,完成后关闭资产详情模式
如果您在资产中指定替代文本 资源面板, 图像 元素会自动从其使用的资产中检索替代文本。

您还可以选择指定替代文本 图像 逐个定义资产。例如,如果您之前在 图像 在里面 资源面板,您可以用其他内容替换该替代文本:

  • 选择 图像 画布上要调整其替代文本的元素
  • 点击“齿轮”图标打开 图像设置 菜单
  • 替代文本下拉菜单 并将其修改为“自定义描述”以设置个性化替代文字,或选择“装饰性”以将图片标记为装饰性。

请记住,上述步骤只会影响 图像 元素。如果您将同一图像的新实例添加到设计中,则替代文本将默认为您之前在 资源面板.

值得注意的是: 您可以访问这些相同的 图像 元素替代文本设置来自 元素设置面板 在右侧 设计师.

您还可以将替代文本插入到 图像 在一个 富文本元素:

  • 选择 图像 在你的 富文本元素
  • 点击“扳手”图标
  • 点击替代文本下拉菜单并选择“自定义描述”来定义个性化替代文本,或选择“装饰性”将图像标记为装饰性

笔记: 如果你的 富文本元素 从中获取文本和图像 富文本字段 在一个 CMS 集合,您需要修改图片中的替代文本 富文本字段收藏品 本身。

了解有关富文本元素和富文本字段的更多信息。

在 CMS 图像上指定替代文本

让我们考虑这样一个场景:有一系列博客文章,每篇都有一张有意义的英雄图片,可以增强你的整体博客文章内容。英雄图片通过 图像字段 在你的 CMS 集合。要在每个博客文章的英雄形象上设置有意义的替代文本,您可以引入一个新的 文本域 你的 CMS 集合 专门用于添加替代文本:

  • 打开 CMS 面板
  • 鼠标悬停在您的 收藏 (例如,“博客文章”),然后点击其“齿轮”图标以打开其设置
  • 点击“添加新字段”并选择 纯文本
  • 分配一个 标签 (例如,“博客图片的替代文本”)
  • 选择“保存字段”和“保存集合”以 保存您的更新 你的 收藏
CMS 集合的“包含新字段”按钮被强调。
显示 CMS 集合的当前文本字段以说明如何附加字段以包含替代文本,并标记为“博客图像的替代文本”。

成功将替代文本字段插入到您的 收藏,确保在你的博客的每个视觉效果中制作有意义的替代文本 集合元素Collection elements:

  1. 访问您的 收藏 (例如,“博客文章”)
  2. 进入一个 Collection 元素 (例如,您的某篇博客文章)
  3. 滚动到新添加的文本字段(如“博客图片的替代文本”)并撰写描述性文字以丰富您的内容
  4. 点击 节省
CMS 收集元素的新替代文本字段被突出显示。

重复上述 4 个过程 Collection 元素 包含需要替代文本的图像。

为图片中的所有图片指定替代文本后, 集合元素Collection elements,你可以回到 设计师 并为博客文章的主要图像指定替代文本:

  1. 选择任意 图像 链接到的元素 收藏 你刚刚修改
  2. 访问 元素设置面板
  3. 勾选该选项 “从您的收藏夹名称中检索替代文本” (例如“从博客文章中检索替代文本”)
  4. 选择 文本域 你刚刚做的(例如,“博客图片的替代文本”)将新替代文本字段的详细信息链接到图片的替代文本本身
已选择画布上的 CMS 图像,并且在“设置”面板中突出显示了选择从 CMS 收集字段中提取替代文本的功能。

通过为每篇博文的主图添加新的替代文本字段,每张图片都有其独特的替代文本。随后,如果有人使用屏幕阅读器,它将利用您在每个图片中输入的信息读取每张图片的替代文本 集合元素Collection elements.

专业提示: 快速导航 集合元素Collection elements 通过按 转移 + 选项 + 左箭头或右箭头 (在 Mac 上)或 转移 + Alt + 左箭头或右箭头 (在 Windows 上)。

探索有关 Collection 元素和 Collection 字段的更多信息。

在多图像 CMS 字段中为图像分配替代文本

您可能打算合并在图像网格中显示的多幅图像,并为每张图片添加替代文本(因为每幅图像都包含重要内容)。

要将替代文本附加到多个图像:

  1. 选择您的 CMS 项目 在画布上
  2. 访问 CMS 面板 并选择您的 收藏 (例如“摄影”)
  3. 访问 CMS 项目 包含多图像字段并将鼠标悬停在图像上
  4. 单击 3 省略号并选择 “编辑替代文本”
  5. 插入您的 替代文本 在可访问领域
CMS 项目中的多图像字段突出显示了如何从悬停时出现的 3 个披露点访问替代文本设置。

确保对每个图像都重复此过程 多图像场。现在,您已将替代文本链接到 图像 元素在你的 收藏.

阅读有关多图像领域的更多信息。

就这样——继续并描述所有有意义的图像!

资源: 有关图像替代文本和屏幕阅读器的更多见解,请参阅 如何设计出色的替代文本:简介图像必须有替代文本 来自德克大学。

相关阅读:

  • 增强网站的可访问性
  • 审计小组简介
麦宜云
Ewan Mak 的最新帖子 (查看全部)