Accessibility Rule: aria-hidden='true' must not be present on the document body

About This Accessibility Rule

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 <body> element is catastrophic because the <body> 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 <body>, 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 <body> element.

If aria-hidden="true" was added to the <body> 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 <dialog> element with the inert attribute on background content.

Here are some important things to keep in mind:

Never apply aria-hidden="true" to the <body> 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:

<body aria-hidden="true">
  <header>
    <h1>Welcome to My Site</h1>
    <nav>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <main>
    <p>This content is invisible to screen readers.</p>
  </main>
</body>

Correct: No `aria-hidden` on the body

Simply remove the attribute from the <body> element:

<body>
  <header>
    <h1>Welcome to My Site</h1>
    <nav>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <main>
    <p>This content is now accessible to everyone.</p>
  </main>
</body>

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 <body>:

<body>
  <div id="page-wrapper" aria-hidden="true">
    <header>
      <h1>Welcome to My Site</h1>
    </header>
    <main>
      <p>Main page content hidden while modal is open.</p>
    </main>
  </div>
  <div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
    <h2 id="dialog-title">Confirm Action</h2>
    <p>Are you sure you want to proceed?</p>
    <button>Yes</button>
    <button>Cancel</button>
  </div>
</body>

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.

Learn more: