Clickable element cannot be used with the keyboard

Why does it matter?

WCAG 2.1.1 asks that everything works from a keyboard; this element has a click handler but cannot take focus and contains nothing that can, so keyboard users cannot trigger it. It is fine if the same action is available another way on the page.

Who it affects: Screen reader users who browse by a list of links, keyboard users, and people using voice control who say a link's words to click it.

What does Lumtera flag?

An element with an inline click handler that cannot take focus and contains nothing that can. For review: it is fine if the same action is available another way on the page.

Check ID click-not-focusable — use it to filter the content report or with wp lumtera issues --rule.

How do I fix it in WordPress?

Use a real <button> (or <a href> if it goes to another page), which works with the keyboard and screen readers out of the box. If you must keep this element, add role="button" and tabindex="0", and make Enter and Space do what a click does.

Example

<div onclick="openCart()">Cart</div>

<button type="button" onclick="openCart()">Cart</button>

How do I check the fix?

1. Update the post. The issue disappears from the Lumtera Accessibility sidebar on the next check, and from the site report on the next scan.
2. Press Tab through the page. Every link and button should receive visible focus, and its text should make sense read on its own.