ARIA：工具提示角色

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

工具提示通常會在滑鼠懸停後的一兩秒延遲後變得可見，或者在擁有元素收到鍵盤焦點後。就像它是在沒有使用者請求的情況下自動開啟的一樣，它也會在失去焦點或滑鼠移出時自動關閉。當滑鼠移到工具提示本身時，它必須保持開啟狀態，並且還應該在使用者按下 Escape 鍵時關閉。

由於工具提示本身永遠不會收到焦點，也不在選項卡順序中，因此工具提示不能包含互動式元素，例如連結、輸入或按鈕。

工具提示不是“i”圖示ⓘ的更詳細資訊的合適角色。工具提示與擁有元素直接相關。ⓘ 不是“由”詳細的資訊“描述”的；工具或控制元件是。

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

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

在擁有元素上的 aria-haspopup 屬性方面，工具提示不被認為是彈出視窗，這就是我們在介紹性定義中使用“文字氣泡”的原因。

雖然工具提示可能會出現和消失，但由於它的出現是自動的，而不是由使用者有意控制的，因此不支援 aria-expanded 角色。

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

工具提示提供額外資訊，通常不會對工具提示本身進行直接互動。它們通常透過 aria-describedby 與其定義的內容關聯，該屬性與主元素的 id 相連。因此，如果工具提示顯式設定了可訪問名稱，則該名稱將作為主元素的描述公開，而不是工具提示的內容，這意味著螢幕閱讀器使用者可能永遠無法發現工具提示內容。

• 用作工具提示容器的元素設定了 role="tooltip"。
• 觸發工具提示的元素使用 aria-describedby 引用工具提示元素。

Escape

關閉工具提示

工具提示應該在獲得焦點或元素懸停時出現，無需額外互動。當擁有元素的焦點丟失或滑鼠移出擁有元素和工具提示時，它應該自動消失。雖然工具提示不會獲得焦點，但如果工具提示已開啟，則 Escape 應該將其關閉。

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

<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 例項化工具提示。使用 JavaScript 將類名更改為一個隱藏工具提示的類（當用戶按下 Escape 鍵時）。

[role="tooltip"],
.hidetooltip.hidetooltip.hidetooltip + [role="tooltip"] {
  visibility: hidden;
  position: absolute;
  top: 2rem;
  left: 2rem;
  background: black;
  color: white;
}
[aria-describedby]:hover,
[aria-describedby]:focus {
  position: relative;
}
[aria-describedby]:hover + [role="tooltip"],
[aria-describedby]:focus + [role="tooltip"] {
  visibility: visible;
}

以上程式碼使用 CSS 在預設狀態或如果使用 JavaScript 添加了 hidetooltip 類（當用戶按下 Escape 鍵時）隱藏工具提示，具有很高的特異性以確保工具提示不會顯示。當擁有元素獲得焦點時，它將獲得相對定位，並且工具提示將變得可見。

如果資訊足夠重要到需要使用工具提示，那麼它是否也足夠重要到需要始終可見？

工具提示在懸停時必須保持開啟狀態，即使這在技術上意味著滑鼠移出了擁有元素。由於在懸停時出現的內容可能難以或無法感知（如果使用者需要將滑鼠指標保持在觸發器上），WCAG 1.4.13 規定，可見的內容應該是持久的，這意味著它不應該在沒有使用者操作的情況下消失。

請考慮撰寫清晰、簡潔且始終可見的描述，而不是使用工具提示隱藏重要資訊。如果您有空間，請不要使用工具提示或切換提示。只需提供清晰的標籤和足夠的正文內容。

• dialog 角色
• CSS：:focus 偽類
• 工具提示和切換提示 由 Heydon Pickering 撰寫
• 理解 SC 1.4.13：懸停或聚焦時的內容（WCAG AA 級別）