aria-hidden="true" must not be present on the document <body>

Rule Description

When an aria-hidden attribute with a value of 'true' is present in the body of the document, the content won't be accessible to assistive technology.

The Algorithm, in Simple Terms

Checks for the presence of the aria-hidden='true' attribute in the body of the document and either alerts with a pass or fail message accordingly.

Why this is Important

When an aria-hidden attribute with a value of 'true' is present in the body of the document, the content won't be accessible to assistive technology.

Applying aria-hidden="true" to otherwise accessible objects: A web page is designed to be fully accessible, and it would be accessible except for the fact that someone added aria-hidden="true" to some of the objects, making it so screen readers will not read them. Users can still tab to the focusable elements in those objects, but the screen reader will say nothing.

Any content or interface elements that are intentionally hidden from users — such as inactive dialogs, collapsed menus, etc. — must also be hidden from screen reader users. Once those items are made available to sighted users — such as when they activate a button or expand a menu item — the items must be made available to screen reader users. The goal is to give screen reader users an equivalent user experience to sighted users. If there is a compelling reason to hide content from sighted users, there is usually a compelling reason to also hide that content from blind users. And when the content is made available to sighted users, it makes sense to make it available to blind users as well.

Compliance Data & Impact

User Impact: Critical
Disabilities Affected:
  • Blindness
Severity: Critical
Issue Type:
  • WCAG 2.0 (A): MUST
  • WCAG 2.1 (A): MUST
WCAG Success Criteria:
  • 4.1.2 Name, Role, Value
Section 508 Guidelines:
  • Not applicable

How to Fix the Problem

Remove the aria-hidden="true" code from the body of the document, or set the attribute value to "false".

Caution:

aria-hidden="false" is known to work inconsistently when used in conjunction with styles or attributes that have historically prevented rendering in all modalities, such as display: none, visibility: hidden in CSS, or the hidden attribute in HTML5. Use caution and test thoroughly before relying on this approach.

Reconsider the location of the hidden content to determine whether it could be relocated to an area of the page other than the body. Typically, content is hidden from screen readers to reduce unnecessary information that screen reader users would tend to skip (redundant or extraneous content).

Related Deque University Course Pages

Other Related Resources

Additional Information

Relevant Technologies:
  • ARIA
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: aria-hidden-body