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 屬性將被忽略。