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
未知规范

另请参阅