ARIA：工具欄角色
toolbar 角色將容器元素定義為一組常用的功能按鈕或控制元件，以緊湊的視覺形式呈現。
描述
工具欄是一組常用的控制元件，例如按鈕或複選框，以緊湊的視覺形式組合在一起。toolbar 角色可用於向螢幕閱讀器使用者傳達此類分組的存在和目的，並有助於減少鍵盤使用者的製表符停止點數量。僅當工具欄包含 3 個或更多控制元件時，才使用 toolbar 角色。
工具欄通常是 menubar 中功能的一個子集，旨在減少使用者的工作量。如果您在一個選單欄中有多個工具欄，每個工具欄都需要一個標籤；您可以使用 aria-labelledby 或 aria-label 來包含它。
建立工具欄時，您需要實現工具欄內的焦點管理和鍵盤互動，處理當工具欄和包含的本機控制元件使用相同的鍵盤互動時的情況。應使用 向左箭頭 和 向右箭頭 在水平工具欄的控制元件之間進行導航。如果工具欄是垂直的 — 此時您還應包含 aria-orientation="vertical" — 則應使用 向上箭頭 和 向下箭頭；或者，在水平工具欄中，可以保留它們用於操作控制元件，例如需要垂直箭頭鍵才能操作的微調按鈕。
避免包含操作需要用於工具欄導航的箭頭鍵的控制元件。如果必須包含此類控制元件，請將其放在工具欄的最後一個控制元件。例如，在水平工具欄中，文字框可以作為最後一個元素包含在內。
如果工具欄中其他可互動的元素暫時被停用，請考慮讓它們保持可聚焦狀態，以便螢幕閱讀器使用者可以注意到它們的存在。
關聯的 WAI-ARIA 角色、狀態和屬性
aria-orientation-
具有 toolbar 角色的元素隱式具有
aria-orientation水平值。 aria-labelledby/aria-label-
如果工具欄有可見標籤，請使用
aria-labelledby屬性按 ID 引用它。否則，請提供aria-label。如果選單中有一個以上的工具欄，則必須命名。
鍵盤互動
實現焦點管理，以便鍵盤製表符序列包含工具欄的一個製表符停止點，並且箭頭鍵可以在工具欄中的控制元件之間移動焦點。
- Tab 和 Shift + Tab
-
將焦點移入和移出工具欄。當焦點移入工具欄時
- 如果焦點是第一次移入工具欄，焦點將設定在第一個未停用的控制元件上。
- 如果工具欄以前包含過焦點，則焦點可以選擇性地設定在上次具有焦點的控制元件上。否則，它將設定在第一個未停用的控制元件上。
- Home (可選)
-
將焦點移至第一個元素。
- End (可選)
-
將焦點移至最後一個元素。
水平工具欄
具有 toolbar 角色的元素隱式具有 aria-orientation 水平值。如果工具欄確實具有此方向，則需要實現以下鍵盤互動：
- 向左箭頭 (對於水平工具欄（預設）
-
將焦點移至前一個控制元件。可選地，焦點移動可以從第一個元素環繞到最後一個元素。
- 向右箭頭 (對於水平工具欄（預設）
-
將焦點移至下一個控制元件。可選地，焦點移動可以從最後一個元素環繞到第一個元素。
在具有多行控制元件的工具欄中，允許左右箭頭在行之間環繞，保留垂直箭頭鍵用於操作控制元件，例如在單選按鈕之間導航或遞增/遞減數字微調器。
垂直工具欄
如果工具欄是垂直的，請確保設定了 aria-orientation="vertical"，並實現以下鍵盤互動：
- 向下箭頭 (對於水平工具欄（預設）
-
將焦點移至前一個控制元件。可選地，焦點移動可以從第一個元素環繞到最後一個元素。
- 向上箭頭 (對於水平工具欄（預設）
-
將焦點移至下一個控制元件。可選地，焦點移動可以從最後一個元素環繞到第一個元素。
所需的 JavaScript 功能
實現焦點管理，以便鍵盤製表符序列包含工具欄的一個製表符停止點，並且箭頭鍵可以在工具欄中的控制元件之間移動焦點。當製表符進入工具欄時，焦點會返回到上次具有焦點的控制元件。
雖然工具欄元素本身不接收焦點，但必須管理焦點移入、移出和在工具欄內的移動。載入時，工具欄內製表符序列的第一個元素具有 tabindex="0"，而工具欄內所有其他可聚焦元素都設定為 tabindex="-1"。根據 [鍵盤互動]，接收焦點的元素設定為 tabindex="0"，剛剛失去焦點的元素切換回 tabindex="-1"。使用 element.focus() 設定焦點，聚焦於具有 tabindex="0" 的元素。這稱為“迴圈制表索引”。使用迴圈制表索引管理焦點的優點是瀏覽器會將新聚焦的元素滾動到檢視中。
如果設計要求下次使用者使用 Tab 或 Shift + Tab 將焦點移入工具欄時，特定元素應獲得焦點，請檢查當工具欄失去焦點時該目標元素是否具有 tabindex="0"。
當工具欄具有焦點時，請提供視覺提示。當工具欄內的元素具有焦點時，必須在工具欄本身（以幫助工具欄支援箭頭鍵的定向導航）和具有焦點的控制元件上包含視覺提示。可以使用 :focus 和 :focus-within 的 CSS 偽類來定位這兩個元素。
示例
可訪問性考慮
避免包含操作需要用於工具欄導航的箭頭鍵（水平工具欄的左右箭頭，或垂直工具欄的上下箭頭）的控制元件。如果必須包含此類控制元件，請將其放在工具欄的最後一個控制元件。例如，在水平工具欄中，文字框可以作為最後一個元素包含在內。
如果工具欄中其他可互動的元素被停用，請考慮讓它們保持可聚焦狀態，以便螢幕閱讀器使用者可以注意到它們的存在。
規範
| 規範 |
|---|
| 無障礙富網際網路應用程式 (WAI-ARIA) # toolbar |
| 未知規範 |