Hidden content that can still be focused on Next.js
What this is
3 elements marked `aria-hidden="true"` still contain focusable items. Keyboard users land on controls that screen readers do not announce.
Who it affects
- Screen reader users
- Keyboard users
Standards
How to fix it
- Remove `aria-hidden` if the content should be available.
- Otherwise make the contents unfocusable: `tabindex="-1"` on controls, or use `inert`/`display:none` for fully hidden regions such as closed menus.
Example
Before
<div aria-hidden="true"><a href="/x">Menu</a></div>After
<div><a href="/x">Menu</a></div>Alternative: keep aria-hidden and add the `inert` attribute so nothing inside can be focused.
On Next.js
ARIA attributes live in your JSX; search the component, fix or delete the attribute. Prefer native elements over ARIA roles where possible.
Other platforms
Prompt for an AI coding tool
Scan your site with AccessibilityBrief and you get a ready-to-use prompt for this problem, with the exact elements on your pages filled in.
Check your own website
Paste a web address. The free scan checks one page and shows what it finds.
More fixes
Automated testing detects only a portion of WCAG issues. Manual testing is required to assess full conformance.