javascript - 区分鼠标与屏幕阅读器的点击事件

Question

我构建了一个拖放组件，它的工作原理非常棒，但现在我需要让屏幕阅读器用户可以访问它。

我已经完成了解决方案的实现。基本上它是一个上下文菜单，当按下回车键时弹出并允许四处移动。

在没有 SR(屏幕阅读器)的情况下导航时，这就像一个魅力，因为我所做的实现会监听 KeyEvents(按键和按键)。

问题是在使用 SR 时(我用 NVDA 测试过)，按键事件没有被触发，而是转到点击事件(这是拖放的一部分，不适用于非视觉用户)

将 role 属性更改为 application 有效，但 SR 中的其他快捷方式无效。

是否有可靠的方法来检测点击事件是否由 SR 触发？或者当 SR 打开时我可以监听的其他一些键盘事件？

There is already a question like this on SO, but is unanswered .

Edit1:添加 HTML 结构信息

<div>
  <img src="some-image.jpg" aria-hidden="true">
  <div class="card-container" (click)="cardClicked($event)" (keypress)="showContextMenu($event)">
    <span>Card name</span>
  </div>
</div>

Answer 1

The problem is when using the SR (I tested with NVDA), the keyevents are not triggered, instead it goes to the click event (Which is part of drag and drop, not meant for non-visual users)

很大一部分潜在的屏幕阅读器用户实际上是视觉用户。盲人只是其中的一小部分:视力受损的人仍然可以保留一些视力，但文盲也可能会使用屏幕阅读器寻求帮助。

屏幕阅读器将始终发送默认事件，如 W3C 在 SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons 中指定的那样

While "onclick" sounds like it is tied to the mouse, the onclick event is actually mapped to the default action of a link or button. The default action occurs when the user clicks the element with a mouse, but it also occurs when the user focuses the element and hits enter or space, and when the element is triggered via the accessibility API.

您无法通过屏幕阅读器、键盘或眼动追踪设备检测到它是完成的。