aria-labelledby

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 为交互式元素定义可访问名称。

注意：虽然在美国英语中，该属性会被假定拼写为“labeledby”，但“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>
```
在此示例中，可访问名称为“阅读更多您需要了解的 13 个 ARIA 属性”。
aria-labelledby 属性值的顺序很重要。当多个元素被 aria-labelledby 引用时，来自每个被引用元素的内容将按照它们在 aria-labelledby 值中被引用的顺序组合。如果我们写成 aria-labelledby="attr rm13">，则可访问名称将为“13 个你需要知道的 ARIA 属性阅读更多”。
aria-labelledby 属性会忽略其值中重复的 id。如果一个元素被多次引用，则只处理第一次引用。aria-labelledby="attr attr rm13 rm13"> 将被视为 aria-labelledby="attr rm13">
aria-labelledby 属性值可以包含来自甚至不可见元素的内容。虽然你应该为辅助技术用户提供与所有其他用户相同的内容，但你可以在计算的名称字符串中包含带有 HTML hidden 属性、CSS display: none 和 CSS visibility: hidden 的元素的内容。
aria-labelledby 属性包含输入元素的值。如果该值引用了一个 <input>，则表单控件的当前值将包含在计算的名称字符串中，如果值更新则也会随之更改。
aria-labelledby 属性不能被链式调用。如果一个带有 aria-labelledby 的元素引用另一个也具有 aria-labelledby 的元素，则被引用元素上的 aria-labelledby 属性将被忽略。

警告：由于计算带有 aria-labelledby 的元素的名称可能很复杂，并且会引用隐藏内容，因此使用辅助技术进行测试以确保向用户呈现预期名称非常重要。

值

ID 引用列表: 一个或多个 ID 值的空间分隔列表，用于引用标记当前元素的元素。

关联角色

几乎在所有角色中使用，**除了**那些不能由作者提供可访问名称的角色。

aria-labelledby 属性**不支持**以下元素：

规范

规范
可访问富互联网应用程序 (WAI-ARIA) # aria-labelledby

另请参阅

HTML <label> 元素
HTML <legend> 元素
HTML <caption> 元素
aria-label
aria-describedby