aria-hidden="true" must not be added to the <body>
Last updated:
How to fix the aria-hidden body issue?
Remove aria-hidden="true" from the <body> element:
BAD:
hides all page content from screen readers
<body aria-hidden="true">
<main>Page content here</main>
</body>
CORRECT:
<body>
<main>Page content here</main>
</body>
If you need to hide background content when a modal is open, apply aria-hidden to specific containers — never to <body>:
CORRECT:
hide background content for a modal, not the body
<body>
<main aria-hidden="true">Background content</main>
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
<h2 id="dialog-title">Dialog title</h2>
<p>Dialog content</p>
</div>
</body>
Why is this important?
aria-hidden="true" instructs assistive technologies to completely skip an element and all its children. When applied to <body>, every piece of content on the page becomes invisible to screen reader users — they experience a completely empty page.
This mistake often occurs when JavaScript incorrectly sets aria-hidden on the wrong container. Always target only the specific elements that should be hidden, not root containers.
More info:
Free Website Accessibility Audit
Was this article helpful?
Thanks for your feedback!