Make sure aria-hidden="true" is not present on the document body.

Rule ID: aria-hidden-body User Impact: critical Guidelines: WCAG 2.0

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

About This Rule

This rule ensures that the <body> element does not have the aria-hidden attribute, maintaining accessibility for assistive technologies.

Why It Matters

Applying aria-hidden="true" to the <body> element hides all its content from assistive technologies, such as screen readers. While users can still navigate to focusable elements using the keyboard, the content remains inaccessible, leading to a poor user experience for individuals relying on these technologies.

How to Fix

  • Remove aria-hidden="true" from the <body> element.
  • Apply aria-hidden="true" only to elements whose content is decorative or redundant for assistive technology users.
  • Avoid using aria-hidden="false" on child elements of a parent with aria-hidden="true", as it won't make them visible to assistive technologies.

Example

Fail

In this example, aria-hidden="true" is incorrectly applied to the <body> element, hiding all content from assistive technologies: 

<body class="has-dialog" aria-hidden="true">
  ...
  <button class="action-button">Sign in</button>
  ...
</body>

Pass

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

<body class="has-dialog">
  ...
  <button class="action-button" tabindex="-1">Sign in</button>
  ...
</body>

Other Rules

Interested in other web accessibility rules? Please see these other rules:

logo TestingBot