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