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

Log in (Premium content) Request a demo

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.

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 HTML 5. Use caution and test thoroughly before relying on this approach.

Compliance Data & User Impact

User Impact: Critical
Disabilities Affected:
  • Blindness
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

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