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
How to make your page accessible to assistive technology users #
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:
<p>Main page content</p>
<div class="dialog" role="dialog" aria-modal="true" aria-label="Sample dialog">
<p>Sample dialog content</p>
- Source code for
[aria-hidden="true"]is present on the document
- aria-hidden="true" must not be present on the document <body> (Deque University)