What This Rule Checks
The aria-hidden=”true” attribute is used to hide elements from assistive technologies like screen readers. Applying this attribute to the <body> element, however, makes the entire webpage inaccessible to users relying on such technologies, preventing them from interacting with the content.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content.
Why This Matters
When the <body> element has aria-hidden=”true”, the entire page becomes invisible to assistive technologies. Screen reader users experience a completely blank page. This is a critical WCAG 4.1.2 violation that renders the entire site unusable.
How to Fix
Remove the aria-hidden=”true” attribute from the <body> element.
Reconsider if certain content should be hidden from assistive technologies and relocate it if needed. Only apply aria-hidden to elements that are meant to be hidden from screen reader users, like inactive dialogs or collapsed menus.
Code Examples
<!-- Entire page hidden from assistive technologies -->
<body aria-hidden="true">
<header>
...
</header>
<main>
...
</main>
</body>
Copy
<!-- Only background content hidden during modal -->
<body>
<div aria-hidden="true" class="page-backdrop">
...
</div>
<div role="dialog" aria-modal="true" aria-label="Settings">
<h2>Settings</h2>
...
</div>
</body>
Copy
Common Mistakes to Avoid
- Setting aria-hidden=”true” on <body> when opening a modal dialog.
- Using JavaScript that accidentally applies aria-hidden to the body instead of a wrapper.
- Leaving aria-hidden=”true” on the body after closing a modal.
Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.
Related WCAG Criteria
- 4.1.2: Name, Role, Value
- 1.3.1: Info and Relationships