• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Equalize Digital

Equalize Digital

Website Accessibility Consulting, Training, and Development

  • My Account
  • Checkout
  • Services
    • Bespoke Websites
    • Accessibility Audits
    • User Testing
    • Accessibility Remediation
    • Accessibility Monitoring
    • Web Accessibility Training
    • Accessibility for Agencies
  • Accessibility Checker
    • Overview
    • Features
    • Pricing
    • Documentation
    • Support
    • Priority Support Packages
    • Buy Now
  • Company
    • About Us
    • Certified B Corporation
    • Industry Expertise
    • Blog
    • WordPress Accessibility Meetup
    • Accessibility Statement
    • Contact
    • Become An Affiliate
  • Events
  • How can we help?
  • My Account
  • Checkout
Home / Accessibility Checker / ARIA Hidden

ARIA Hidden

Notice Type: Warning
Relevant WCAG Conformance Levels: A

Did an “ARIA hidden” warning appear in an Accessibility Checker audit of one of your WordPress posts or pages? Read on below for an explanation of this warning, how it impacts your website’s accessibility, and how to fix it.

Table of Contents

  • About the ARIA Hidden Warning
    • What is ARIA?
    • What does the ARIA Hidden warning mean?
    • What is ARIA Hidden?
    • How does Accessibility Checker test for ARIA Hidden?
  • Impact on Accessibility
    • Using ARIA hidden can make content more accessible
    • When ARIA hidden is problematic
    • Relevant WCAG 2.1 Success Criteria
  • How to Resolve an ARIA Hidden Warning
    • What to do (in short)
    • How to find ARIA hidden elements on your WordPress post or page
    • How to assess ARIA hidden warnings for potential problems
    • A note about ARIA problems and WordPress plugins

About the ARIA Hidden Warning

What is ARIA?

ARIA stands for Accessible Internet Rich Applications. It is a set of attributes that can be used to create more accessible web content for individuals with disabilities and users with screen readers.

ARIA attributes can be added to HTML elements on a web page in order to fix accessibility errors that HTML alone may not be able to resolve. ARIA attributes are most frequently added to web page elements that are developed with JavaScript, however, they can be added to any type of code that needs to be made more accessible assuming that cannot be accomplished with correct HTML semantics instead.

You can learn more about ARIA on Mozilla’s developer documentation page.

What does the ARIA Hidden warning mean?

The ARIA Hidden warning shows up in Accessibility Checker when content on your post or page has been hidden using the aria-hidden="true" attribute.

What is ARIA Hidden?

Adding aria-hidden="true" to an HTML element removes that element and all elements nested within it so that it is not visible or announced to users of assistive technology such as screen readers.

How does Accessibility Checker test for ARIA Hidden?

While auditing your page or post content, Accessibility Checker will look at all of the elements, including those with explicit ARIA attributes. If an aria-hidden="true" attribute is found, it will be flagged for your review.

Impact on Accessibility

Using ARIA hidden can make content more accessible

Removing elements and hiding them from users of assistive technology can improve their experience on your website if the items that are being hidden are extraneous to the meaningful content on the page. Some examples of content that can (and often should) be hidden from assistive technology users include:

  • icons or images that are purely decorative;
  • offscreen or collapsed content, such as text in menus or accordions that have not been opened; and
  • repeated text or duplicated content.

When ARIA hidden is problematic

While aria-hidden="true" can be helpful in some use cases, in other instances it should not be used because it is removing necessary functionality from your web page.

If important content, like form controls or links, is hidden using an ARIA attribute, that content will not be found with a screen reader. This can prevent screen reader users from being able to access important information, and interact with navigable elements on your website if ARIA hidden is used incorrectly. Accordingly, the fourth rule of ARIA states that aria-hidden="true" should not be used on any focusable elements.

Additionally, it is important to note that aria-hidden="true" hides both the element it is applied to and all of it’s child elements. Using aria-hidden="false" will not re-expose the element to assistive technology if any of its parents specify aria-hidden="true".

Relevant WCAG 2.1 Success Criteria

4.1.2 Name, Role, Value – Level A

This guideline requires that all user interface components including but not limited to form elements, links, and components generated by scripts, must:

  • have a name and role that can be programmatically determined;
  • states, properties, and values that can be set by the user can be programmatically set; and
  • notification of changes to these items is available to user agents, including assistive technologies.

How to Resolve an ARIA Hidden Warning

What to do (in short)

First, install the free Accessibility Checker WordPress plugin.

For every ARIA Hidden warning that is flagged on your page, assess the element and determine if it is truly correct to hide the element from assistive technology users. If it is appropriate to hide the element, then you can safely “ignore” the warning. If it is not appropriate to hide the element, then you will need to remove aria-hidden="true" from the element’s code.

How to find ARIA hidden elements on your WordPress post or page

For any pages or posts that have an ARIA Hidden warning in the WordPress editor, you can open the details tab in the Accessibility Checker meta box, then expand the ARIA Hidden warning to see a list of code that caused the warning to be flagged.

screenshot showing code containing aria-hidden = true flagged in Accessibility Checker in the WordPress edit screen

In the screenshot above, you can see two lines of code that have triggered ARIA hidden warnings in Accessibility Checker’s audit of the post or page.

How to assess ARIA hidden warnings for potential problems

In the example shown above, there are two elements that have aria-hidden="true" on them – a div and a paragraph. This is the exact code that is being flagged:

<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>

and

<p class="has-text-align-center" aria-hidden="true">Lorem ipsum dolor sit amet, conse ctetuer adipiscing elit, sed diam nonummy nibh euismod laoreet.</p>

If this was your website, you would need to look at these two lines of code and determine if the elements should, indeed, be hidden from users of assistive technology. For each item, ask yourself these questions:

  • Is this item purely decorative?
  • Is the content duplicate or repetitive?
  • Is the item offscreen or collapsed?
  • Is this information that I do not want shown to people using screen readers or other assistive technologies?

If the answer to all of the above questions is yes, then ARIA hidden has been properly used and you can safely ignore the warning in Accessibility Checker. If not, then you likely need to remove aria-hidden="true" from your HTML.

In the examples provided above, we would consider the first item, which is a WordPress spacer block, to be purely decorative and an example of an element that should be hidden from assistive technology users. For this element, we would ignore the warning in Accessibility Checker. The second item, which is a paragraph, is likely an incorrectly hidden item and needs to have aria-hidden="true” removed from the code.

A note about ARIA problems and WordPress plugins

Depending upon how you’re adding content to your WordPress website, it is likely that you may encounter an incorrectly added ARIA hidden attribute that is being inserted into your post or page by a third-party plugin. If this is the case, you likely cannot remove aria-hidden="true" and correct the error.

If you encounter accessibility errors that are caused by a third-party plugin you cannot control, please reference “What to do if a Plugin You’re Using has Accessibility Errors” for ideas on how to proceed.

Primary Sidebar

Frequently Asked Questions

  • How to Install & Activate Accessibility Checker
  • Getting Started Quick Guide
  • Why Do We Say 100% Passed Tests, Not 100% Accessible?
  • How to Manually Check Your Website for Accessibility
  • When and How to Ignore Accessibility Errors or Warnings
  • What to do if There are Accessibility Errors in Your Theme
  • What to do if a Plugin You’re Using has Accessibility Errors
  • How to Get Support for Accessibility Checker
  • Can I Hire Equalize Digital to Fix Accessibility Issues on My Website?
  • Additional Resources for Learning About Accessibility
  • How to Test Accessibility Checker for Conflicts with Themes or Plugins
  • What Does “Unlimited Dev Sites” mean?
  • Is there an Accessibility Conformance Report (ACR) or VPAT available for Accessibility Checker?

Rule Documentation

  • A Slider is Present
  • A Video is Present
  • Ambiguous Anchor Text
  • ARIA Hidden
  • Blinking or Scrolling Content
  • Broken ARIA Reference
  • Broken Skip or Anchor Link
  • Duplicate Alternative Text
  • Duplicate Form Label
  • Empty Button
  • Empty Heading Tag
  • Empty Link
  • Empty or Missing Form Label
  • Empty or Missing Table Header
  • iFrame Missing Title
  • Image Animated GIF
  • Image Empty Alternative Text
  • Image Long Alternative Text
  • Image Map Missing Alternative Text
  • Image Missing Alternative Text
  • Improper Use of Link
  • Incorrect Heading Order
  • Insufficient Color Contrast
  • Link Opens New Window or Tab
  • Link to MS Office File
  • Link to Non-HTML File
  • Link to PDF
  • Linked Image Missing or Empty Alternative Text
  • Long Description Invalid
  • Low-quality Alternative Text
  • Missing Language Declaration
  • Missing Subheadings
  • Missing Title
  • Missing Transcript
  • Possible Heading
  • Readability & Simplified Summary
  • Tab Order Modified
  • Text Justified
  • Text Too Small
  • Underlined Text

Free Accessibility Help

Join our WordPress Accessibility Facebook group to connect with a community of web professionals and website owners using WordPress to build a more accessible web. Get answers to accessibility questions and join virtual WP accessibility meetups.

Join the Community

Footer

Equalize Digital Websites for Everyone

Your WordPress accessibility team. Accessibility plugins, rapid audits, and consulting to help you make your website usable by people of all abilities.

  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Company

  • About Equalize Digital
  • WordPress Accessibility Meetup
  • Certified B Corporation
  • Accessibility Statement
  • Blog
  • Events
  • Contact Us

Services

  • Website Development
  • Accessibility Audits
  • User Testing
  • Remediation
  • Ongoing Monitoring
  • Accessibility Training
  • For Agencies

Accessibility Checker

  • Features
  • Pricing
  • Documentation
  • How to Get Support
  • My Account
  • Affiliate Dashboard
  • Become an Affiliate

© 2023 Equalize Digital · Privacy Policy · Terms of Service · Plugin Terms & Refund Policy

WordPress VIP Silver Agency Partnercertified B corporation logo International Association of Accessibility Professionals member