Skip to content
Learn Measure Blog Case studies About
On this page
  • How Lighthouse identifies hidden body elements
  • How to make your page accessible to assistive technology users
  • Resources

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

Oct 17, 2019
Appears in: Accessibility audits
On this page
  • How Lighthouse identifies hidden body elements
  • How to make your page accessible to assistive technology users
  • Resources

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
The Lighthouse Accessibility score is a weighted average of all the accessibility audits. See the Lighthouse accessibility scoring post for more information.

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 #

  • Source code for [aria-hidden="true"] is present on the document <body> audit
  • aria-hidden="true" must not be present on the document <body> (Deque University)
Last updated: Oct 17, 2019 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.