[aria-hidden="true"] is present on the document <body>
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:
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)