ARIA：tooltip 角色

描述

Tooltips 在擁有元素獲得焦點或滑鼠懸停但頁面上又未顯示時，提供關於該元素的上下文資訊。Tooltip 會在短暫延遲後自動顯示；使用者不會主動請求它。雖然 tooltip 可以放置在任何內容上，但它們通常是工具或控制元件的提示，例如為具有簡短標籤（或完全沒有標籤，這是不便於訪問的！）的圖示提供額外內容。

Tooltip 通常會在短暫延遲（一般為一到五秒）後，響應滑鼠懸停或在擁有元素獲得鍵盤焦點後變得可見。正如它會在沒有使用者請求的情況下自動開啟一樣，它也會在焦點丟失或滑鼠移出時自動關閉。當滑鼠懸停在 tooltip 本身時，它必須保持開啟狀態，並且當用戶按下 Escape 鍵時也應該關閉。

由於 tooltip 本身永遠不會獲得焦點，並且不在可選項卡排序中，因此 tooltip 不能包含連結、輸入框或按鈕等互動式元素。

對於“i”資訊圖示 ⓘ，tooltip 角色並不適用。Tooltip 直接與擁有元素相關聯。ⓘ 並不是被詳細資訊“描述”的物件；工具或控制元件才是。

ARIA tooltip 角色的使用是對瀏覽器預設 tooltip 行為的補充。原生瀏覽器 tooltip 的一個例子是某些瀏覽器在滑鼠長按懸停時顯示元素的 title 屬性。無法透過鍵盤焦點或觸控互動來啟用此功能，這使得該功能無法訪問。如果資訊足夠重要，需要包含在 tooltip 或 title 中，請考慮將其包含在可見文字中。

具有 tooltip 角色的元素應在 tooltip 顯示之前或顯示時，透過使用 aria-describedby 進行引用。aria-describedby 屬性位於擁有元素上，而不是 tooltip 上。

從擁有元素的 aria-haspopup 屬性的角度來看，tooltip 不被視為彈出視窗，這就是我們在介紹性定義中使用“文字氣泡”的原因。

儘管 tooltip 可能會出現和消失，但由於其出現是自動的，而非使用者故意控制，因此 aria-expanded 角色不受支援。

Tooltip 的可訪問名稱可以來自其內容。雖然理論上可以來自 aria-label 或 aria-labelledby，但在大多數情況下，不建議使用 ARIA 屬性為 tooltip 提供可訪問名稱。

Tooltip 提供額外資訊，通常不與 tooltip 本身直接互動。它們通常透過將 id 引用給主元素來與它們定義的（corresponding）內容相關聯。因此，如果 tooltip 有一個顯式設定的可訪問名稱，該名稱將被公開為主元素的描述，而不是 tooltip 的內容，這意味著螢幕閱讀器使用者可能永遠無法發現 tooltip 的內容。

關聯的 WAI-ARIA 角色、狀態和屬性

作為 tooltip 容器的元素設定了 role="tooltip"。
觸發 tooltip 的元素使用 aria-describedby 引用 tooltip 元素。

鍵盤互動

Escape: 關閉 tooltip

Tooltip 應在獲得焦點或元素被懸停時出現，無需額外互動。當擁有元素的焦點丟失或滑鼠移出擁有元素和 tooltip 時，它應自動消失。雖然 tooltip 不獲得焦點，但如果已開啟，按下 Escape 鍵應關閉它。

所需的 JavaScript 功能

Tooltip 透過鍵盤焦點和焦點移除，以及滑鼠事件（滑鼠懸停和滑鼠移出）來顯示和消失。
Tooltip 永遠不會獲得焦點。焦點始終保留在擁有元素上。
可以使用 Escape 鍵隱藏 tooltip。
滑鼠懸停時 tooltip 保持開啟狀態。
Tooltip 只能透過 JavaScript 和 CSS 選擇器隱藏。如果 JavaScript 不可用，tooltip 將顯示。

示例

html

<label for="password">Password:</label>
<input aria-describedby="passwordrules" id="password" type="password" />
<div role="tooltip" id="passwordrules">
  <p>Password Rules:</p>
  <ul>
    <li>Minimum of 8 characters</li>
    <li>
      Include at least one lowercase letter, one uppercase letter, one number
      and one special character
    </li>
    <li>Unique to this website</li>
  </ul>
</div>

可以使用 CSS 來例項化 tooltip。透過 JavaScript 更改類名，當用戶按下 Escape 鍵時，可以將其更改為隱藏 tooltip 的類。

css

[role="tooltip"] {
  visibility: hidden;
  position: absolute;
  top: 2rem;
  left: 2rem;
  background: black;
  color: white;
  padding: 0.5rem;
  border-radius: 0.25rem;
  /* Give some time before hiding so mouse can exit the input
  and enter the tooltip */
  transition: visibility 0.5s;
}
[aria-describedby]:hover,
[aria-describedby]:focus {
  position: relative;
}
[aria-describedby]:hover + [role="tooltip"],
[aria-describedby]:focus + [role="tooltip"],
[role="tooltip"]:hover,
[role="tooltip"]:focus {
  visibility: visible;
}

上述程式碼在預設狀態下或透過 JavaScript 添加了 hide-tooltip 類（當用戶按下 Escape 鍵時）後，使用 CSS 隱藏了 tooltip，並具有高特異性以確保 tooltip 不顯示。當擁有元素獲得焦點時，它會被相對定位，tooltip 變得可見。我們保持 tooltip 在滑鼠懸停在 tooltip 本身時可見，這與 WCAG 1.4.13 一致。這裡，我們允許游標從輸入框移到 tooltip 而後者不會消失，透過在兩者之間等待 0.5 秒來實現；還有其他方法可以實現這一點，例如用一個透明元素填充間隙，該元素在懸停時也保持 tooltip 可見。