How to fix click-events-have-key-events?
Last updated:
How to fix click-events-have-key-events linting error?
The easiest way to make a clickable element usable for keyboard users is to use native HTML elements instead of using <div onClick={...}/> . Native HTML elements which are accessible by default are button and a .
If it's not possible to use native clickable HTML elements, you should use one of the following techniques to add a keyboard listener:
<div onClick={handler} onKeyDown={handler} tabIndex="0" role="button">
# Or
<div onClick={handler} onKeyUp={handler} tabIndex="0" role="button">
# Or
<div onClick={handler} onKeyPress={handler} tabIndex="0" role="button">Note the tabIndex="0" and role="button" which are important for accessibility!
There are 6 keyboard WCAG Criteria
Does your website comply with all of them?
Conclusion
Fix the click-events-have-key-events linting error in your React, Angular, Vue or Svelte application by using an HTML element that is clickable as per the HTML specification. If that is not possible, add keyboard event listener, a role="button" attribute and a tabIndex attribute.
For more info see:
As the founder of ExcellentWebCheck, I'm very passionate about accessibility and ensuring equal access to information and services online. With the current speed of digitalization, it is crucial to make sure that everyone has access to important goods and services such as healthcare, financial services, education, and government resources, regardless of their abilities. By advocating for inclusive design principles and leveraging cutting-edge technologies, we aim to create digital environments that are not only compliant with accessibility standards but also intuitive and user-friendly for all individuals.