ARIA：menu 角色

描述

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

雖然“選單”這個詞通常用於描述網站導航，但 menu 角色適用於需要複雜功能（如複合部件焦點管理和首字母導航）的操作或功能列表。

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

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

當選單開啟時，鍵盤焦點會放在第一個選單項上。為了支援鍵盤可訪問性，您需要為所有後代 管理焦點：menu 內的所有選單項都可以獲得焦點。選單按鈕（開啟選單的按鈕）和選單項（而不是選單本身）是可獲取焦點的元素。

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

選單項可以分組在具有 group 角色的元素中，並由具有 separator 角色的元素分隔。separator 角色。group 和 separator 都不會獲得焦點，也不會進行互動。

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

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

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

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

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 子項之後出現在閱讀順序中。在管理焦點時，請確保視覺焦點順序與此輔助技術的閱讀順序一致。

鍵盤互動

空格鍵 / 回車鍵

如果該項是父選單項，它會開啟子選單並將焦點移至子選單的第一個項。否則，它會啟用選單項，該選單項會載入新內容並將焦點放在描述該內容的標題上。

Escape

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

右箭頭

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

左箭頭

將焦點移至選單欄中的上一項。如果焦點在第一項上，則將其移至最後一項。如果在子選單中，則關閉子選單並將焦點移至父選單項。如果不在選單欄或子選單中，並且焦點不是選單中第一個可聚焦的元素，則它可能會將焦點移至最後一個可聚焦的元素。

向下箭頭

開啟子選單並將焦點移至子選單的第一個項。

向上箭頭

開啟子選單並將焦點移至子選單的最後一個項。

Home

將焦點移至選單欄的第一個項。

End

將焦點移至選單欄的最後一項。

任何字元鍵

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

示例

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

示例 1：導航選單

<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 的類以及在互動式選單項內容中包含 tabindex="-1"。

在包含用於網站導航的“選單”時，請勿使用 menu 角色。而是，對於主網站導航，請使用原生的 HTML <nav> 元素或僅僅是連結列表。menu 角色應保留給需要焦點管理的複合小部件。有關披露導航的解釋和其他示例，請參閱 ARIA 實踐 for disclosure navigation。

示例 2：選單欄子選單選項選擇器

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

<div>
  <button
    type="button"
    aria-haspopup="menu"
    aria-controls="colormenu"
    tabindex="0"
    aria-label="Text Color: purple">
    Purple
  </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 完成。例如，在這些程式碼示例中，我們可以使用屬性和相鄰兄弟選擇器來切換選單的可見性。

[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