ARIA: aria-label 屬性

描述

有時，元素的預設可訪問名稱缺失，或者可訪問名稱不能準確描述元素的內容，並且 DOM 中沒有可見的內容可以與該物件關聯以賦予其含義。這類元素的常見示例是包含 SVG 圖示但沒有文字的按鈕。

在不屬於禁止列表、沒有可訪問名稱或可訪問名稱不準確，並且 DOM 中沒有可以透過 aria-labelledby 屬性引用的可見內容的情況下，可以使用 aria-label 屬性來定義一個字串，該字串用於為設定了該屬性的互動式元素提供標籤。這為該元素提供了一個可訪問名稱。

下面的程式碼展示瞭如何使用 aria-label 屬性為 <button> 元素提供可訪問名稱。本例中的按鈕包含一個 SVG 圖形並且缺少文字內容，這使得 aria-label 對於螢幕閱讀器使用者理解其功能（在本例中是“關閉”）至關重要。

html

<button aria-label="Close">
  <svg
    aria-hidden="true"
    focusable="false"
    width="17"
    height="17"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z"
      fill="black" />
  </svg>
</button>

document.querySelector("button").addEventListener("click", () => {
  myDialog.close();
});

注意： aria-label 用於命名隱式或顯式角色不允許命名的元素。如果存在可供元素引用並從中獲取名稱的可見標籤，則強烈建議優先使用 aria-labelledby 而非 aria-label。

大多數內容的可訪問名稱由其直接包含元素文字內容生成。可訪問名稱也可以透過某些屬性或關聯元素建立。

預設情況下，按鈕的可訪問名稱是開口和閉合的 <button> 標籤之間的內容，影像的可訪問名稱是其 alt 屬性的內容，表單輸入的 <label> 元素的可訪問名稱是關聯的 <label> 元素的內容。

如果以上選項均不可用，或者預設可訪問名稱不合適，請使用 aria-label 屬性為元素定義可訪問名稱。

注意： 雖然 aria-label 可用於任何可以具有可訪問名稱的元素，但實際上它僅支援互動式元素、部件、地標、影像和 iframe。

使用 aria-label 時，您還需要考慮 aria-labelledby。

aria-label 可用於無法看到可用於標記元素的文字的情況。如果存在可見的文字來標記元素，請改用 aria-labelledby。
aria-label 的目的與 aria-labelledby 相同。兩者都為元素提供可訪問名稱。如果您無法引用可見名稱，可以使用 aria-label 為使用者提供可識別的可訪問名稱。如果 DOM 中存在標籤文字且有可能引用它以獲得可接受的使用者體驗，請優先使用 aria-labelledby。不要在同一元素上同時使用兩者，因為如果同時應用，aria-labelledby 將優先於 aria-label。

在使用 aria-label 時，請牢記以下附加準則：

aria-label 屬性可與常規的、語義化的 HTML 元素一起使用；它不限於已分配 ARIA role 的元素。
不要“過度使用” aria-label。請記住，它主要用於輔助技術。要提供額外的說明或澄清 UI，請使用可見文字配合 aria-describedby 或 aria-description，而不是 aria-label。說明應該對所有使用者可見，而不僅僅是對螢幕閱讀器使用者（或者最好是讓您的 UI 更直觀）。

注意： 由於 aria-label 的內容在輔助技術之外不顯示，請考慮為所有使用者提供可見的重要資訊。
並非所有元素都可以提供可訪問名稱。aria-label 和 aria-labelledby 都不應與內聯結構角色（如 code、term 和 emphasis）以及未對映到輔助功能 API 的角色（包括 none）一起使用。aria-label 屬性適用於連結、影片、表單控制元件以及具有地標角色或部件角色的元素；當 DOM 中沒有可見標籤時，aria-label 提供可訪問名稱。
如果您為 <iframe> 分配了 title，為 <img> 定義了 alt 屬性，或為 <input> 添加了 <label>，則不需要 aria-label。但是，如果存在 aria-label 屬性，它將優先於 iframe 的 title、影像的 alt 或輸入的 <label> 文字，作為該元素的可訪問名稱。