useKeyWithClickEvents (HTML)

Summary

Rule available since: v2.5.0
Diagnostic Category: lint/a11y/useKeyWithClickEvents
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Inspired from jsx-a11y/click-events-have-key-events

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "useKeyWithClickEvents": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce elements with a click event handler to also have at least one keyboard event handler.

Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screen reader users. This rule checks that interactive elements with an onclick attribute also include at least one of onkeydown, onkeyup, or onkeypress.

This does not apply to elements that are inherently keyboard-accessible (such as <button>, <input>, <select>, <textarea>, or <a> with an href attribute) or elements that are hidden from assistive technologies.

Examples

Invalid

1
<div onclick="handleClick()"></div>

code-block.html:1:1 lint/a11y/useKeyWithClickEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Elements with onclick must also include at least one keyboard handler: onkeydown, onkeyup, or onkeypress.
  
  > 1 │ <div onclick="handleClick()"></div>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.

Valid

1
<div onclick="handleClick()" onkeydown="handleKeyDown()"></div>

1
<div onclick="handleClick()" onkeyup="handleKeyUp()"></div>

1
<div onclick="handleClick()" onkeypress="handleKeyPress()"></div>

1
<button onclick="handleClick()">Submit</button>

1
<input onclick="handleClick()" />

Accessibility guidelines

WCAG 2.1.1