Deepcrawl is now Lumar. Read more.
DeepcrawlはLumarになりました。 詳細はこちら

Aria-hidden= “true” in body content (WCAG 2.0 Level A Issue)

How to fix the website accessibility issue of incorrect aria-hidden use in body content. (WCAG Level A issue)

Post cover image showing clasped hands - representing website accessibility projects

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. 

Issue details

Lumar can help you find & resolve this website accessibility issue — & many others — on your own site. Speak to our team to get started with the platform.

Get a Lumar demo

Example HTML violation: Aria-hidden= “true” in body content (WCAG 2.0 Level A Issue)

<!DOCTYPE html>
<html lang="en" class="no-js">
  <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>

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">
    <title>Compliant Aria Hidden Body Example</title>
    <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>

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).

Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform