ARIA：menuitem 角色

描述

menuitem 是包含在 menu 或 menubar 中的一組選項裡的三種選項之一；另外兩種是 menuitemcheckbox 和 menuitemradio。menuitem 僅作為 menu 或 menubar 角色元素的後代或被其擁有，也可以選擇性地巢狀在包含或被選單擁有的 group 角色元素內。

如果 menuitem 不是 DOM 中選單的後代，請在選單上包含 aria-owns 屬性來指示這種關係。如果 aria-owns 設定在選單容器上以包含非容器 DOM 子元素的元素，則這些元素將按照它們被引用的順序在支援性技術中出現，並排在 DOM 子元素之後。確保視覺焦點順序與輔助技術閱讀順序匹配。

選單中的每個 menuitem 都是可聚焦的，無論它是否被停用。透過在具有角色的元素上設定 aria-disabled="true" 來指示 menuitem 被停用。

如果 menuitem 具有子選單，則將其程式設計為在啟用選單項時顯示新的子級別選單，幷包含 aria-haspopup="menu" 或 true 值，以指示輔助技術該選單項用於開啟子選單。

指示 menuitem 開啟對話方塊的常見約定是在選單項標籤後附加“…”（省略號），例如，“另存為 …” 。

每個 menuitem 都必須有一個可訪問的名稱。預設情況下，此名稱來自元素的原始內容。如果內容無法提供有用的可訪問名稱，則可以使用 aria-labelledby 來引用可見標籤。如果無法透過可見內容提供可訪問名稱，則可以使用 aria-label 提供可訪問名稱。

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

menu 角色

提供選項列表的小部件。必需的上下文角色（或 menubar）

menubar 角色

menu 的一種呈現形式，通常保持可見並通常水平顯示。必需的上下文角色（或 menu）

group 角色

可用於識別 menu 或 menubar 內部或由其擁有的相關 menuitem 集合

aria-disabled

指示元素可感知但被停用，因此無法操作

aria-haspopup

指示 menuitem 可以觸發的互動式彈出視窗的可用性和型別

鍵盤互動

Enter 和 Space

如果 menuitem 有子選單，則開啟子選單並將焦點放在其第一個專案上。否則，啟用該專案並關閉選單。

向下箭頭

在 menubar 中具有子選單的 menuitem 上，開啟子選單並將焦點放在子選單的第一個專案上。否則，將焦點移動到下一個專案，可選地從最後一個迴圈到第一個。

向上箭頭

將焦點移動到上一個專案，可選地從第一個迴圈到最後一個。可選地，如果 menuitem 在 menubar 中並且有子選單，則開啟子選單並將焦點放在子選單的最後一個專案上。

右箭頭

如果在與 menubutton 結合使用的 menu 中，並且不在 menubar 中，則如果 menuitem 沒有子選單，則不執行任何操作。當焦點在 menubar 中時，將焦點移動到下一個專案，可選地從最後一個迴圈到第一個。當焦點在 menu 中並且位於有子選單的 menuitem 上時，開啟子選單並將焦點放在其第一個專案上。當焦點在 menu 中並且位於沒有子選單的專案上時，關閉子選單和所有父選單，將焦點移動到 menubar 中的下一個專案，如果焦點現在位於有子選單的 menuitem 上，則開啟該 menuitem 的子選單而不將焦點移入子選單，或者開啟該 menuitem 的子選單並將焦點放在子選單的第一個專案上。

左箭頭

當焦點在 menubar 中時，將焦點移動到上一個專案，可選地從第一個迴圈到最後一個。當焦點在選單中某個專案的子選單中時，關閉子選單並將焦點返回到父 menuitem。當焦點在 menubar 中某個專案的子選單中時，關閉子選單，將焦點移動到 menubar 中的上一個專案，如果焦點現在位於有子選單的 menuitem 上，則開啟該 menuitem 的子選單而不將焦點移入子選單，或者開啟該 menuitem 的子選單並將焦點放在子選單的第一個專案上。

Home

如果未支援箭頭鍵迴圈，則將焦點移動到當前 menu 或 menubar 的第一個專案。

End

如果未支援箭頭鍵迴圈，則將焦點移動到當前 menu 或 menubar 的最後一個專案。

任何對應於可列印字元的按鍵（可選）

將焦點移動到當前選單中標籤以該可列印字元開頭的下一個專案。

Escape

關閉包含焦點的選單，並將焦點返回到選單開啟時所在的元素或上下文，例如選單按鈕或父 menuitem。

製表符

將焦點移動到製表符順序中的下一個元素，如果具有焦點的專案不在 menubar 中，則關閉其選單以及所有開啟的父選單容器。

Shift + Tab

將焦點移動到製表符順序中的上一個元素，如果具有焦點的專案不在 menubar 中，則關閉其選單以及所有開啟的父選單容器。

如果透過上下文操作打開了選單或 menubar 獲得了焦點，則 Escape 或 Enter 可能會將焦點返回到呼叫上下文。

導航 menubar 的某些實現可能具有既執行功能又開啟子選單的 menuitem 元素。在這些實現中，Enter 和 Space 執行導航功能，而 Down Arrow 在水平 menubar 中開啟與該相同 menuitem 關聯的子選單。

當 menubar 中的專案垂直排列，選單容器中的專案水平排列時，Down Arrow 的行為如同上面描述的 Right Arrow，Up Arrow 的行為如同上面描述的 Left Arrow，反之亦然。

示例

<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>

規範

另見

• menuitemcheckbox 角色
• menuitemradio 角色
• listitem 角色
• option 角色