在单击侦听器旁边添加 keydown 事件 - 要侦听哪些键事件？答案

【问题标题】：Adding keydown events alongside click listeners - which key events to listen to?在单击侦听器旁边添加 keydown 事件 - 要侦听哪些键事件？
【发布时间】：2019-07-05 05:28:04
【问题描述】：

我正在尝试为我的应用程序添加更多可访问性，因此我已将 eslint-plugin-jsx-a11y 添加到我的 eslint 进程中。这很棒，但是我对 click-events-have-key-events 规则 (https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md ) 有疑问。

我想在我的反应代码中使用onClick 的任何地方添加onKeyDown 或onKeyPress。但是我不确定我应该听哪个键码。

如果，例如，我只是这样做

  <div
     onClick={this.myFunction}
     onKeyDown={this.myFunction}
     />

当我离开那个 div 时，那个 onKeyDown 函数就会触发。所以我想我需要过滤 keyCodes，但是在尝试满足可访问性标准时，我不确定我需要听哪个 keyCodes。输入 keyCodes 是否足够 - 例如，所有屏幕阅读器都尊重这一点吗？

寻找对此的一些见解，以帮助我的应用更易于访问和屏幕阅读器友好。

【问题讨论】：

标签： javascript reactjs accessibility

【解决方案1】：

您没有具体询问此问题，但最好的解决方案是尽可能使用原生 html 元素。请参阅first rule of ARIA use。原生元素具有内置在元素中的行为，可以很好地与屏幕阅读器配合使用。

但是，有时您需要创建自定义元素，这就是 ARIA 的用武之地。但是您需要 attributes 和 role 来制作自定义元素，此外，如果元素将是交互式的。

您侦听的键盘事件类型取决于role。例如，如果您正在创建自己的 link 元素，而不是使用，您将侦听 ENTER 键。如果您正在创建自己的 button，您会听到 both ENTER 和 SPACE 键。

“WAI-ARIA Authoring Practices 1.1”中的设计模式解释了您监听的键类型。例如，请参阅“Keyboard Interaction”部分的按钮。

【讨论】：