为了让屏幕阅读器向用户提供语音界面，有意义的元素必须具有适当的标签或替代文本。标签或文本替代项可为元素提供无障碍名称，这是在无障碍功能树中表达元素语义的关键属性之一。
将元素的名称与元素的角色组合使用时，可以为用户提供上下文，以便他们了解自己正在与哪种类型的元素互动，以及该元素在页面上的表示方式。如果名称不存在，屏幕阅读器只会读出相应元素的角色。假设您在尝试浏览网页时，听到“按钮”“复选框”“图片”等字词，但没有任何其他背景信息。因此，标签和文字替代项对于提供良好的无障碍体验至关重要。
检查元素的名称
您可以轻松使用 Chrome 的开发者工具检查元素的无障碍名称：
- 右键点击相应元素，然后选择检查。此时，DevTools 的“Elements”面板会打开。
- 在“元素”面板中，找到无障碍窗格。它可能隐藏在
»符号后面。 - 在计算属性下拉列表中，查找名称属性。
无论您是查看带有 alt 文本的 img，还是带有 label 的 input，所有这些场景都会产生相同的结果：为元素指定无障碍名称。
检查名称是否缺失
您可以通过多种不同的方式为元素添加无障碍名称，具体取决于元素的类型。下表列出了需要无障碍名称的最常见元素类型，以及指向有关如何添加这些名称的说明的链接。
| 元素类型 | 如何添加名称 |
|---|---|
| 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>
同样，任何 frame 或 iframe 元素都应具有 title 属性：
<iframe title="An interactive map of San Francisco" src="…"></iframe>
虽然 iframe 的内容可能包含自己的内部 title 元素，但屏幕阅读器通常会停在框架边界处，并读出元素的角色（即“框架”）及其可访问名称（由 title 属性提供）。这可让用户决定是进入帧还是绕过帧。
为图片和对象添加替代文本
img 应始终与 alt 属性搭配使用，以便为图片提供无障碍名称。如果图片加载失败，alt 文本将用作占位符，以便用户了解图片想要传达的内容。
编写优质的 alt 文本是一门学问，但您可以遵循以下几条准则：
- 确定图片是否提供通过阅读周围文字难以获得的内容。
- 如果是，请尽可能简洁地传达内容。
如果图片仅起装饰作用，且不提供任何实用内容，您可以为其提供一个空的 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>.
这对于提供列出页面上所有链接的快捷方式的屏幕阅读器来说尤其有用。如果链接充斥着重复的填充文字，这些快捷方式的实用性会大大降低：
标签表单元素
将标签与表单元素（例如复选框）关联有两种方法。 无论采用哪一种方法，都会使标签文本同时成为复选框的点击目标，这对鼠标或触摸屏用户同样有帮助。如需将标签与元素关联，请执行以下任一操作：
- 将 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 示例所示：
TODO：DevSite - 思考和检查评估