Back to Info and Examples for Accessibility Insights for Web
aria-hidden-body
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
- Remove
aria-hidden="true"from the<body>element. - Use
aria-hidden="true"only on elements whose content is decorative or redundant from the perspective of people who use assistive technologies. Note that addingaria-hidden="false"to an element whose parent hasaria-hidden="true"would not reveal it to assistive technologies.
Example
Fail
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>
…
…
<button class="action-button">Sign in</button>
…
Pass
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>
…
…
<button class="action-button" tabindex="-1">Sign in</button>
…
About this rule
This rule passes if:
- No
aria-hiddenattribute is present on the document<body>element