ARIA：菜单栏角色

菜单是一种向用户提供选择列表的小部件，例如一组操作或功能。菜单栏类型的菜单通常呈现为持续可见的命令水平栏。菜单栏的行为类似于本机操作系统菜单栏，例如包含下拉菜单的菜单栏，通常位于许多桌面应用程序窗口的顶部。

menubar 角色用于创建类似于许多桌面应用程序窗口顶部附近的菜单栏，视觉上持久、通常水平的菜单项栏，为用户提供对一致命令集的快速访问。

menubar 包含三种类型的菜单项，包括menuitem、menuitemradio 和 menuitemcheckbox。这些菜单项可以选择嵌套在一个或多个 group 容器中。组或项可以选择用 separator 元素分隔。虽然每个菜单项都必须能够接收焦点，即使已禁用，但 group 和 separator 元素不可聚焦。

本机菜单栏的一个示例是，如果您在桌面浏览器中阅读本文，则屏幕顶部可能会出现该栏。基于 Web 的菜单栏的一个示例是显示“文件 编辑 查看 插入 格式”等的水平菜单栏，该菜单栏通常在 Google 文档中文档名称下方可见。

菜单栏交互应类似于桌面图形用户界面中的典型菜单栏交互。在 Google 文档中，每个菜单项都是一个带有弹出子菜单的 menuitem，因此每个菜单项的 aria-haspopup 属性都设置为 true。menubar 元素没有。

菜单栏和所有菜单项都可聚焦，并且具有设置的 tabindex 属性。当菜单栏通过制表符获得焦点时，键盘焦点将置于第一个菜单项上。菜单中的每个项目都将 tabindex 设置为 -1，除了第一个项目，其 tabindex 设置为 0。

如果菜单栏因上下文操作（例如快捷键、Escape 或 Enter）而获得焦点，则焦点可能会返回到调用上下文。也就是说，请确保不要创建与用户代理、操作系统或辅助技术的快捷键冲突的快捷键 - 任何 UA、OS 或 AT。

每个菜单项，无论嵌套深度如何，都能够接收焦点，即使已禁用。

如果 menubar 具有可见标签，则包括设置为引用标签元素的值的 aria-labelledby。否则，通过包含描述性 aria-label 为菜单栏提供可访问名称。

menubar 中的 menuitem 元素可以包含菜单项的子级子菜单。子菜单可以嵌套多层。通常，外部 menubar 是水平的，所有子菜单都是垂直的。如果不是这种情况，如果您的菜单栏是垂直的，请在 menubar 元素上包含 aria-orientation="vertical"。否则，此属性不是必需的，因为默认值为水平。

group 角色

标识一组菜单项

menuitem 角色

menubar 中包含的一组选择中的选项。可能具有子菜单。

menuitemradio 角色

一组具有相同角色的元素中可选中菜单项，其中一次只能选中一个。

menuitemcheckbox 角色

一个具有可选中状态的菜单项，其可能值为 true、false 或 mixed。

aria-orientation

如果菜单栏是垂直的，则在 menubar 元素上包含 aria-orientation="vertical"。默认方向为 horizontal。

当焦点位于 menubar 中时，它始终位于菜单栏内的菜单项上。当焦点位于菜单栏中的顶级 menuitem 上时，必须支持以下键盘交互

向下箭头

如果当前聚焦的 menuitem 具有子菜单，则打开子菜单并将焦点置于子菜单中的第一项上。

向上箭头

（可选）如果当前聚焦的 menuitem 具有子菜单，则打开子菜单并将焦点置于子菜单中的最后一项上。

向右箭头

将焦点移动到下一个项目，可以选择从最后一个项目循环到第一个项目。

左箭头

将焦点移动到上一个项目，可以选择从第一个项目循环到最后一个项目。

Home

如果箭头键循环不支持，则将焦点移动到menubar中的第一个项目。

End

如果箭头键循环不支持，则将焦点移动到menubar中的最后一个项目。

Tab

将焦点移动到选项卡顺序中的下一个元素。如果这导致退出菜单栏，则菜单栏中的所有子菜单都将关闭。

shift + Tab

将焦点移动到选项卡顺序中的上一个元素。如果这导致退出菜单栏，则菜单栏中的所有子菜单都将关闭。

有关当焦点位于菜单栏中的菜单项（始终如此）时键盘交互的更多信息，请参阅menuitem 键盘交互、menuitemradio 键盘交互和menuitemcheckbox 键盘交互。

注意：以上交互假设menubar是水平的。如果menubar是垂直的，请包含aria-orientation="vertical" 并相应地更改以下键盘键

向下箭头

执行与上面描述的右箭头相同的操作。

向上箭头

执行与上面描述的左箭头相同的操作。

向右箭头

执行与上面描述的下箭头相同的操作。

左箭头

执行与上面描述的上箭头相同的操作。

• W3C WAI-ARIA 实践：导航menubar示例
• W3C WAI-ARIA 实践：编辑器menubar示例

• toolbar 角色