ARIA：選單角色

menu 通常表示使用者可以呼叫的常用操作或功能的組合。當以類似於桌面應用程式選單的方式呈現選單項列表時，menu 角色是合適的。子選單（也稱為彈出選單）也具有 menu 角色。

雖然術語“選單”是用於描述站點導航的通用術語，但 menu 角色用於需要複雜功能的操作或功能列表，例如複合視窗部件焦點管理和首字母導航。

選單可以是永久可見的控制元件列表，也可以是可開啟和關閉的視窗部件。關閉的 menu 視窗部件通常透過啟用選單按鈕、選擇開啟子選單的選單中的專案或呼叫命令（例如 Windows 中的 Shift + F10，它會開啟上下文相關的選單）來開啟或使其可見。

當用戶啟用已開啟的選單中的某個選擇時，選單通常會關閉。如果選單選擇操作呼叫子選單，則選單將保持開啟狀態並顯示子選單。

當選單開啟時，鍵盤焦點將置於第一個選單項上。要使其可透過鍵盤訪問，您需要為所有後代管理焦點：menu 中的所有選單項都可聚焦。開啟選單的選單按鈕和選單項（而不是選單本身）是可聚焦的元素。

選單項包括 menuitem、menuitemcheckbox 和 menuitemradio。停用 的選單項可聚焦，但無法啟用。

選單項可以分組在具有 group 角色的元素中，並由具有 separator 角色的元素分隔。group 和 separator 既不會接收焦點也不會具有互動性。

如果 menu 是作為上下文操作的結果開啟的，則 Escape 或 Enter 可能會將焦點返回到呼叫上下文。如果焦點位於選單按鈕上，則 Enter 會開啟選單，並將焦點置於第一個選單項上。如果焦點位於選單本身，則 Escape 會關閉選單並將焦點返回到選單按鈕或父選單欄項（或開啟選單的上下文操作）。

具有 menu 角色的元素的隱式 aria-orientation 值為 vertical。對於水平方向的選單，請使用 aria-orientation="horizontal"。

如果選單在視覺上是持久存在的，請考慮使用 menubar 角色。

menuitem、menuitemcheckbox 和 menuitemradio 角色

包含在包含 menu 或 menubar 中的專案的角色，統稱為“選單項”。這些必須能夠接收焦點。

group 角色

選單項可以巢狀在 group 中

separator 角色

分隔符，用於分隔和區分內容部分或選單內的選單項組

tabindex 屬性

menu 容器的 tabindex 設定為 -1 或 0，選單中的每個專案的 tabindex 設定為 -1。

aria-activedescendant

設定為已聚焦專案的 ID（如果存在）。

aria-orientation

指示菜單方向是水平還是垂直；如果省略，則預設為 vertical。

aria-label 或 aria-labelledby

menu 必須具有可訪問名稱。如果存在可見標籤，請使用 aria-labelledby，否則請使用 aria-label。包含 aria-labelledby 並將其設定為控制其顯示的 menuitem 或 button 的 id，或使用 aria-label 定義標籤。

aria-owns

僅在選單容器上設定，以包含不是容器的 DOM 子元素的元素。如果設定，這些元素將按引用順序顯示在閱讀順序中，並在任何作為 DOM 子元素的專案之後。在管理焦點時，請確保視覺焦點順序與輔助技術閱讀順序匹配。

空格 / Enter

如果該專案是父選單項，則它會開啟子選單並將焦點移動到子選單中的第一個專案。否則，啟用選單項，該選單項會載入新內容並將焦點置於標題該內容的標題上。

Esc

在子選單中時，它會關閉子選單並將焦點移動到父選單或選單欄項。

右箭頭

在選單欄中，將焦點移動到選單欄中的下一項。如果焦點位於最後一項，則將其移動到第一項。如果在子選單中，如果焦點位於沒有子選單的項上，則它會關閉子選單並將焦點移動到選單欄中的下一項。否則，它將開啟新聚焦的選單欄項的子選單，並將焦點保持在該父選單欄項上。如果不在選單欄或子選單中，並且不在具有子選單的menuitem上，如果焦點不是選單中最後一個可聚焦元素，則它可以選擇將焦點移動到下一個可聚焦元素。

左箭頭

將焦點移動到選單欄中的前一項。如果焦點位於第一項，則將其移動到最後一項。如果在子選單中，它會關閉子選單並將焦點移動到父選單項。如果不在選單欄或子選單中，如果焦點不是選單中第一個可聚焦元素，則它可以選擇將焦點移動到最後一個可聚焦元素。

