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