Aria-hidden elements must not contain focusable elements
Estimated effort: about 10 minutes.
Setting aria-hidden="true" on an element tells screen readers to skip it entirely — but if that hidden element still contains something a keyboard can Tab to (a link, button, or input), a keyboard user can land on invisible or "not there" content, and a screen reader user won't hear anything about where their focus just went. This commonly happens with collapsed accordion panels or hidden slider slides that still contain clickable links.
How to fix it
- Find any element with aria-hidden="true" and check whether it, or anything inside it, can still receive keyboard focus — most often a collapsed FAQ/accordion panel, an off-screen carousel slide, or a mobile menu panel that is hidden but not fully removed from the tab order.
- If the hidden content includes a link, button, or form field, also add tabindex="-1" to that focusable element (or disabled for form controls) so it cannot receive keyboard focus while its container is hidden.
- When the panel/slide becomes visible again (e.g. the accordion is expanded or the slide becomes active), remove aria-hidden="true" and restore tabindex to its normal state (usually by removing the tabindex="-1" override) so the content becomes reachable again.
- Do not rely on aria-hidden="false" on a nested element to "undo" aria-hidden="true" on an ancestor — once a container is hidden, an inner element cannot be un-hidden by setting its own aria-hidden to false.
- Tab through the page with the panel/slide collapsed and confirm focus never lands on content that is currently hidden from view.
Elementor note
This is a known, publicly reported issue on Elementor's own GitHub discussion board (github.com/orgs/elementor/discussions/15524): the Accordion and Toggle widgets render their tab panels with role="tab"-style show/hide behavior, and if a collapsed panel's content includes a keyboard-focusable element such as a link, that link can remain in the tab order even while its panel is hidden. Check any Accordion/Toggle widget whose collapsed content includes links or buttons.
Before and after
Before
<div aria-hidden="true">
<a href="/shipping-policy">Read our shipping policy</a>
</div>
After
<div aria-hidden="true">
<a href="/shipping-policy" tabindex="-1">Read our shipping policy</a>
</div>