ARIA：aria-describedby 屬性

描述

aria-describedby 屬性列出了描述該物件的元素的 id。它用於在控制元件或控制元件組與其描述文字之間建立關聯。

aria-describedby 屬性不限於表單控制元件。它還可以用於將靜態文字與控制元件、元素組、帶有標題的區域、定義等關聯起來。aria-describedby 屬性可用於語義化 HTML 元素以及具有 ARIA role 的元素。

aria-describedby 屬性與 aria-labelledby 屬性非常相似。雖然 aria-labelledby 列出了描述物件本質的標籤或元素的 id，但 aria-describedby 列出了提供使用者可能需要的更多資訊的描述或元素的 id。aria-labelledby 和 aria-describedby 都引用其他元素來計算文字替代，但標籤應該是簡潔的，而描述旨在提供更詳細的資訊；標籤描述物件的本質，而描述提供使用者可能需要的更多資訊。

透過 aria-describedby 連結的元素不需要可見。即使元素隱藏，也可以引用它。例如，表單控制元件可以有一個預設隱藏的描述，透過“更多資訊”圖示等披露控制元件在請求時顯示。視力使用者點選圖示檢視描述，而輔助技術使用者可以立即訪問它，因為描述已透過 aria-describedby 從該表單控制元件引用。

當關聯內容包含純文字時，aria-describedby 屬性是合適的。如果內容很長、包含有用的語義或具有需要使用者導航的複雜結構，請改用 aria-details。aria-details 允許輔助技術使用者訪問關聯的結構化內容，並提供額外的導航命令，從而更容易理解結構或以小片段的形式體驗資訊。

注意： aria-describedby 內容應僅為文字字串。如果內容中存在重要的底層語義，請考慮使用 aria-details。

示例

html

<button aria-describedby="trash-desc">Move to trash</button>
…
<p id="trash-desc">
  Items in the trash will be permanently removed after 30 days.
</p>

注意： aria-describedby 屬性並非設計用於引用外部資源的描述。由於其值是一個或多個 id（如果多個則以空格分隔），因此它必須引用同一 DOM 文件中的元素。