Users of screen readers and other assistive technologies need information about the behavior and purpose of controls on your web page. Native 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
element hides your entire web page from assistive technology users.
How Lighthouse identifies hidden body elements
flags pages whose
<body> element has an
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
<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
to a lower-level container element while the dialog is open.
For example, this sample hides the
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)