标签和文本替代方案

Rob Dodson

为了让屏幕阅读器向用户提供语音界面，有意义的元素必须具有适当的标签或替代文本。标签或文本替代项可为元素提供无障碍名称，这是在无障碍功能树中表达元素语义的关键属性之一。

将某个元素的名称与该元素的“角色”结合使用，可为用户提供背景信息，以便用户了解自己正在与哪种类型的元素互动以及该元素在页面上的呈现方式。如果名称不存在，屏幕阅读器仅会读出该元素的角色。想象一下，您在尝试浏览网页时听到的却是“按钮”“复选框”“图片”，而没有任何其他背景信息。因此，标签和文本替代选项对于打造易于访问的良好体验至关重要。

检查元素的名称

使用 Chrome 的开发者工具可以轻松检查元素的无障碍名称：

  1. 右键点击相应元素，然后选择检查。系统随即会打开开发者工具的“元素”面板。
  2. 在“元素”面板中，找到无障碍窗格。它可能隐藏在 » 符号后面。
  3. 在计算属性下拉列表中，查找名称属性。
开发者工具的无障碍功能窗格，显示按钮计算出的名称。

无论您是查看包含 alt 文本的 img，还是包含 label 的 input，所有这些场景都会产生相同的结果：为元素指定无障碍名称。

检查是否缺少名称

您可以通过多种不同的方式向元素添加无障碍名称，具体取决于元素的类型。下表列出了需要无障碍名称的最常见元素类型，以及有关如何添加这些元素的说明链接。

元素类型 如何添加名称
HTML 文档 为文档和帧添加标签
<frame> 或 <iframe> 元素 为文档和帧添加标签
图片元素 为图片和对象添加替代文字
<input type="image"> 元素 为图片和对象添加替代文字
<object> 元素 为图片和对象添加替代文字
按钮 标签按钮和链接
链接 标签按钮和链接
表单元素 为表单元素添加标签

为文档和框架添加标签

每个页面都应包含一个 title 元素，用于简要说明页面的内容。title 元素为页面指定无障碍名称。当屏幕阅读器进入页面时，这是首先播报的文本。

例如，以下网页的标题是“小丽的枫木吧快速烘焙食谱”：

<!doctype html>
  <html lang="en">
    <head>
      <title>Mary's Maple Bar Fast-Baking Recipe</title>
    </head>
  <body>
    …
  </body>
</html>

同样，任何 frame 或 iframe 元素都应具有 title 属性：

<iframe title="An interactive map of San Francisco" src="…"></iframe>

虽然 iframe 的内容可能包含自己的内部 title 元素，但屏幕阅读器通常会在帧边界处停止，并读出该元素的角色（“frame”）及其可访问名称（由 title 属性提供）。这可让用户决定是要进入帧还是绕过该帧。

为图片和对象添加替代文字

img 应始终附带 alt 属性，以便为图片指定可访问的名称。如果图片加载失败，系统会将 alt 文本用作占位符，以便用户了解图片要传达什么内容。

编写良好的 alt 文本像是一门艺术，但您可以遵循一些准则：

  1. 确定图片是否提供了通过阅读周围文本难以获得的内容。
  2. 如果是，请尽可能简洁地传达内容。

如果图片用作装饰，并且不提供任何实用内容，则可以为其提供空的 alt="" 属性，以将其从无障碍功能树中移除。

封装在链接中的图片应使用 img 的 alt 属性来描述用户点击链接后将进入的位置：

<a href="https://en.wikipedia.org/wiki/Google">
  <img alt="Google's wikipedia page" src="google-logo.jpg">
</a>

同样，如果使用 <input type="image"> 元素创建图片按钮，则应包含 alt 文本，用于描述用户点击该按钮时发生的操作：

<form>
  <label>
    Username:
    <input type="text">
  </label>
  <input type="image" alt="Sign in" src="./sign-in-button.png">
</form>

嵌入式对象

<object> 元素（通常用于 Flash、PDF 或 ActiveX 等嵌入）也应包含替代文本。与图片类似，如果元素无法渲染，系统会显示此文本。替代文本像常规文本一样放在 object 元素内，例如下面的“年度报告”：

<object type="application/pdf" data="/report.pdf">
Annual report.
</object>

按钮和链接通常对网站的体验至关重要，因此两者必须有良好的无障碍名称，这一点非常重要。

按钮

button 元素始终会尝试使用其文本内容计算其可访问名称。对于不属于 form 的按钮，您只需编写明确的操作，因为文本内容可能就足以创建一个良好的无障碍名称。

<button>Book Room</button>

一个带有“预订房间”按钮的移动设备表单。

此规则的一个常见例外情况是图标按钮。图标按钮可以使用图片或图标字体来提供按钮的文本内容。例如，“所见即所得”(WYSIWYG) 编辑器中用于设置文本格式的按钮通常只是图形符号：

左对齐图标按钮。

使用图标按钮时，不妨使用 aria-label 属性为这些按钮指定一个易于访问的显式名称。aria-label 会替换按钮内的任何文本内容，以便您向使用屏幕阅读器的任何人清晰说明操作。

<button aria-label="Left align"></button>

与按钮类似，链接的无障碍名称主要来自其文本内容。在创建链接时，有个小窍门就是将最有意义的一段文字放入链接本身，而不要像“此处”或“了解详情”这样的填充词。

描述性不足
Check out our guide to web performance <a href="/guide">here</a>.
内容很有用！
Check out <a href="/guide">our guide to web performance</a>.

这对于提供用于列出页面上所有链接的快捷方式的屏幕阅读器尤其有用。如果链接充满重复的填充文字，那么以下快捷键的用处会大大降低：

VoiceOver 的链接菜单中，填充了“here”一词。
VoiceOver 示例，这是一款适用于 macOS 的屏幕阅读器，显示了“通过链接导航”菜单。

为表单元素添加标签

您可以通过两种方式将标签与表单元素（如复选框）相关联。这两种方法都会导致标签文本也成为复选框的点击目标，这对鼠标或触摸屏用户也很有用。如需将标签与元素相关联，请执行以下任一操作：

  • 将 input 元素放在 label 元素内
<label>
  <input type="checkbox">Receive promotional offers?</input>
</label>
  • 或者，使用标签的 for 属性并引用元素的 id
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>

正确标记复选框后，屏幕阅读器就可以报告该元素的角色为复选框，处于选中状态，并且名为“接收促销优惠？”，如下面的 VoiceOver 示例所示：

显示“是否接收促销优惠？”的 VoiceOver 文本输出内容

TODO：DevSite - 思考并检查评估