Motion Stock photos by Vecteezy

Why native <button> cannot be activated with a keyboard?

There is a widely accepted claim among accessibility specialists, that native <button> elements are accessible by default. This is true: native buttons come with built-in keyboard support, proper roles, and states. However, it is still possible to accidentally break their accessibility, resulting in a button that cannot be activated with the keyboard, although it still works with a mouse.

Native <button> as a remedy for inaccessible custom controls

Accessibility professionals often recommend replacing custom, inaccessible controls with native <button> elements. This advice is generally valid. However, even when developers follow this recommendation, buttons may still fail to work with the keyboard.

Quick recap on how keyboard activation works

Usually, nothing special is required to make a button operable with the keyboard. Once a click listener is assigned to the button, it can be activated with Space or Enter.

Possible root causes

Although native buttons are designed to be keyboard-accessible, certain implementation errors can disrupt this functionality. Here are some potential causes:

Event Listeners on Incorrect Elements: An issue occurs when a click event listener is placed on an inner element rather than the button itself. For example:

<button>
    <span id="icon">Click Me</span>
</button>
<script>
    document.getElementById('icon').addEventListener('click', () => {
        console.log('Button clicked');
    });
</script>

While the span will respond to mouse clicks, the button will not activate when pressing enter or space because the event listener is not attached to the button itself.

Get Iwona Pękała’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Overriding keydown Behavior: Another issue arises when developers override keyboard events. For instance:

button.addEventListener('keydown', (event) => {
    if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        console.log('Enter or space pressed');
    }
});

This code prevents the default action of pressing Enter or Space, which disrupts keyboard activation.

Suggested resolutions

1. Ensure that click events are always assigned directly to buttons, not to inner or outer elements.
2. Handle keydown events carefully to avoid breaking keyboard activation.

Can auditor identify a root cause?

For developers, the information above should suffice to identify and address keyboard activation issues. If further investigation is required, the following sections provide guidance for detecting and analyzing problems. These methods are primarily aimed at accessibility auditors, though developers might find them useful in some cases. Event listeners can be checked in almost any browser with a developer console, but we will use Firefox because it shows “event” badges, which make this process quicker.

Detecting mismatched event listeners

Assume the button can be clicked with a mouse but cannot be activated with the keyboard. Here is how to investigate mismatched listeners using Firefox:

• Open the website in Firefox and inspect the affected button using Developer Tools.
• Check if the button is marked with an “event” badge, which indicates the presence of any event listeners.
• Click on the “event” badge to view all attached events and verify whether a click event is present on the button.
• If the click event is not found on the button itself, inspect outer or inner elements to check if they have an onclick event.
• Firefox’s “event” badge makes it relatively straightforward to detect and analyze event listener mismatches without requiring deep analysis of JavaScript.

The button has no event listener, but its inner <span> has a click event listener instead.

Detecting broken keydown event

Debugging obfuscated JavaScript is complex and typically not expected of auditors. However, a keydown event on the button can hint a problem. Here is how auditors can detect such cases using Firefox:

• Open the website in Firefox and inspect the affected button using Developer Tools.
• Click on the “event” badge to view all attached events and verify if a keydown event is attached to the button.
• If a keydown event is found, it may indicate that this event is the root cause of the issue.

The click event is correctly assigned to the button, but an additional keydown event may interfere with keyboard activation.

Final notes

This article explains two possible root causes of native <button> elements failing to activate with the keyboard, but there may be more. The flexibility of the web means there are countless ways to inadvertently break functionality. These examples can help developers and auditors address common issues while staying alert to other potential problems.