aria-label

aria-label 屬性定義一個字串值，用於標記互動式元素。

描述

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

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

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

html
<button aria-label="Close" onclick="myDialog.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="#000" />
  </svg>
</button>

注意：aria-label 用於互動式元素或透過其他 ARIA 宣告使其成為互動式元素的元素，前提是 DOM 中沒有可見文字用作標籤。

大多數內容都具有從其直接包裝元素的文字內容生成的可用名稱。可訪問名稱也可以由某些屬性或關聯元素建立。

預設情況下，按鈕的可訪問名稱是<button> 標記之間包含的內容，影像的可訪問名稱是其alt 屬性的內容，表單輸入的可訪問名稱是關聯的<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 內容不會在輔助技術之外顯示，因此請考慮將重要資訊顯示給所有使用者。

  • 並非所有元素都能獲得可訪問名稱。對於內聯結構角色（例如code、term和emphasis）以及未對映到可訪問性 API 的角色（包括none），都不應使用aria-label或aria-labelledby。aria-label屬性適用於包括連結、影片、表單控制元件以及具有地標角色或視窗部件角色的元素；當 DOM 中不存在可見標籤時，aria-label提供可訪問名稱。
  • 如果為<iframe>分配title，為<img>定義alt屬性，或為<input>新增<label>，則不需要aria-label。但是，如果存在aria-label屬性，它將優先於 iframe 的title、影像的alt或輸入的<label>文字，作為該元素的可訪問名稱。

值

<string>

將作為物件可訪問名稱的文字字串。

關聯介面

Element.ariaLabel

ariaLabel屬性是Element介面的一部分，它反映了aria-label屬性的值。

ElementInternals.ariaLabel

ariaLabel屬性是ElementInternals介面的一部分，它反映了aria-label屬性的值。

關聯角色

幾乎所有角色都使用，**除了**作者無法為其提供可訪問名稱的角色。

aria-label屬性**不支援**以下元素：

規範

規範
可訪問的富網際網路應用程式 (WAI-ARIA)
# aria-label

另請參閱