Tooltip
Demo 與 Accessibility Tree
Accessibility Tree
觀察對象：觸發按鈕。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：提示本身。 下列是操作之後會量到的值。
- Role
- tooltip
- Status
- （無狀態）
- Name
- 至少 12 個字元，且不能與前三次使用過的密碼相同。
- Description
- （無 accessible description）
鍵盤操作
| 按鍵 | 行為 |
|---|---|
| Tab | 移到觸發元素上即顯示提示；移開即關閉。觸發元素必須本身可聚焦，否則鍵盤使用者永遠看不到這段說明。 |
| Esc | 關閉提示，但焦點留在觸發元素上。提示蓋住了下方的內容時，使用者需要一個關掉它的方法。 |
| （無） | 提示本身不接收焦點，Tab 不會進到裡面。需要操作的內容放進提示，鍵盤使用者就到不了 —— 那種情況該用 Dialog。 |
ARIA 屬性
| 屬性 | 值 | 用途 |
|---|---|---|
role | tooltip | 提示內容的容器。 |
aria-describedby | 提示元素的 id | 掛在觸發元素上，不是掛在提示上。提示在無障礙樹中不獨立存在 —— 它是附加在那個按鈕上的說明，所以面板觀察的是按鈕，Description 會變成提示的內容。 |
（時機） | 只在顯示時指向 | 提示隱藏時不輸出 aria-describedby。指向一個不存在的 id，無障礙名稱計算會拿到空字串，比沒有更糟。 |
（焦點） | 不接收 | 提示不給 tabindex。焦點始終留在觸發元素上 —— 這既是 APG 的要求，也決定了提示裡不能放連結或按鈕。 |
（對照） | aria-label | 名稱與說明不同。aria-label 蓋掉元素的名稱，Tooltip 是在名稱之後補一句。按鈕叫什麼用名稱，按下去會怎樣用說明。 |
WCAG 對應
- 等級 AA1.4.13 暫留或聚焦時出現的內容
這一條幾乎就是為 Tooltip 寫的，它要求三件事同時成立：可關閉（Esc 能關掉且不移動焦點）、可停留（指標能從觸發元素移到提示上而不讓它消失）、持續性（在焦點或指標離開前不會自己消失）。
- 等級 A2.1.1 鍵盤
聚焦即顯示，不是只有滑鼠懸停才看得到。
- 等級 A3.2.1 取得焦點
提示出現時不移動焦點，使用者的操作不會被打斷。
- 等級 A4.1.2 名稱、角色、值
提示以 role=tooltip 標記，並透過 aria-describedby 成為觸發元素的無障礙補充說明。
APG 規則
- 元件語意
工具提示的觸發元素須以工具提示元素作為無障礙補充描述
工具提示的觸發元素須透過 aria-describedby 參照提供補充說明的工具提示元素。
- 鍵盤操作
工具提示可由鍵盤焦點觸發
工具提示觸發元素取得鍵盤焦點後，提示內容通常會在短暫延遲後出現。
- 指標與觸控操作
工具提示可由指標懸浮觸發
當指標懸停在觸發元素上時，工具提示會顯示，通常會有短暫延遲。
- 鍵盤操作
按下 Escape 鍵可關閉工具提示
按 Escape 鍵可關閉工具提示。
- 焦點管理
工具提示不應接收鍵盤焦點
工具提示顯示時，鍵盤焦點應保持在觸發元素上；若內容需要接收焦點，應改用對話框。
- 焦點管理
由鍵盤焦點觸發的工具提示應在焦點離開時關閉
由觸發元素獲得焦點而開啟的工具提示，在該元素失去焦點時關閉。
- 指標與觸控操作
由滑鼠懸停觸發的工具提示在指標停留期間應保持顯示
由指標懸停觸發的工具提示，在指標停留在觸發元素或工具提示本身上時須持續顯示。
- 指標與觸控操作
由滑鼠懸停觸發的工具提示應在指標離開後關閉
由指標懸停觸發的工具提示，在指標離開觸發元素與工具提示後須關閉。