Javascript JS：使用键盘导航时单击事件不触发

除其他外，法规遵从性要求完全支持网站的纯键盘导航。我利用tabindex和role属性为用户提供选项卡键导航。在实现辅助功能时，我遇到了以下问题：

按钮
可选div

用鼠标点击元素自然有效，点击事件按预期触发。但是，当使用tab导航到元素并单击return/space时，仅为按钮触发事件。为什么会这样？我能否以某种方式启用从键盘到div元素的click事件

我非常了解各种解决方法，包括将按键事件绑定到div。最终重构了标记并用按钮替换div，但我仍然想知道为什么会这样实现。

根据：

role=“button”本身可以使任何元素（例如，

、

或

）在屏幕阅读器上显示为按钮控件

以下警告特别说明该属性不提供任何内置键盘功能：

警告：使用按钮角色标记链接时要小心。按钮应使用

空格

或

回车

键触发，而链接应使用

回车

键触发。换句话说，当链接的行为类似于按钮时，仅添加

role=“button”

是不够的。还需要添加一个键事件处理程序，用于侦听

空格

键，以便与本机按钮保持一致

换句话说-提供的示例描述了

标记行为-

role='button'

不具有此功能：

document.querySelectorAll('[role="button"]').forEach(function(button) {
    button.addEventListener('keydown', function(evt) { 
       if(evt.keyCode == 13 || evt.keyCode == 32) {
           button.click();
       }
    });  
});

---

因为它超出了上述属性的功能，该属性仅用于屏幕阅读器。

我正在开发一个可访问的jquery日期选择器，我们使用NVDA作为屏幕阅读器。 上述解决方案在边缘浏览器中不起作用。 在jquery datepicker中，所有日期都驻留在锚标记内。通过使用键盘箭头，我们可以在日期选择器中导航。但在边缘浏览器屏幕阅读器阻止按键事件，所以我们无法导航

---

只有用户需要手动切换到焦点模式，然后只有按键事件才会触发。

您确定要触发

按键下和
按键上的
点击
？谢谢您的回答。现在知道在哪里可以找到这个东西了，我已经为预期的键盘功能提供了文档：。我发现浏览器自动（chrome、firefox、ie和edge至少）在元素（等）上实现默认行为，但不针对属性角色，这相当令人失望。标记为已回答，但如果您能进一步了解原因，我们将不胜感激。似乎所有的
可访问性
属性都只供屏幕阅读器使用。考虑<代码>角色=“对话”< /C>属性-看起来很明显，默认的元素是“代码>隐藏< /代码>？好的，使用
role=“button”
它的行为应该像按钮一样。但是，imo是以这种方式开发的（没有附加功能），以使其与其他属性保持一致，如
aria label
。它应该在
或一些自定义的可聚焦
上具有
的功能吗？额外的功能将过于复杂-只需使用
，
等等。我认为keypress属性将最有效：button.addEventListener（'keypress'，function（evt）{…}使用注释字段对上述答案进行注释。而不是答案字段
document.querySelectorAll('[role="button"]').forEach(function(button) {
    button.addEventListener('keydown', function(evt) { 
       if(evt.keyCode == 13 || evt.keyCode == 32) {
           button.click();
       }
    });  
});