# aria-hidden='true' must not be present on the document body > Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/aria-hidden-body > Attribution: Rocket Validator (https://rocketvalidator.com) > License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/) The `aria-hidden` attribute controls whether an element and its children are exposed to the accessibility tree — the data structure that assistive technologies use to interpret and present web content. When set to `"true"`, the element and all of its descendants are hidden from screen readers and other assistive tools. Applying this attribute to the `` element is catastrophic because the `` contains all visible page content, meaning nothing on the page will be announced or navigable for assistive technology users. This issue has a **critical** impact on users who are blind or have low vision and rely on screen readers. While sighted users can see and interact with the page normally, screen reader users experience a completely empty page. Keyboard users may still be able to tab to focusable elements like links and buttons, but the screen reader will remain silent — providing no context about what those elements are or what the page contains. This rule relates to two WCAG 2.0/2.1/2.2 Level A success criteria: - **WCAG 1.3.1 (Info and Relationships):** Content structure and relationships must be programmatically determinable. Hiding the entire body breaks this requirement because no structural information reaches assistive technologies. - **WCAG 4.1.2 (Name, Role, Value):** All user interface components must have accessible names and roles. When `aria-hidden="true"` is on the ``, no component can communicate its name, role, or value to assistive technologies. ## How to Fix It The fix is straightforward: **remove the `aria-hidden="true"` attribute from the `` element.** If `aria-hidden="true"` was added to the `` intentionally — for example, as part of a modal dialog pattern — restructure your approach. Instead of hiding the entire body, hide only the background content behind the modal using `aria-hidden="true"` on sibling wrapper elements, or use the `` element with the `inert` attribute on background content. Here are some important things to keep in mind: - **Never apply `aria-hidden="true"` to the `` element.** There is no valid use case for this. - **Use `aria-hidden="true"` sparingly** and only on non-interactive, decorative, or redundant content that provides no value to screen reader users. - **Be cautious with `aria-hidden="false"`.** It does not reliably re-expose content that is already hidden via CSS (`display: none`, `visibility: hidden`) or the HTML `hidden` attribute. Always test thoroughly if you rely on this approach. ## Examples ### Incorrect: `aria-hidden="true"` on the body This makes the entire page inaccessible to assistive technologies: ```html

Welcome to My Site

This content is invisible to screen readers.

``` ### Correct: No `aria-hidden` on the body Simply remove the attribute from the `` element: ```html

Welcome to My Site

This content is now accessible to everyone.

``` ### Correct: Hiding background content behind a modal dialog If your original intent was to hide background content while a modal is open, hide the background wrapper — not the ``: ```html

Confirm Action

Are you sure you want to proceed?

``` In this pattern, only the `#page-wrapper` is hidden from assistive technologies, while the dialog remains fully accessible. Remember to remove `aria-hidden="true"` from the wrapper when the dialog is closed.