标签和文本替代方案

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

将元素的名称与元素的角色组合使用时,可以为用户提供上下文,以便他们了解自己正在与哪种类型的元素互动,以及该元素在页面上的表示方式。如果名称不存在,屏幕阅读器只会读出相应元素的角色。假设您在尝试浏览网页时,听到“按钮”“复选框”“图片”等字词,但没有任何其他背景信息。正因如此,标签和替代文本对于提供良好的无障碍体验至关重要。

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

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

无论您是查看带有 alt 文本的 img,还是带有 labelinput,所有这些场景都会产生相同的结果:为元素指定无障碍名称。

检查是否缺少姓名

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

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

为文档和框架加标签

每个网页都应包含 title 元素,用于简要说明该网页的内容。title 元素为页面提供无障碍名称。当屏幕阅读器进入页面时,这是系统读出的第一个文本。

例如,以下网页的标题为“Mary 的枫糖条快速烘焙食谱”:

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

同样,任何 frameiframe 元素都应具有 title 属性:

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

虽然 iframe 的内容可能包含自己的内部 title 元素,但屏幕阅读器通常会在框架边界处停止,并读出元素的角色(“框架”)以及 title 属性提供的可访问名称。这样,用户就可以决定是否要进入框架或绕过框架。

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

img 应始终与 alt 属性搭配使用,以便为图片提供无障碍名称。如果图片加载失败,系统会将 alt 文本用作占位符,以便用户了解图片想要传达的内容。

编写优质的 alt 文本是一门学问,但您可以遵循以下几条准则:

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

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

封装在链接中的图片应使用 imgalt 属性来描述用户点击链接后会转到何处:

<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>.

这对于提供快捷方式来列出网页上所有链接的屏幕阅读器尤为有用。如果链接充斥着重复的填充文字,这些快捷方式的实用性会大大降低:

语音朗读的链接菜单中填充了“此处”一词。
MacOS 屏幕阅读器 VoiceOver 示例,显示“按链接导航”菜单。

标签表单元素

将标签与表单元素(例如复选框)关联有两种方法。 无论采用哪一种方法,都会使标签文本同时成为复选框的点击目标,这对鼠标或触摸屏用户同样有帮助。如需将标签与元素关联,请执行以下任一操作:

  • 将 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>

正确标示复选框后,屏幕阅读器便可报告元素角色为 checkbox,处于 checked 状态,名称为“Receive promotional offers?”,如下面的 VoiceOver 示例所示:

VoiceOver 文本输出,显示“Receive promotional offers?”

TODO:DevSite - 思考和检查评估