Hidden element can still be focused

Why does it matter?

aria-hidden="true" hides content from screen readers but not from the Tab key, so keyboard users land on something that announces nothing.

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?

Links, buttons and form fields that can take keyboard focus inside an aria-hidden element. Focus guards that focus-trap scripts place around dialogs (React Focus Lock, Radix, Headless UI and sentinel links a script on the page uses) are for review, as are slides, drawers, dialogs and menus whose theme CSS may hide them; review mode, which sees what CSS hides, still reports one that is on screen as an error.

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

How do I fix it in WordPress?

Either remove aria-hidden="true", or add tabindex="-1" to every link, button and field inside the hidden element so keyboard focus skips it too.

Example

<div aria-hidden="true"><a href="/sale/">Sale</a></div>

<div aria-hidden="true"><a href="/sale/" tabindex="-1">Sale</a></div>

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.