ARIA: 工具欄角色

工具欄是常用控制元件（如按鈕或複選框）的集合，以緊湊視覺形式分組在一起。toolbar 角色可用於向螢幕閱讀器使用者傳達此類分組的存在和目的，並有助於減少鍵盤使用者的製表位數。僅當對 3 個或更多控制元件進行分組時才使用 toolbar 角色。

工具欄通常是 menubar 中找到的功能的子集，用於減少使用者操作。如果選單欄中有多個工具欄，每個工具欄都需要一個標籤；您可以使用 aria-labelledby 或 aria-label 包含該標籤。

建立工具欄時，您需要在工具欄中實現焦點管理和鍵盤互動，處理在工具欄和包含的本機控制元件中使用相同鍵盤互動的情況。左箭頭 和 右箭頭 應用於在水平工具欄中的控制元件之間導航。如果工具欄是垂直的 - 在這種情況下，您還需要包含 aria-orientation="vertical" - 或者在水平工具欄中，上箭頭 和 下箭頭 可用於操作控制元件，例如需要垂直箭頭鍵操作的旋轉按鈕。

避免包含操作需要用於工具欄導航的箭頭鍵的控制元件。如果必須包含此類控制元件，請將其設為工具欄中的最後一個控制元件。例如，在水平工具欄中，文字框可以包含為最後一個元素。

如果工具欄中任何其他互動式元素暫時被停用，請考慮讓它們保持可聚焦，以便螢幕閱讀器使用者可以瞭解它們的存在。

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"，並實現了以下鍵盤互動

下箭頭 (對於水平工具欄（預設值））

將焦點移至上一個控制元件。可選地，焦點移動可以從第一個元素環繞到最後一個元素。

上箭頭 (對於水平工具欄（預設值））

將焦點移至下一個控制元件。可選地，焦點移動可以從最後一個元素環繞到第一個元素。

實現焦點管理，使鍵盤 Tab 鍵順序包含一個工具欄停靠點，並且箭頭鍵可以在工具欄中的控制元件之間移動焦點。當 Tab 鍵進入工具欄時，焦點將返回到最後一個具有焦點的控制元件。

雖然工具欄元素本身不會獲得焦點，但必須管理進出工具欄以及在工具欄內移動焦點的行為。在載入時，工具欄中 Tab 鍵順序的第一個元素將具有 tabindex="0"，而工具欄中所有其他可聚焦元素將設定為 tabindex="-1"。根據[鍵盤互動]，接收焦點的元素將設定為 tabindex="0"，而剛剛失去焦點的元素將切換回 tabindex="-1"。將焦點設定為具有 tabindex="0" 的元素，element.focus()。這稱為“遊動 tabindex”。使用遊動 tabindex 來管理焦點的優勢在於瀏覽器會將新獲得焦點的元素滾動到檢視中。

如果設計要求在使用者下次使用 Tab 或 Shift + Tab 將焦點移動到工具欄時，將特定元素設定為焦點，請檢查該目標元素在工具欄失去焦點時是否具有 tabindex="0"。

當工具欄在其內部獲得焦點時，請提供視覺提示。當工具欄內的元素獲得焦點時，必須在工具欄本身（以幫助工具欄支援使用箭頭鍵的方向導航）和獲得焦點的控制元件上都包含視覺提示。:focus 和 :focus-within 的 CSS 偽類可以用來定位這兩個元素。

來自全球資訊網聯盟（W3C）的工具欄示例

避免包含操作需要用於工具欄導航的箭頭鍵（向右和向左箭頭，或垂直工具欄的向上和向下箭頭）的控制元件。如果必須包含此類控制元件，請將其作為工具欄中的最後一個控制元件。例如，在水平工具欄中，文字框可以作為最後一個元素包含在內。

如果工具欄內的任何其他可互動元素被停用，請考慮讓它們保持可聚焦狀態，以便螢幕閱讀器使用者可以感知到它們的存在。

• CSS :focus 偽類
• CSS :focus-within 偽類