可访问名称

可访问名称是用户界面元素的名称；它是与 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-labelledby属性。如果没有可见文本可与需要可访问名称的 UI 元素关联，可以使用aria-label属性。不应将名称添加到标记内联文本的元素中，例如<code>、<del>和<mark>。

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

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