javascript - 区分鼠标 "click"和屏幕阅读器 "Press"

Question

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

有办法区分吗？

当前菜单是基于鼠标悬停的，我已阻止 Click 事件切换子菜单。然而，我希望仅使用键盘的用户能够使用屏幕阅读器打开子菜单，该子菜单指示用户使用命令+选项+空格键进行按下，从而触发鼠标事件“单击”...

我现在正在研究的一个解决方案是仅在悬停处于事件状态时禁用点击事件...

更新:

目标:为可以看到的人触发大型菜单弹出窗口，并链接到为看不到的人显示大型菜单链接的页面。根据我的研究，大型菜单即使编码精美，对于视障人士来说也是一种痛苦。即使 aria 可以知道菜单项是可扩展的，但识别菜单具有扩展功能并不直观，但似乎不会在扩展时发出通知。我认为这对于用户导航到新页面并跳到大型菜单链接的内容来说会是更好的体验。

解决方案:通过使用事件监听器集合，我能够成功且独立地定位键盘 ENTER 单击、VoiceOver/屏幕阅读器单击和鼠标单击。

在鼠标移入菜单项时，我设置了一个阻止点击标志，在鼠标移出时，我删除了该标志，以便单击菜单项时不会跟随链接，而只会打开子菜单。

在按键时，我检查是否按下了“enter”键。如果是这样，我会显示子菜单并阻止链接被跟踪，以便用户和选项卡浏览大型菜单项。

这使得屏幕阅读器点击链接进入专门显示大型子菜单的页面。

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

评论:如果您认为此解决方案存在问题，请告诉我。到目前为止效果很好。它假设人们的运动控制问题和良好的视力使用 Tab + Enter 进行导航，而视力受损的人则使用屏幕阅读器单击等效项，例如。 VoiceOvers Command+Option+空格。

Answer 1

您将从这篇博文中注意到，不可能天真地区分鼠标用户和屏幕阅读器用户

http://unobfuscated.blogspot.com/2013/05/event-handlers-and-screen-readers.html

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

更新

您的解决方案将适用于除触摸设备之外的任何地方，触摸设备不存在悬停，但是话虽这么说，您会遇到太多麻烦。只要您对大型菜单进行语义标记，盲人用户就可以轻松导航。

看看https://www.capitalone.com/一个合理可访问的大型菜单实现。