Back to Learn
Pulseaccessibility

aria-hidden Is Not on the Body

What This Audit Checks

This audit verifies that aria-hidden="true" is not set on the <body> element. When the body is marked as hidden from assistive technologies, the entire page becomes invisible to screen readers.

Why It Matters

Setting aria-hidden="true" on the body hides every element on the page from screen readers. Users who rely on assistive technology will perceive a completely blank page and cannot interact with any content.

How to Fix It

  • Remove aria-hidden from the <body> element immediately. This is always a critical bug.
  • Audit your modal/dialog logic. This issue most commonly occurs when a modal script adds aria-hidden="true" to the body to hide background content, then fails to remove it when the modal closes.
  • Use inert instead. The inert attribute is a better way to disable background content behind modals without hiding the body.
<!-- Bad: entire page hidden from assistive tech -->
<body aria-hidden="true">...</body>

<!-- Good: no aria-hidden on body -->
<body>...</body>

<!-- Better for modals: use inert on the background wrapper -->
<div id="main-content" inert>...</div>
<div role="dialog" aria-label="Settings">...</div>

How Pulse Tracks This

Pulse flags this audit in your Lighthouse accessibility score. When the audit fails, Pulse shows which elements triggered it so you can fix them directly.

Resources