ARIA Hidden

In several past Accessibility Weekly posts, we’ve included an HTML attribute, aria-hidden=”true”, in code examples and mentioned that aria-hidden can be used to hide elements on a web page from screen readers. This post goes further into the aria-hidden element and when and why you might want to use it.

What is aria-hidden?

“aria-hidden” is an attribute that can be added to any HTML element to communicate to screen readers that the element should not be read out to screen reader users.

You can add aria-hidden=”true” onto a container like a div or a span, like this:

<span aria-hidden=”true”>Some content I want the screen reader to skip</span>

This will get the screen reader to ignore everything included in that container element and any children elements.

You can also add it to any individual element as mentioned in the Font Awesome and Icon Fonts Accessibility post RE icons or decorative images like this:

<img src=”/decorative-accent.svg” aria-hidden=”true”>

It is important to note that setting an element’s “aria-hidden” attribute to “true”  is not the same as using display: none; in your CSS. Adding aria-hidden=”true” does not hide the element from sighted users. It hides it from screen reader users but still keeps it visible on the page.

Why hide things from screen readers?

When someone who is blind or has low vision visits a webpage, they want to find information or complete a transaction quickly, just like you or I would.

When designing websites, we add visual accents that make the website more interesting to look at – things like large quotation marks at the start of a block quote, borders, or small decorative icons on buttons or links. These decorative elements are usually easy for a sighted user to skim over or ignore as they read and engage with the website. However, unless we explicitly tell screen readers to ignore them, the screen reader will read all of these out with the rest of the content on the page.

Imagine going through a grid of posts and having to hear the post information, then “Read more. Image, right-pointing arrow” for every post on a page with 12 or more posts.

That “right-pointing arrow” is something that most sighted users will ignore. And for blind people, if read out, these icons present auditory clutter that slows down the user as they move through the page.

Hiding nonfunctional or uninformative, decorative things from screen readers can help screen reader users do what they want to do (and what you want them to do) on your website faster.

What should be hidden with aria-hidden?

Use aria-hidden=”true” to hide:

• Purely decorative icons, images, or borders.
• Repeated text or other duplicated content – sometimes it might make sense to add aria-hidden to linked images in a post grid if the title is also linked and the image provides no additional value.
• Nonvisible or off-screen text, such as content in closed accordions, tabs, or navigation menu dropdowns.

Do not add aria-hidden=”true” to any elements that are able to receive keyboard focus, such as buttons or links, or that provide an important function on the web page. I’ve seen cases where people have incorrectly added aria-hidden to things that should not be hidden from screen reader users, which is why we warn about aria-hidden in Accessibility Checker.

How to add aria-hidden in WordPress

If you’re custom coding your HTML, it’s easy to add aria-hidden=”true” wherever you need it on the page. But when we use various builders, there are tricks to getting aria-hidden in the HTML.

Adding aria-hidden in the Block Editor

GenerateBlocks and Kadence Blocks are two popular block libraries that do a good job of adding aria-hidden=”true” to decorative icons automatically. Don’t try to use a WordPress core image block; flip to the code editor, and add it in yourself – you’ll get the dreaded “This block contains unexpected or invalid content” error, and the block recovery feature will strip it out.

The best bet in the block editor is selecting an existing block that already adds aria-hidden for you, or you can install the free Attributes for Blocks plugin that gives you the ability to define custom attributes on any block in the block editor.

Adding aria-hidden in Page Builders

Elementor

If you build websites with Elementor Pro, you can add aria-hidden to any widget with Elementor Pro’s custom attributes feature. Just go to Advanced > Attributes on the widget settings and type aria-hidden|true in the box. That will add aria-hidden=”true” to the top-level div for that widget, which will hide everything in it from screen readers. This is a great way to fix their (unlabeled) shape backgrounds feature, but use it carefully on a section or column, as it will hide everything in that section or column.

Bricks

There is also support for adding custom attributes on any element in Bricks. This feature can be found under Style > Attributes in the Bricks editor. It’s slightly more intuitive than Elementor, with separate fields for defining the attribute name and value and outputs on the element itself rather than on a parent container.

Oxygen

You can add custom attributes in Oxygen by going to Advanced > Attributes > Add Attribute on any element. Like in Bricks, there are separate fields for defining the name and value, and this outputs on the actual element, not a parent div.

Other Page Builders

Out of the box, Beaver Builder and Divi do not have support for custom attributes, so there isn’t an easy way to add aria-hidden in these builders. Beaver Builder has documentation on coding custom attributes onto modules, but there isn’t a no-code option I could find. There is a third-party add-on for adding custom attributes to Divi, but I didn’t test it.

Are you using a different page builder that supports custom attributes? Leave a comment on the Facebook post with what the builder is and how to add custom attributes.

Additional Resources

• aria-hidden on MDN docs
• What is the Difference Between the hidden and aria-hidden Attributes