Do not hide the document body with aria-hidden
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Setting aria-hidden="true" on the <body> or any top-level container removes all page content from the accessibility tree. Screen readers will have nothing to announce, effectively locking users out of the experience. This mistake is especially harmful on single-page applications where visibility is dynamically controlled and can unintentionally hide the entire interface.
How to fix this issue
Never apply aria-hidden to the <body> element. Use visibility or display CSS properties to visually hide modal dialogs or off-screen regions instead of removing them from the accessibility tree. When using frameworks that toggle aria-hidden dynamically, confirm through testing that only non-interactive background content is hidden while active dialogs remain visible to assistive technologies.
Developer guidance
This issue often arises when developers implement modal focus management or loading overlays. Ensure that global containers are never assigned aria-hidden. Instead, scope visibility changes to specific sections of the DOM. Add automated integration tests that simulate tab navigation and screen-reader announcements to verify correct visibility handling during UI transitions.
Code examples
Incorrect Implementation
<body aria-hidden="true">...</body>Correct Implementation
<body>...</body>
Trusted by organizations across Europe working toward WCAG and EAA conformance