从鼠标vs屏幕阅读器中区分click事件 [英] Distinguish the click event from mouse vs screenreader

问题描述

我构建了一个拖放组件，它的工作原理像一个超级按钮，但是现在我需要使它适合屏幕阅读器用户使用。

我已经有了解决方案的执行完成。基本上，它是一个上下文菜单，当按下Enter键时会弹出该菜单，并允许在其中移动内容。

在没有SR（屏幕阅读器）的情况下进行导航时，这就像一个超级按钮一样工作，因为

问题是当使用SR（我用NVDA测试）时，不会触发键事件，而是转到点击事件（这是拖放操作的一部分，不适合非视觉用户使用）

更改角色应用程序的c $ c>属性有效，但SR中的其他快捷方式无效。

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

在SO上已经存在类似的问题，但尚未得到答案。

Edit1：添加HTML结构信息

 < div> 
< img src = some-image.jpg aria-hidden = true> 
< div class = card-container（click）= cardClicked（$ event）（keypress）= showContextMenu（$ event）> 
< span>卡名< / span> 
< / div> 
< / div> 
  

解决方案

我想出了 not-如此漂亮的解决方案，其中包括创建一个仅限screenreader的元素并处理对该元素的单击，如果该元素发生单击，则只能由SR触发。

 < div> 
< img src = some-image.jpg aria-hidden = true> 
< div class = card-container（click）= cardClicked（$ event）> ; 
< span aria-hidden = true>卡名< / span> 
< span class = sr-only（click）= showContextMenu（$ event）>卡名< / span>< ----只能由SR 
< / div> 
< / div> 
 单击/ pre> 
I built a drag and drop component, and it works like a charm, but now I need to make it accessible for screen reader users.

I already have the implementation of the solution done. Basically its a context menu that pops when the enter is pressed and allow to move things around.

This works like a charm when navigating without the SR (screen reader), because the implementation that I made listen to KeyEvents (keypress and keydown).

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)

Changing the role attribute to application works, but other shortcuts from the SR doesn't.

Is there a reliable way to detect if the click event was triggered by the SR ? Or some other keyboard event that I can listen that is triggered when SR is turned on ?

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

Edit1: Adding  HTML structure information
<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>

解决方案
I've figured out a not-so-pretty solution, which involves creating a screenreader only element and handle the click on this element, if the click happens on that element, it could only be triggered by the SR.
<div>
  <img src="some-image.jpg aria-hidden="true">
  <div class="card-container" (click)="cardClicked($event)">
    <span aria-hidden="true">Card name</span>
    <span class="sr-only" (click)="showContextMenu($event)">Card name</span> <---- It can only be clicked by the SR
  </div>
</div>


                        
这篇关于从鼠标vs屏幕阅读器中区分click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！