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