可访问名称

**可访问名称**是用户界面元素的名称；它是与 HTML 元素关联的文本，为辅助技术的使用者提供元素的标签。

可访问名称传达了元素的目的或意图。这有助于用户理解元素的用途以及如何与其交互。通常，元素的可访问名称应在页面中唯一。这有助于用户区分一个元素与其他元素，并帮助用户识别他们想要交互的元素。

根据元素和 HTML 标记，可访问名称的值可以从可见内容（例如，<figcaption>内的文本）或不可见内容（例如，元素上设置的aria-label属性）或两者的组合中派生。元素的可访问名称是如何确定的，是基于可访问名称计算，这对于不同的元素是不同的。

最好使用可见文本作为可访问名称。许多元素，包括<a>、<td>和<button>，可以从其内容获取其可访问名称。例如，给定<a href="foo.html">Bar</a>，此超链接的可访问名称为“Bar”。

其他元素从关联元素的内容获取其可访问名称。例如，当<fieldset>或<table>元素分别包含后代<legend>或<caption>元素时，嵌套元素为父元素提供可访问名称的关联是自动的。对于表单元素，如<textarea>和<input>，可访问名称来自关联的<label>元素。关联需要通过在<label>元素中设置for属性以匹配表单元素的id来明确定义。或者，当表单控件直接嵌套在<label>元素中时，会创建隐式关联。

对于某些元素，可访问名称来自元素的属性；例如，在<img>的情况下为alt属性。给定<img src="grape.jpg" alt="banana"/>，图像的可访问名称为“banana”。

要创建可见内容与元素或多个文本节点与元素之间的关联，可以使用aria-labeledby属性。如果没有可见文本与需要可访问名称的 UI 元素关联，可以使用aria-label属性。不应向标记内联文本的元素添加名称，例如<code>、<del>和<mark>。

许多元素，例如文本内容的部分，不需要可访问名称。所有控件都应该有可访问名称。所有传达信息且并非纯粹是演示性的图像也是如此。

辅助技术为用户提供可访问名称属性，其中包括可访问名称以及元素的角色。虽然许多元素不需要可访问名称，但需要提供可访问名称来覆盖或补充具有指定角色的元素的内容。例如，tabpanel是用户激活具有tab角色的关联元素后出现的內容部分。此角色可以设置在不需要名称的元素上，例如<div>元素。tab是控件，必须具有可访问名称。tabpanel是tab的子元素（内容部分）。向tabpanel添加aria-labelledby是一种最佳实践。