下箭頭

開啟子選單並將焦點移動到子選單中的第一項。

上箭頭

開啟子選單並將焦點移動到子選單中的最後一項。

Home

將焦點移動到選單欄中的第一項。

End

將焦點移動到選單欄中的最後一項。

任何字元鍵

將焦點移動到選單欄中名稱以鍵入字元開頭的下一項。如果沒有任何專案的名稱以鍵入的字元開頭，則焦點不會移動。

以下是兩個選單實現示例。

<div>
  <button id="menubutton" aria-haspopup="true" aria-controls="menu">
    <img src="hamburger.svg" alt="Page Sections" />
  </button>
  <ul id="menu" role="menu" aria-labelledby="menubutton">
    <li role="presentation">
      <a role="menuitem" href="#description">Description</a>
    </li>
    <li role="presentation">
      <a
        role="menuitem"
        href="#associated_wai-aria_roles_states_and_properties">
        Associated WAI-ARIA roles, states, and properties
      </a>
    </li>
    <li role="presentation">
      <a role="menuitem" href="#keyboard_interactions">
        Keyboard interactions
      </a>
    </li>
    <li role="presentation">
      <a role="menuitem" href="#examples">Examples</a>
    </li>
    <li role="presentation">
      <a role="menuitem" href="#specifications">Specifications</a>
    </li>
    <li role="presentation">
      <a role="menuitem" href="#see_also">See Also</a>
    </li>
  </ul>
</div>

為了逐步增強預設情況下可訪問的此導航小部件，應在載入時使用 JavaScript 新增隱藏menu的類和在互動式 menuitem 內容上包含tabindex="-1"。

在包含用於站點導航的“選單”時，請勿使用menu角色。相反，對於主站點導航，請使用原生的 HTML <nav> 元素或僅使用連結列表。menu角色應保留用於需要焦點管理的複合小部件。有關說明和更多示例，請參閱 ARIA 公開導航實踐。

以下程式碼片段是巢狀在選單欄中的彈出選單。它在啟用選單按鈕時顯示。它是一個從顏色選項列表中選擇文字顏色的選單。

<div>
  <button
    type="button"
    aria-haspopup="menu"
    aria-controls="colormenu"
    tabindex="0"
    aria-label="Text Color: purple">
    Purple
    <span></span>
  </button>
  <ul role="menu" id="colormenu" aria-label="Color Options" tabindex="-1">
    <li
      role="menuitemradio"
      aria-checked="true"
      style="color: purple"
      tabindex="-1">
      Purple
    </li>
    <li
      role="menuitemradio"
      aria-checked="false"
      style="color: magenta"
      tabindex="-1">
      Magenta
    </li>
    <li
      role="menuitemradio"
      aria-checked="false"
      style="color: black;"
      tabindex="-1">
      Black
    </li>
  </ul>
</div>

開啟選單的按鈕已設定 aria-haspopup="menu"，明確指示它控制的彈出視窗是menu。

要開啟選單，使用者通常會與選單按鈕作為開啟程式進行互動。選單按鈕必須可聚焦並響應點選和鍵盤事件。當聚焦時，選擇Enter、Space、下箭頭或上箭頭應開啟選單並將焦點置於選單項上。

選單的開啟和關閉會切換按鈕上的 aria-expanded="true" 屬性。選單開啟時新增。選單關閉時刪除或設定為false。true值表示選單正在顯示，並且啟用選單按鈕會關閉選單。

當選單開啟時，按鈕本身通常不會接收焦點，因為使用者會透過箭頭鍵遍歷選單項。相反，Escape 和可選的Shift + Tab 會關閉選單並將焦點返回到選單按鈕。

menu角色已設定在 <ul> 上，將<ul>元素標識為選單。

選單的顯示和隱藏可以使用 CSS 完成。例如，在這些程式碼示例中，我們可以使用屬性和 next-sibling 選擇器來切換選單的可見性。

[role="menu"] {
  display: none;
}
[aria-expanded="true"] + [role="menu"] {
  display: block;
}

導航示例具有靜態按鈕。子選單示例具有一個在使用者選擇新值時更新的按鈕。在這種情況下，aria-label="Text Color: purple" 設定在menu元素上。它將選單的可訪問名稱定義為“文字顏色：紫色”；識別選單的目的（選擇文字顏色）和當前值（紫色）。當選擇新顏色時，aria-label屬性的值也應更新。

• menubar
• menuitem
• menuitemcheckbox
• menuitemradio
• aria-haspopup