ARIA：aria-labelledby 属性

描述

aria-labelledby 属性使作者能够引用页面上的其他元素来定义一个可访问名称。这在使用不支持原生关联元素来提供可访问名称的元素时非常有用。

某些元素通过其内部内容获取其可访问名称。例如，<button>、<a> 或 <td> 的可访问名称来自其起始和结束标签之间的文本。其他元素，例如表单中的 <textarea>、<fieldset> 和 <table>，则从关联元素的内容中获取其可访问名称；对于这些元素，可访问名称分别来自带有 for 属性的 <label>、<legend> 和 <caption>。

所有交互式元素都必须有一个可访问名称。当需要使用 DOM 中其他位置的内容来定义元素的可访问名称时，可以使用 aria-labelledby 来引用其他元素。

如果没有任何可供引用的内容来创建可访问名称，则应改用 aria-label 属性。

aria-labelledby 的目的与 aria-label 相同。它为交互式元素提供了一个可识别的、可访问的名称。如果一个元素同时设置了这两个属性，则会使用 aria-labelledby。aria-labelledby 优先于所有其他提供可访问名称的方法，包括 aria-label、<label> 和元素的内部文本。

aria-labelledby 和 aria-describedby 属性都引用其他元素来计算文本替代。aria-labelledby 应引用为元素提供可访问名称的简短文本。aria-describedby 用于引用提供描述的长内容。如果 DOM 中没有提供适合交互式元素的可访问名称的简短标签的元素，请使用 aria-label 为交互式元素定义可访问名称。

注意：虽然在美国英语中，“labeled”拼写只有一个“l”，但“labelledby”的拼写已经固定下来，并且是无障碍功能 API 中使用的拼写。

以下示例使用 aria-labelledby 通过使用同级元素的文本内容，为复选框输入提供可访问名称。

html

<span
  role="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="tac"></span>
<span id="tac">I agree to the Terms and Conditions.</span>

请注意，虽然在这种情况下使用 aria-labelledby 与使用带有 for 属性的 HTML <label> 元素相似，但存在一些非常重要的区别。aria-labelledby 属性仅定义可访问名称。它不提供 <label> 的任何其他功能，例如使点击标签元素激活与之关联的输入。这需要用 JavaScript 来重新添加。

幸运的是，带有 type="checkbox" 的 HTML <input> 可以与原生的 <label> 一起使用。如果可行，请使用以下方法：

html

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions.
</label>
<p><a href="tac.html">Read our Terms and Conditions</a>.</p>

优点（和缺点）

在浏览器计算可访问名称时，aria-labelledby 属性的优先级最高。请注意，它会覆盖其他命名元素的方法，包括 aria-label、其他命名属性，甚至元素的内容。
html
```
<button aria-label="Blue" aria-labelledby="color">Red</button>
<span id="color">Yellow</span>
```
在此示例中，该可访问名称为“Yellow”。
aria-labelledby 属性的值是一个以空格分隔的 ID 引用列表，这意味着您可以将一个或多个元素组合成一个可访问名称。您可以包含元素本身的 id 来引用其自身的内容。
html
```
<h2 id="attr" class="article-title">13 ARIA attributes you need to know</h2>
<p>
  There are over 50 ARIA states and properties, but 13 of them stand out…
  <a href="13.html" id="rm13" aria-labelledby="rm13 attr">read more</a>
</p>
```
在此示例中，可访问名称为“read more 13 ARIA attributes you need to know”。
aria-labelledby 属性值的顺序很重要。当 aria-labelledby 引用多个元素时，每个被引用元素的内容会按照它们在 aria-labelledby 值中引用的顺序进行组合。如果我们写成 aria-labelledby="attr rm13">，可访问名称将是“13 ARIA attributes you need to know read more”。
aria-labelledby 属性会忽略其值中重复的 id。如果一个元素被引用多次，只有第一次引用会被处理。aria-labelledby="attr attr rm13 rm13"> 将被视为 aria-labelledby="attr rm13">。
aria-labelledby 属性值可以包含来自未显示元素的（例如，在 DOM 中但因 CSS 或 HTML 隐藏属性而不可见的元素）内容。虽然您应该为辅助技术用户提供与所有其他用户相同的内容，但您可以包含来自具有 HTML hidden 属性、CSS display: none 和 CSS visibility: hidden 的元素的内容到计算出的名称字符串中。
aria-labelledby 属性会合并输入元素的值。如果该值引用了一个 <input>，则表单控件的当前值将包含在计算出的名称字符串中，并且在值更新时会随之更改。
aria-labelledby 属性不能链式调用。如果一个带有 aria-labelledby 的元素引用了另一个也带有 aria-labelledby 的元素，则被引用元素上的 aria-labelledby 属性将被忽略。