[aria-hidden="true"] is present on the document <body>

Appears in: Accessibility audits
On this page

Users of screen readers and other assistive technologies need information about the behavior and purpose of controls on your web page. Built-in HTML controls like buttons and radio groups come with that information built in. For custom controls you create, however, you must provide the information with ARIA roles and attributes. (Learn more in the Introduction to ARIA.)

Screen readers and other assistive technologies don't announce content that's marked as hidden. Applying the aria-hidden="true" attribute to your <body> element hides your entire web page from assistive technology users.

How Lighthouse identifies hidden body elements #

Lighthouse flags pages whose <body> element has an aria-hidden="true" attribute:

Lighthouse audit showing that a page's body element has the aria-hidden attribute

How to make your page accessible to assistive technology users #

Remove the aria-hidden="true" attribute from the <body> element of your page.

One reason developers mistakenly hide the body element is to prevent assistive technologies from announcing the main content of a page while a modal dialog is open. However, hiding the body hides all page content from assistive technology users, including the dialog.

A better solution is to apply the aria-hidden attribute to a lower-level container element while the dialog is open. For example, this sample hides the <main> element, which precedes the dialog in the HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    …
  </head>
  <body>
    <main aria-hidden="true">
      <h1>Page title</h1>
      <p>Main page content</p>
    </main>
    <div class="dialog" role="dialog" aria-modal="true" aria-label="Sample dialog">
      <p>Sample dialog content</p>
      <button>Close dialog</button>
    </div>
  </body>
</html>

Resources #

Last updated: — Improve article
Return to all articles
Share