【发布时间】：2021-08-18 06:19:46
【问题描述】：
问题陈述和现有理解
我有一个弹出窗口，其中包含分成不同部分的不同类型的内容，并在单击按钮时触发。我试图在此实现中公开适当的可访问性/ aria 语义。 （它不是一个模态对话框，而是一个简单的就地弹出窗口）。根据我目前的研究，我认为这是有道理的：
-
触发按钮上的
aria-expanded -
触发按钮上的
aria-haspopup="menu" -
role="menu"在弹出窗口中 -
role="menuitem"弹出窗口内的内容 - 其他可选的键盘辅助功能
示例：
- 此菜单按钮实现示例：https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html
- Twitter 使用
role="menu"实现类似的弹出窗口
- bootstrap 关于下拉菜单的一般准则 https://getbootstrap.com/docs/4.0/components/dropdowns/#accessibility
WAI ARIA 标准定义了一个实际的 role="menu" 小部件，但这 特定于触发动作或类似应用程序的菜单 职能。 ARIA 菜单只能包含菜单项、复选框菜单 项、单选按钮菜单项、单选按钮组和子菜单。
另一方面，Bootstrap 的下拉菜单被设计为通用的 并适用于各种情况和标记结构。为了 例如，可以创建包含额外的下拉菜单 输入和表单控件，例如搜索字段或登录表单。为了 因此，Bootstrap 不期望（也不自动添加）任何 真正的 ARIA 菜单所需的角色和 aria- 属性。作者 必须自己包含这些更具体的属性。
我的问题有点类似，但在决定 menuitem 角色时我需要一些帮助。
要求：
这就是我的弹出菜单的样子：
- 有 2 个部分由分隔线隔开
- 第一部分包含一些信息和一些交互元素
- 第二部分有链接
- 对于第二部分，我对在每个部分都使用
menuitem角色非常满意 - 虽然我不太确定如何处理第一部分
- 根据目前的理解：
-
menu中没有menuitem角色的任何内容都将被忽略以创建可访问性树 -
menuitem的任何子级都已删除其语义。因此，menuitem中的button不会这样公布。
-
- 与 twitter 实现一样，我可以通过不向它们添加
menuitem角色来忽略第一部分中的非交互式元素，但我应该如何处理交互式元素。例如，对于Funds项目，我不能将role="menuitem"添加到整个容器中，因为这样Add Funds按钮将不适用于屏幕阅读器用户（？）。 - 我可以在按钮上添加
role="menuitem"，并确保添加一个更好的aria-label，它会宣布当前资金以及允许用户单击按钮添加资金，但我不是真的确定这一点。
问题：
- 在这种情况下是否应该应用任何其他 ARIA 角色/可访问性语义？这个用例是符合 role="menu" 定义的菜单吗？
- 如果 role="menu" 和 role="menuitem" 最适合此设置，我应该如何处理组件第一部分中的交互元素？
- 如果我的要求不适合任何弹出角色，是否可以不使用
aria-haspopup并且仅使用 aria-expanded 公开它？
其他资源：
【问题讨论】：
标签： javascript html accessibility wai-aria web-accessibility