Javascript “区分鼠标”；点击"；和屏幕阅读器“；按「；

我正在制作一个可访问的网站菜单，并想区分鼠标“点击”和画外音“按下”来打开子菜单。当I console.log事件时，鼠标事件在画外音“Press”上触发，而不是在键盘事件上触发

有没有办法区分这两者的区别

目前，该菜单是基于鼠标悬停的，我已阻止单击事件切换子菜单。但是，我希望仅使用键盘的用户能够使用屏幕阅读器打开子菜单，指示用户使用command+option+spacebar进行按键，从而触发鼠标事件“单击”

我现在正在研究的一个解决方案是，仅当鼠标悬停处于活动状态时才禁用单击事件

更新：

目标： 为能看见的人触发超级菜单弹出窗口，并链接到显示不能看见的人的超级菜单链接的页面。根据我的研究，超大菜单，即使编码精美，对视力受损的人来说也是一种痛苦。即使aria可以判断菜单项是可扩展的，但识别菜单项已展开并不是直观的，它似乎不会在展开时发出通知。我认为这将是一个更好的体验为用户导航到一个新的页面，并跳到大菜单链接的内容

解决方案： 通过使用一组事件监听器，我能够成功且独立地瞄准键盘输入点击、画外音/屏幕阅读器点击和鼠标点击

在鼠标输入到菜单项时，我设置了一个preventClick标志，在鼠标输出时，我删除了该标志，以便单击菜单项不会跟随链接，只打开子菜单

按下键时，我检查是否按下了“回车”键。如果是这样的话，我会显示子菜单并防止链接被跟踪，这样用户和选项卡就可以通过mega菜单项

这样屏幕阅读器就可以点击链接，进入专门显示mega子菜单的页面

或者，对于屏幕阅读器，我可以打开子菜单并将键盘焦点发送到子菜单的第一个元素。不确定这对用户来说是否更直观

评论：

---

如果您认为此解决方案存在问题，请告诉我。到目前为止效果很好。它假设人们的运动控制问题和视力良好使用tab+enter导航，而视力受损的人使用屏幕阅读器单击等效项，例如画外音命令+选项+空格。

最好的办法是覆盖菜单项上的AccessibilityPerformation，处理NSAccessibilityPressAction，然后传递给super的实现，以像往常一样处理事情，而无需重写任何内容。我还没有试过这个，但我认为它有很好的工作机会。关键是，VoiceOver调用AccessibilityPerformation（更具体地说，是AppKit应VoiceOver的请求提供的可访问性支持），因此您知道某些辅助技术（例如VoiceOver）请求打开菜单，而不是鼠标

---

出于好奇，我仍然想知道你为什么要区分这两种情况，你想要实现什么不同的行为。

你会从这篇博文中注意到，无法直接区分鼠标用户和屏幕阅读器用户

即使有可能，尝试这样做也被视为侵犯隐私，因为这相当于用户将自己标识为残疾人。应该没有任何理由想这样做-您的用例是什么

更新 您的解决方案将适用于除触摸设备以外的任何地方，因为触摸设备不存在悬停，但是，尽管如此，您将遇到太多的麻烦。只要你在语义上标记mega菜单，盲人用户在导航它时就不会有问题

---

查看可合理访问的超大菜单实现。

感谢您的回复。我不清楚我的需求是基于网络的，我不相信我可以访问AccessibilityPerformation。我将更新这个问题，使之更具体，并解释我提出这个问题的原因。此外，并非所有键盘用户都是屏幕阅读器用户。人们可能行动不便，但视力很好，或者他们只有一个笔记本触摸板可以使用。防止点击事件，并用更复杂和非标准的命令+选项+空间（Windows？Android呢？）是一个维护噩梦，也是一个可访问性和可用性问题。@stringy我已经更新了我的问题，并提供了一个潜在的解决方案，capital One示例是一个比我见过的大多数示例更好的实现。我可能会使用类似的概念，除了使用aria来通知用户，而不是使用额外的可扩展链接。这也将简化我的工作。