Javascript 辅助功能-弹出菜单-菜单中菜单项以外的交互元素 问题陈述和现有理解

我有一个弹出窗口，其中包含不同种类的内容，分为几个部分，点击一个按钮就会触发。我试图在此实现中公开适当的可访问性/aria语义。（它不是一个模式对话框，而是一个简单的就地弹出窗口）。根据我目前的研究，我认为这是有意义的：

• aria在触发器按钮上展开

• 触发器按钮上的

  aria haspoop=“menu”

• 弹出窗口上的

  role=“menu”

• 弹出窗口内内容的

  role=“menuitem”

• 其他可选键盘可访问性

示例：

• 此菜单按钮实现示例：
• Twitter通过

  role=“menu”

• bootstrap关于下拉列表的一般指南

WAI ARIA标准定义了一个实际的role=“menu”小部件，但是 特定于触发动作或操作的菜单等应用程序 功能。ARIA菜单只能包含菜单项、复选框菜单 项目、单选按钮菜单项、单选按钮组和子菜单

另一方面，Bootstrap的下拉列表设计为通用 并且适用于各种情况和标记结构。对于 例如，可以创建包含其他内容的下拉列表 输入和表单控件，例如搜索字段或登录表单。对于 因此，Bootstrap不期望（也不会自动添加）任何 真正的aria菜单所需的角色和aria属性。作者 必须包括这些更具体的属性本身

我的问题有点类似，但我需要一些帮助来决定menuitem的角色

要求： 这是我的弹出菜单的外观：

• 有两个部分由分隔符分隔
• 第一部分包含一些信息和一些交互元素
• 第二部分有链接
• 对于第二部分，我非常满意在每一部分中使用

  menuitem

  角色
• 不过，我不太确定如何处理第一部分
• 根据目前的理解：
  • 创建辅助功能树时，将忽略

    菜单中没有
    菜单项
    角色的任何内容

  • menuitem

    的所有子项都将删除其语义。因此，

    菜单项

    中的

    按钮

    不会被宣布为这样
• 与twitter实现一样，我可以在第一节中忽略我的非交互元素，不向它们添加

  menuitem

  角色，但我应该如何处理交互元素。例如，对于

  Funds

  项目，我无法将

  role=“menuitem”

  添加到整个容器中，因为这样一来，

  addfunds

  按钮将无法用于屏幕阅读器用户（？）
• 我可以将

  role=“menuitem”

  添加到按钮中，并确保添加更好的aria标签，该标签会宣布当前资金，并允许用户单击按钮添加资金，但我并不确定这一点

问题：

• 在这种情况下，是否应该应用任何其他ARIA角色/可访问性语义？这个用例是一个符合role=“menu”定义的菜单吗
• 如果role=“menu”和role=“menuitem”最适合此设置，我应该如何处理组件第一部分中的交互元素
• 如果我的需求不适合任何弹出式角色，是否可以不使用

  aria haspopup

  公开它，而只使用aria expanded

其他资源：

---

我自己也是一名屏幕阅读器用户，根据经验，菜单相关的ARIA角色通常不合适，导致使用页面时出现困难。 因此，我最好的建议是不要在如此复杂的设置中使用它。使用aria扩展可能是最合理的，当然也足够了

一旦它超越了非常简单的项目，它就不再是严格意义上的真正菜单，屏幕阅读器在使它们可用和/或提供正确信息方面有各种各样的困难。 一个菜单应该只由按下就可以激活的项目组成，仅此而已。 请记住，ARIA是在考虑本地UI元素的情况下全局设计的。在本机（非web）程序中，菜单可以包含项目和分隔符，仅此而已。所以这里应该是一样的。 顺便说一句，相关问题也是这样说的

如果您在菜单中添加了更复杂的元素，则会出现以下问题，而这些问题的答案并不明显：

• 在开始输入之前，是否需要按enter键激活菜单中的文本字段
• 我是否需要按tab键才能到达项目内的按钮或链接？和文本字段还是选择字段
• 如何在不激活当前选项的情况下打开和关闭菜单中的选择？很少有人知道Alt+向下/向上箭头，很少有人在他们的web组件中实现它们

在菜单中添加更复杂的项会在Office2007+和Windows8+中显示功能区。它们与屏幕阅读器一起使用简直是噩梦。 您永远不知道是否必须按enter键、tab键或仅使用箭头键来达到所需。 所以请不要在网络上重复这一点