Do not hide the document body with aria-hidden

WCAG 1.3.1
Info and Relationships

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

Never hide the body; hide only inactive regions with aria-hidden.

Why this matters and how to fix it

Why this matters

Setting `aria-hidden="true"` on `<body>` or top-level containers removes all content from the accessibility tree. Screen readers announce nothing, making the page completely unusable.

How to fix this issue

Never apply `aria-hidden` to `<body>`. For modals, hide only background content by marking siblings of the dialog as `aria-hidden="true"`. Use CSS for visual hiding but not for accessibility hiding. Verify dialogs remain reachable and background content is skipped.

Automated detection · Manual review recommended

Developer guidance

Common in custom modal implementations. Follow a modal pattern that: (1) moves focus into the dialog, (2) traps focus, (3) hides only background content with `aria-hidden`, (4) restores focus on close. Test keyboard and screen reader behavior to ensure only the dialog is accessible.

Code examples

Incorrect Implementation

<body aria-hidden="true">...</body>

Correct Implementation

<body>...</body>

Real-World Examples

Before

<body aria-hidden="true">
  <header>Site header</header>
  <main>Page content</main>
</body> <!-- Entire page inaccessible to screen readers -->

After

<body>
  <header aria-hidden="true">Site header</header>
  <main aria-hidden="true">Page content</main>
  <div role="dialog">Modal content</div> <!-- Only modal accessible -->

Manual testing

  1. 1. Inspect `<body>` and top-level containers for `aria-hidden`.
  2. 2. Ensure no top-level container is hidden from the accessibility tree.
  3. 3. For modals, hide only sibling content with `aria-hidden="true"`.
  4. 4. Test keyboard navigation and screen reader to confirm only intended content is accessible.
  5. 5. Automate modal focus and visibility testing in CI to prevent regressions.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance