ARIA：選單欄角色

menubar 是 menu 的一種呈現方式，通常保持可見，並且通常水平呈現。

描述

選單是一種向用戶提供選擇列表的小部件，例如一組操作或功能。選單欄型別的選單通常呈現為持續可見的命令水平欄。選單欄的行為類似於本機作業系統選單欄，例如包含下拉選單的選單欄，通常位於許多桌面應用程式視窗的頂部。

menubar 角色用於建立類似於許多桌面應用程式視窗頂部附近的選單欄，視覺上持久、通常水平的選單項欄，為使用者提供對一致命令集的快速訪問。

menubar 包含三種類型的選單項，包括menuitem、menuitemradio 和 menuitemcheckbox。這些選單項可以選擇巢狀在一個或多個 group 容器中。組或項可以選擇用 separator 元素分隔。雖然每個選單項都必須能夠接收焦點，即使已停用，但 group 和 separator 元素不可聚焦。

本機選單欄的一個示例是，如果您在桌面瀏覽器中閱讀本文，則螢幕頂部可能會出現該欄。基於 Web 的選單欄的一個示例是顯示“檔案編輯檢視插入格式”等的水平選單欄，該選單欄通常在 Google 文件中文件名稱下方可見。

選單欄互動應類似於桌面圖形使用者介面中的典型選單欄互動。在 Google 文件中，每個選單項都是一個帶有彈出子選單的 menuitem，因此每個選單項的 aria-haspopup 屬性都設定為 true。menubar 元素沒有。

選單欄和所有選單項都可聚焦，並且具有設定的 tabindex 屬性。當選單欄透過製表符獲得焦點時，鍵盤焦點將置於第一個選單項上。選單中的每個專案都將 tabindex 設定為 -1，除了第一個專案，其 tabindex 設定為 0。

如果選單欄因上下文操作（例如快捷鍵、Escape 或 Enter）而獲得焦點，則焦點可能會返回到呼叫上下文。也就是說，請確保不要建立與使用者代理、作業系統或輔助技術的快捷鍵衝突的快捷鍵 - 任何 UA、OS 或 AT。

每個選單項，無論巢狀深度如何，都能夠接收焦點，即使已停用。

如果 menubar 具有可見標籤，則包括設定為引用標籤元素的值的 aria-labelledby。否則，透過包含描述性 aria-label 為選單欄提供可訪問名稱。

menubar 中的 menuitem 元素可以包含選單項的子級子選單。子選單可以巢狀多層。通常，外部 menubar 是水平的，所有子選單都是垂直的。如果不是這種情況，如果您的選單欄是垂直的，請在 menubar 元素上包含 aria-orientation="vertical"。否則，此屬性不是必需的，因為預設值為水平。

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

group 角色: 標識一組選單項
menuitem 角色: menubar 中包含的一組選擇中的選項。可能具有子選單。
menuitemradio 角色: 一組具有相同角色的元素中可選中選單項，其中一次只能選中一個。
menuitemcheckbox 角色: 一個具有可選中狀態的選單項，其可能值為 true、false 或 mixed。
aria-orientation: 如果選單欄是垂直的，則在 menubar 元素上包含 aria-orientation="vertical"。預設方向為 horizontal。

鍵盤互動

當焦點位於 menubar 中時，它始終位於選單欄內的選單項上。當焦點位於選單欄中的頂級 menuitem 上時，必須支援以下鍵盤互動

向下箭頭: 如果當前聚焦的 menuitem 具有子選單，則開啟子選單並將焦點置於子選單中的第一項上。
向上箭頭: （可選）如果當前聚焦的 menuitem 具有子選單，則開啟子選單並將焦點置於子選單中的最後一項上。
向右箭頭: 將焦點移動到下一個專案，可以選擇從最後一個專案迴圈到第一個專案。
左箭頭: 將焦點移動到上一個專案，可以選擇從第一個專案迴圈到最後一個專案。
Home: 如果箭頭鍵迴圈不支援，則將焦點移動到menubar中的第一個專案。
End: 如果箭頭鍵迴圈不支援，則將焦點移動到menubar中的最後一個專案。
Tab: 將焦點移動到選項卡順序中的下一個元素。如果這導致退出選單欄，則選單欄中的所有子選單都將關閉。
shift + Tab: 將焦點移動到選項卡順序中的上一個元素。如果這導致退出選單欄，則選單欄中的所有子選單都將關閉。

有關當焦點位於選單欄中的選單項（始終如此）時鍵盤互動的更多資訊，請參閱menuitem 鍵盤互動、menuitemradio 鍵盤互動和menuitemcheckbox 鍵盤互動。

注意：以上互動假設menubar是水平的。如果menubar是垂直的，請包含aria-orientation="vertical" 並相應地更改以下鍵盤鍵

向下箭頭: 執行與上面描述的右箭頭相同的操作。
向上箭頭: 執行與上面描述的左箭頭相同的操作。
向右箭頭: 執行與上面描述的下箭頭相同的操作。
左箭頭: 執行與上面描述的上箭頭相同的操作。

示例

規範

規範
無障礙富網際網路應用 (WAI-ARIA) # menubar
未知規範

另請參閱

toolbar 角色