ARIA：menubar 角色 - ARIA | MDN

描述

菜单是向用户提供选择列表的小部件，例如一组操作或函数。menubar 类型的菜单通常显示为一个持续可见的水平命令栏。Menubars 的行为类似于原生操作系统中的 menubar，例如包含下拉菜单的 menubar，通常位于许多桌面应用程序窗口的顶部。

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

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

原生 menubar 的一个例子是，如果你在桌面浏览器中阅读本文，屏幕顶部可能出现的栏。基于 Web 的 menubar 的一个例子是显示“文件编辑视图插入格式”等内容的水平菜单栏，它通常在 Google 文档的文档名称下方可见。

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

Menubar 和所有菜单项都是可聚焦的，并且具有 tabindex 属性。当 menubar 通过 Tab 键获得焦点时，键盘焦点会放在第一个菜单项上。菜单中的每个项目都设置了 tabindex 为 -1，除了第一个项目，它的 tabindex 设置为 0。

如果 menubar 由于上下文操作（例如快捷键）而获得焦点，Escape 或 Enter 可能会将焦点返回到调用上下文。话虽如此，请确保不要创建与用户代理、操作系统或辅助技术的快捷键冲突的快捷键——任何 UA、OS 或 AT。

每个菜单项，无论嵌套多深，都可以获得焦点，即使是禁用的。

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

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

关联的 WAI-ARIA 角色、状态和属性

group 角色: 标识一组菜单项
menuitem 角色: menubar 包含的选择集中的一个选项。可能有一个子菜单。
menuitemradio 角色: 一组具有相同角色的元素中的一个可勾选的菜单项，其中一次只能勾选一个。
menuitemcheckbox 角色: 一个具有可勾选状态的菜单项，其可能值为 true、false 或 mixed。
aria-orientation: 如果 menubar 是垂直的，请在 menubar 元素上包含 aria-orientation="vertical"。默认方向是 horizontal。