Question

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

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

在没有SR（屏幕阅读器）的情况下进行导航时，这就像一种魅力，因为我实现了监听KeyEvent（键和键按下）的实现。

问题是，当使用SR（我已使用NVDA测试过）时，不会触发关键事件，而是转到click事件（这是拖放的一部分，不适用于非视觉用户）

将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

问题是，当使用SR（我已使用NVDA测试过）时，不会触发关键事件，而是转到click事件（这是拖放的一部分，不适用于非视觉用户）

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

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

虽然“ onclick”听起来像是与鼠标绑在一起的，但onclick事件实际上是映射到链接或按钮的默认操作的。当用户用鼠标单击元素时，会发生默认操作，但当用户将元素聚焦并按Enter或空格时，以及通过可访问性API触发元素时，也会发生默认操作。

您不可能通过屏幕阅读器，键盘或眼睛跟踪设备检测到它是否已完成。

Answer 2

我想出了一个不太漂亮解决方案，该解决方案包括创建一个仅限screenreader的元素并处理对该元素的单击，如果单击发生在该元素上，则可能是由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>

Answer 3

我可能会去买onclick和onmousedown。

如果触发了onmousedown，我将设置一个标志，以读取onclick，告诉我这是否实际上是指针事件。

类似的东西：

<button onmousedown="pointerFunction()" onclick="clickFunction()">Active this</button>

<script>
var isPointerEvent = false;
function pointerFunction() {
    isPointerEvent = true;

    // Do something for pointer users
}

function clickFunction() {
    if (isPointerEvent) {
        return isPointerEvent = false;
    }

    // Do something for keyboard / screen-reader users
}
</script>

尽管这将区分键盘用户（包括屏幕阅读器用户）和鼠标用户，但如果不能区分键盘用户和屏幕阅读器用户，则可以。为此，您自己提出的解决方案可以解决问题。但是，如果要传达给屏幕阅读器他们可以单击它，请记住将role="button"添加到可点击的<span>中。

我会在评论中将其添加到您的解决方案中，但是我在这里是新手，因此我不必借助“信誉”即可做到这一点。：-）

从鼠标vs屏幕阅读器中区分click事件

3 个答案: