ARIA：menuitem 角色

menuitem 角色表示元素是包含在 menu 或 menubar 中的一組選項中的一個選項。

描述

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 角色、狀態和屬性

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

通常保持可見且通常水平呈現的 menu 的表示形式。必需的上下文角色（或 menu）

group 角色

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

aria-disabled

指示元素是可感知的但已停用，因此不可操作

aria-haspopup

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

鍵盤互動

Enter 和 Space

如果 menuitem 具有子選單，則開啟子選單並將焦點置於其第一項。否則，啟用該項並關閉選單。

向下箭頭

在 menubar 中具有子選單的 menuitem 上，開啟子選單並將焦點置於子選單中的第一項。否則，將焦點移動到下一項，可選地從最後一項環繞到第一項。

向上箭頭

將焦點移動到前一項，可選地從第一項環繞到最後一項。或者，如果 menuitem 位於選單欄中且具有子選單，則開啟子選單並將焦點置於子選單中的最後一項。

向右箭頭

如果在使用選單按鈕開啟的 menu 中且不在 menubar 中，如果 menuitem 沒有子選單，則不執行任何操作。當焦點位於 menubar 中時，將焦點移動到下一項，可選地從最後一項環繞到第一項。當焦點位於 menu 中且位於具有子選單的 menuitem 上時，開啟子選單並將焦點置於其第一項。當焦點位於 menu 中且位於沒有子選單的專案上時，關閉子選單和任何父選單，將焦點移動到 menubar 中的下一項，並且，如果焦點現在位於具有子選單的 menuitem 上，則要麼開啟該 menuitem 的子選單而不將焦點移動到子選單中，要麼開啟該 menuitem 的子選單並將焦點置於子選單中的第一項。

向左箭頭

當焦點位於menubar中時，將焦點移動到前一個專案，可以選擇從最後一個專案迴圈到第一個專案。當焦點位於選單中某個專案的子選單中時，關閉子選單並將焦點返回到父menuitem。當焦點位於menubar中某個專案的子選單中時，關閉子選單，將焦點移動到menubar中的前一個專案，並且，如果焦點現在位於具有子選單的menuitem上，則要麼開啟該menuitem的子選單而不將焦點移動到子選單中，要麼開啟該menuitem的子選單並將焦點置於子選單中的第一個專案上。

首頁

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

末尾

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

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

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

Esc

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

Tab

將焦點移動到選項卡序列中的下一個元素，如果具有焦點的專案不在選單欄中，則關閉其選單和所有開啟的父選單容器。

Shift + Tab

將焦點移動到選項卡序列中的前一個元素，如果具有焦點的專案不在選單欄中，則關閉其選單和所有開啟的父選單容器。

如果由於上下文操作、Esc或Enter導致選單開啟或選單欄獲得焦點，則可能會將焦點返回到呼叫上下文。

導航選單欄的一些實現可能具有既執行功能又開啟子選單的menuitem元素。在這些實現中，Enter和空格鍵執行導航功能，而在水平選單欄中，向下箭頭開啟與同一menuitem關聯的子選單。

當menubar中的專案垂直排列，而選單容器中的專案水平排列時，向下箭頭執行與上面描述的向右箭頭相同的操作，向上箭頭執行與上面描述的向左箭頭相同的操作，反之亦然。

示例

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

規範

規範
可訪問的富網際網路應用程式 (WAI-ARIA)
# menuitem
未知規範

另請參閱