Accessibility Insights

Back to Info and Examples for Accessibility Insights for Web


The attribute aria-hidden="true" must not be used on the <body> element.

Why it matters

In some browsers, the attribute aria-hidden="true" hides an element and all its children from assistive technologies. Users can still use the keyboard to navigate to any focusable child elements in the <body>, but their content is inaccessible to people who use assistive technologies. For example, screen readers are silent.

How to fix

  1. Remove aria-hidden="true" from the <body> element.
  2. Use aria-hidden="true" only on elements whose content is decorative or redundant from the perspective of people who use assistive technologies. Note that adding aria-hidden="false" to an element whose parent has aria-hidden="true" would not reveal it to assistive technologies.




A web page includes a modal dialog. In an attempt to hide the underlying page content when the dialog is open, the attribute aria-hidden="true" is added to the <body> element. As a result, all page content – including the modal dialog – is hidden from assistive technology users.
<body class="has-dialog" aria-hidden="true">

<button class="action-button">Sign in</button>


The attribute aria-hidden="true" is never applied to the <body> element. Instead, when the dialog is open, elements outside the dialog are removed from the tab order
<body class="has-dialog">

<button class="action-button" tabindex="-1">Sign in</button>

About this rule

This rule passes if:

  • No aria-hidden attribute is present on the document <body> element

More examples