ARIA：菜单角色

menu 通常表示用户可以调用的常用操作或功能的组合。当以类似于桌面应用程序菜单的方式呈现菜单项列表时，menu 角色是合适的。子菜单（也称为弹出菜单）也具有 menu 角色。

虽然术语“菜单”是用于描述站点导航的通用术语，但 menu 角色用于需要复杂功能的操作或功能列表，例如复合窗口部件焦点管理和首字母导航。

菜单可以是永久可见的控件列表，也可以是可打开和关闭的窗口部件。关闭的 menu 窗口部件通常通过激活菜单按钮、选择打开子菜单的菜单中的项目或调用命令（例如 Windows 中的 Shift + F10，它会打开上下文相关的菜单）来打开或使其可见。

当用户激活已打开的菜单中的某个选择时，菜单通常会关闭。如果菜单选择操作调用子菜单，则菜单将保持打开状态并显示子菜单。

当菜单打开时，键盘焦点将置于第一个菜单项上。要使其可通过键盘访问，您需要为所有后代管理焦点：menu 中的所有菜单项都可聚焦。打开菜单的菜单按钮和菜单项（而不是菜单本身）是可聚焦的元素。

菜单项包括 menuitem、menuitemcheckbox 和 menuitemradio。禁用 的菜单项可聚焦，但无法激活。

菜单项可以分组在具有 group 角色的元素中，并由具有 separator 角色的元素分隔。group 和 separator 既不会接收焦点也不会具有交互性。

如果 menu 是作为上下文操作的结果打开的，则 Escape 或 Enter 可能会将焦点返回到调用上下文。如果焦点位于菜单按钮上，则 Enter 会打开菜单，并将焦点置于第一个菜单项上。如果焦点位于菜单本身，则 Escape 会关闭菜单并将焦点返回到菜单按钮或父菜单栏项（或打开菜单的上下文操作）。

具有 menu 角色的元素的隐式 aria-orientation 值为 vertical。对于水平方向的菜单，请使用 aria-orientation="horizontal"。

如果菜单在视觉上是持久存在的，请考虑使用 menubar 角色。

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 子元素的项目之后。在管理焦点时，请确保视觉焦点顺序与辅助技术阅读顺序匹配。

空格 / Enter

如果该项目是父菜单项，则它会打开子菜单并将焦点移动到子菜单中的第一个项目。否则，激活菜单项，该菜单项会加载新内容并将焦点置于标题该内容的标题上。

Esc

在子菜单中时，它会关闭子菜单并将焦点移动到父菜单或菜单栏项。

右箭头

在菜单栏中，将焦点移动到菜单栏中的下一项。如果焦点位于最后一项，则将其移动到第一项。如果在子菜单中，如果焦点位于没有子菜单的项上，则它会关闭子菜单并将焦点移动到菜单栏中的下一项。否则，它将打开新聚焦的菜单栏项的子菜单，并将焦点保持在该父菜单栏项上。如果不在菜单栏或子菜单中，并且不在具有子菜单的menuitem上，如果焦点不是菜单中最后一个可聚焦元素，则它可以选择将焦点移动到下一个可聚焦元素。

左箭头

将焦点移动到菜单栏中的前一项。如果焦点位于第一项，则将其移动到最后一项。如果在子菜单中，它会关闭子菜单并将焦点移动到父菜单项。如果不在菜单栏或子菜单中，如果焦点不是菜单中第一个可聚焦元素，则它可以选择将焦点移动到最后一个可聚焦元素。

下箭头

打开子菜单并将焦点移动到子菜单中的第一项。

上箭头

打开子菜单并将焦点移动到子菜单中的最后一项。

Home

将焦点移动到菜单栏中的第一项。

End

将焦点移动到菜单栏中的最后一项。

任何字符键

将焦点移动到菜单栏中名称以键入字符开头的下一项。如果没有任何项目的名称以键入的字符开头，则焦点不会移动。

以下是两个菜单实现示例。

<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的类和在交互式 menuitem 内容上包含tabindex="-1"。

在包含用于站点导航的“菜单”时，请勿使用menu角色。相反，对于主站点导航，请使用原生的 HTML <nav> 元素或仅使用链接列表。menu角色应保留用于需要焦点管理的复合小部件。有关说明和更多示例，请参阅 ARIA 公开导航实践。

以下代码片段是嵌套在菜单栏中的弹出菜单。它在激活菜单按钮时显示。它是一个从颜色选项列表中选择文本颜色的菜单。

<div>
  <button
    type="button"
    aria-haspopup="menu"
    aria-controls="colormenu"
    tabindex="0"
    aria-label="Text Color: purple">
    Purple
    <span></span>
  </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 完成。例如，在这些代码示例中，我们可以使用属性和 next-sibling 选择器来切换菜单的可见性。

[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