ARIA：menubar 角色 - ARIA | MDN

描述

選單是向用戶提供選擇列表的小部件，例如一組操作或函式。menubar 型別的選單通常顯示為一個持續可見的水平命令欄。Menubars 的行為類似於原生作業系統中的 menubar，例如包含下拉選單的 menubar，通常位於許多桌面應用程式視窗的頂部。

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

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

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

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

Menubar 和所有選單項都是可聚焦的，並且具有 tabindex 屬性。當 menubar 透過 Tab 鍵獲得焦點時，鍵盤焦點會放在第一個選單項上。選單中的每個專案都設定了 tabindex 為 -1，除了第一個專案，它的 tabindex 設定為 0。

如果 menubar 由於上下文操作（例如快捷鍵）而獲得焦點，Escape 或 Enter 可能會將焦點返回到呼叫上下文。話雖如此，請確保不要建立與使用者代理、作業系統或輔助技術的快捷鍵衝突的快捷鍵——任何 UA、OS 或 AT。

每個選單項，無論巢狀多深，都可以獲得焦點，即使是停用的。

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

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

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

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