In HTML, visible, non-interactive elements with click handlers should have at least one keyboard listener to ensure accessibility for keyboard-only users. This means that when users navigate through a webpage using only their keyboard, they should be able to interact with these elements as well.
For example, let’s say we have a simple button that triggers an action when clicked:
<button onclick="doSomething()">Click me</button>To make this button accessible to keyboard-only users, we can add a keyboard event listener, such as an “Enter” key handler, which triggers the same action as the click event:
<button onclick="doSomething()" onkeydown="if (event.keyCode === 13) { doSomething(); }">Click me</button>In this example, when a keyboard-only user focuses on the button and presses the “Enter” key, the associated action will be triggered just like when the button is clicked. This ensures that all users, regardless of their input method, can interact with the button.