What does this accessibility issue mean?
Accessibility issue summary: Incorrect use of aria-hidden=”true” in <body>
To meet WCAG Level A best practices for website accessibility, the contents of the <body> element on your web page should not be hidden to assistive technologies via ARIA ‘hidden’ attributes — unless they are truly irrelevant or unimportant to the context of the page’s content.
This criterion falls under the “Principle 1: Perceivable” part of the WCAG guidelines.
Example HTML violation: Aria-hidden= “true” in body content (WCAG 2.0 Level A Issue)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body aria-hidden="true">
<title>Non-Compliant Aria Hidden Body Example</title>
<h1>Welcome to our website</h1>
<p>This is an example of a non-compliant page due to the use of aria-hidden='true' in the body element </p>
</body>
</html>The above HTML violates the aria-hidden-body accessibility rule because it includes the aria-hidden="true" attribute on the `` element.
This attribute is intended to hide content from assistive technologies like screen readers. However, by applying it to the `` element, the entire content of the website becomes inaccessible to users relying on such technologies.
To ensure accessibility, the aria-hidden="true" attribute should be removed from the `` element.
How to fix "Aria-hidden= “true” in body content (WCAG 2.0 Level A Issue)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Compliant Aria Hidden Body Example</title>
</head>
<body>
<h1>Welcome to our website</h1>
<p>This is an example of a compliant page. The 'aria-hidden' attribute is not used in the body element, making content accessible to users of assistive technologies.</p>
</body>
</html>Remember, the aria-hidden="true" attribute should only be used on elements that contain content that is decorative or redundant from the perspective of people who use assistive technologies. Also, adding aria-hidden="false" to an element whose parent has aria-hidden="true" would not reveal it to assistive technologies.
For further reading, refer to the guidelines from W3C Web Accessibility Initiative (WAI).
