In the world of web accessibility, it’s the little things that make a big difference. And when it comes to the aria-hidden attribute, one of the most important little things is to make sure that you are not using it on the body element. The aria-hidden attribute is used to hide an element from screen readers. This can be useful for things like decorative images or elements that are only visible to sighted users. But when you use aria-hidden=true on the body element, you are hiding the entire page from screen readers. This will make your website completely inaccessible to users who are blind or have low vision. This guide will explore the dangers of using aria-hidden=true on the body element and how to fix it.

Think of your website as a house. You want to make sure that all the doors and windows are accessible to everyone. The same is true for your website. By making sure that you are not using aria-hidden=true on the body element, you can create a more accessible and user-friendly experience for everyone. For a deeper dive into the world of accessibility, see our article on accessibility.

An illustration of a wall, symbolizing the barrier that aria-hidden=true on the body element creates for users with disabilities.

Your Guide to a More Accessible and User-Friendly Website

Fixing aria-hidden=true on the body element is a simple but important task. Here’s how to do it:

  1. Identify the aria-hidden=true Attribute on the Body Element: Use an accessibility testing tool like Creeper to crawl your site and identify any instances of aria-hidden=true on the body element.
  2. Remove the aria-hidden=true Attribute from the Body Element: The best way to fix this issue is to simply remove the aria-hidden=true attribute from the body element.
  3. Use the aria-hidden=true Attribute on Specific Elements: If you need to hide a specific element from screen readers, you should apply the aria-hidden=true attribute to that element, not to the body element.

The SEO Power of an Accessible Website

An accessible website is a more successful website. By making your website more accessible, you can improve your user experience, reach a wider audience, and even improve your SEO. For more on the importance of a well-structured website, check out this guide to hiding and showing content from the W3C.

Don’t let your website be an invisible wall to people with disabilities. By taking the time to make sure that you are not using aria-hidden=true on the body element, you can build a more accessible and successful online presence. For more on how to create a winning on-page strategy, see our article on on-page SEO.

An illustration of a door, symbolizing the importance of making your website accessible to everyone.

Frequently Asked Questions

What is the aria-hidden attribute?

The aria-hidden attribute is used to hide an element from screen readers. This can be useful for things like decorative images or elements that are only visible to sighted users.

Why shouldn’t I use aria-hidden=true on the body element?

You should not use aria-hidden=true on the body element because it will hide the entire page from screen readers. This will make your website completely inaccessible to users who are blind or have low vision.

How do I fix aria-hidden=true on the body element?

The best way to fix aria-hidden=true on the body element is to simply remove the attribute altogether. If you need to hide a specific element from screen readers, you should apply the aria-hidden=true attribute to that element, not to the body element.

Ready to make your website more accessible? Start your Creeper audit today and see how you can improve your use of the aria-hidden attribute.