Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

A: aria-hidden='true' must not be present on the document body (WCAG 1.3.1 + 4.1.2)

aria-hidden-body

Ensure that aria-hidden="true" is not used on the <body> element of the document.

This means

If aria-hidden="true" is set on the <body>, the entire page will be hidden from screen readers. Assistive technologies will no longer see accessible content – navigation and context are lost.

Impact

The page appears empty or unusable to users with screen readers; focus and reading order break down. This leads to abandonment and a clear WCAG violation.

Recommendation

  • Never use aria-hidden on the <body> element.
  • Only hide specific areas (e.g., background content when a dialog is open).
  • For modals: temporarily apply aria-hidden="true" (and optionally inert) to the background area (e.g., <main>); set the dialog with role="dialog" + aria-modal="true".
  • Reset states after closing.

Example

Problematic

<body aria-hidden="true">
  <main>…content…</main>
</body>

Better

<body>
  <main id="page-content" aria-hidden="true">…content…</main> <!-- e.g., during modal -->
  <div role="dialog" aria-modal="true" aria-labelledby="dlg-title">
    <h2 id="dlg-title">Notice</h2>
    …
  </div>
</body>
Related WCAG criterion:
WCAG 1.3.1 - Info and Relationships
WCAG 4.1.2 – Name, Role, Value