Custom control cannot be reached with the keyboard

Why does it matter?

WCAG 2.1.1 asks that everything works from a keyboard; this element says it is a control, but nothing puts it in the Tab order, so keyboard users cannot reach it. A script may add that when the page runs, so check the live page.

Who it affects: Screen reader and keyboard users, who depend on ARIA and focus order being correct to understand and operate the page.

What does Lumtera flag?

An element with a control's role, such as role="button", that nothing puts in the Tab order. On raw content this is Needs review, because a script may add that later; on the running page's snapshot in review mode it is an error.

Check ID role-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>, which work with the keyboard out of the box. If you must keep this element, add tabindex="0" and make Enter and Space do what a click does.

Example

<div role="button">Open menu</div>

<button type="button">Open menu</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 from the top of the page. Focus should move in reading order and never land on something invisible or silent.