Question

除了其他方面，

WCAG 2.0 AA合规性要求完全支持网站的键盘导航。我正在利用tabindex和角色属性为用户提供标签键导航。在实现辅助功能时，我遇到了以下问题：

<div id="app">
  <div>
    <button tabindex="1"
            onclick="console.log('clicked')">
      button
    </button>
    <div tabindex="2"
         onclick="console.log('clicked')"
         class="div-button"
         role="button">
      selectable div
    </div>
  </div>
</div>

使用鼠标单击元素自然会起作用，并按预期触发click事件。但是，当使用tab导航到元素并命中返回/空格时，仅为按钮触发事件。为什么是这样？我可以以某种方式从键盘启用click事件到div元素吗？

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

Answer 1

根据MDN：

就其本身而言，角色=＆＃34;按钮＆＃34;可以使任何元素（例如<p>，<span>或<div>）显示为屏幕阅读器的按钮控件

以下警告具体描述，该属性不提供任何内置键盘功能：

警告：使用按钮角色标记链接时要小心。预计会使用Space或Enter键触发按钮，而预期会使用Enter键触发链接。换句话说，当链接用于表现像按钮时，单独添加role="button"是不够的。还需要添加一个侦听Space键的键事件处理程序，以便与本机按钮保持一致。

换句话说 - 提供的示例描述了<a>代码行为 - role='button' 没有这个功能：

document.querySelectorAll('[role="button"]').forEach(function(button) {

    button.addEventListener('keydown', function(evt) {

       if(evt.keyCode == 13 || evt.keyCode == 32) {
           button.click();
       }

    });

});

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

Answer 2

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

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

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

2 个答案: