aria-hidden="true" must not be used on the
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
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.
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.
<button class="action-button">Sign in</button>
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
<button class="action-button" tabindex="-1">Sign in</button>
About this rule
This rule passes if:
aria-hiddenattribute is present on the document