标签和文本替代方案

Rob Dodson

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

将元素的名称与元素的 role 结合使用后， 用户情境，以便他们了解自己正在互动的元素类型 及其在页面上的呈现方式如果名称不存在，则 屏幕阅读器只会读出元素的角色。想象一下 浏览网页时听到“按钮”或复选框“图片”无需额外付费 上下文。正因如此，标签和替代文本对实现优质、 无障碍体验

检查元素的名称

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

  1. 右键点击相应元素，然后选择检查。系统随即会打开开发者工具 元素面板。
  2. 在“元素”面板中，查找无障碍窗格。它可能被隐藏了 位于 » 符号后面。
  3. 在计算属性下拉列表中，查找名称属性。
。 <ph type="x-smartling-placeholder">
</ph>
显示按钮的计算名称的开发者工具无障碍功能窗格。
。

无论您是查看包含 alt 文本的 img，还是包含input label，所有这些场景的结果都是相同的：给出一个 元素的名称。

检查名称是否缺失

您可以通过多种方式为元素添加无障碍名称， 具体取决于其类型下表列出了最常见的元素类型 以及添加方法说明的链接。

元素类型 如何添加名称
HTML 文档 为文档和框架加标签
<frame> 或 <iframe> 元素 为文档和框架加标签
图片元素 <ph type="x-smartling-placeholder"></ph> 为图片和对象添加替代文本
<input type="image"> 个元素 <ph type="x-smartling-placeholder"></ph> 为图片和对象添加替代文本
<object> 个元素 <ph type="x-smartling-placeholder"></ph> 为图片和对象添加替代文本
按钮 标签按钮和链接
链接 标签按钮和链接
表单元素 标签表单元素

为文档和框架加标签

每个网页都应该有一个 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>

包含“Book Room”的移动版表单按钮。

图标按钮是此规则的一个常见例外情况。图标按钮可以使用 图片或图标字体来为按钮提供文本内容。例如： 使用“所见即所得”(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>.

这对于提供快捷方式列出所有 网页上的链接。如果链接中充满重复的填充文字，这些 会变得不那么实用：

<ph type="x-smartling-placeholder">
</ph> “旁白”的链接菜单中填充了“此处”一词。 <ph type="x-smartling-placeholder">
</ph> VoiceOver（适用于 macOS 的屏幕阅读器）示例，显示了按 链接菜单。

标签表单元素

将标签与表单元素（例如复选框）相关联有两种方法。 这两种方法都会使标签文字也成为以下广告的点击目标： 复选框，这对鼠标或触摸屏用户也很有帮助。要关联 带有元素的标签，可以是：

  • 将 input 元素置于标签元素内
<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 - 思考并检查评估