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