The difference between aria-hidden, role="presentation" and role="none"

We have already discussed, in a previous article, the different ways to hide something from displaying but not from assistive technologies. This time we'll see the opposite: how to hide something to assistive technologies: that's where aria-hidden, role="presentation", and role="none" come into play. These attributes basically serve the same scope but have different purposes. Let's try to clear up any confusion and make sure we're using them correctly.

What is aria-hidden?

Think of aria-hidden as a cloak of invisibility for screen readers and other assistive technologies. You can use it to hide non-essential or decorative elements that would only clutter up the screen for people with disabilities. By adding aria-hidden to these elements, you can make your website less overwhelming and quicker to read for users with disabilities.

Aria-hidden doesn't actually remove the content from the page, it just makes it disappear for screen readers or, being more specific, removes that element and all of its children from the accessibility tree.

What is role="presentation"?

With role="presentation" is like putting on a mask to your element and letting it go in incognito. It's a way to indicate that an element is purely presentational and has no semantic meaning. This attribute is commonly used for decorative images or spacers that don't add any value to the content.

Unlike aria-hidden, role="presentation" actually doesn't remove the element from the accessibility tree altogether, but strips it of its semantic meaning, leaving the element like a <span>.

Applying this role to an element, automatically spreads also to all its children.

Limitations of role="presentation"

Elements with role="presentation" are not part of the accessibility tree anymore and then is useless (and not correct) to have an accessible name: don't use aria-labelledby or aria-label on them then.

Browsers will ignore declarations like role="presentation" and role="none" when on focusable elements (even if they're focusable thanks only to tabindex attribute). Browsers also ignore the inclusion of the role if any of the element contains any global ARIA states and properties, such as aria-describedby.

What is role="none"?

The role="none" is exactly like role="presentation". It has been introduced just to help avoid confusion with the word "presentation": both are identical in their behavior and usage.

When to use aria-hidden, role="presentation", and role="none"

role="none" and aria-hidden="true" serve similar purposes in that they both indicate to assistive technologies that an element should be ignored or skipped over. However, there is a subtle difference between the two.

role="none" is used to indicate that an element has no semantic meaning and should be ignored by assistive technologies. It is typically used for elements that are purely presentational or decorative in nature, aria-hidden="true", on the other hand, is used to indicate that an element should be completely hidden from assistive technologies, including screen readers. It is typically used for elements that are not important to the content or user experience, such as pop-up notifications or advertisements.

So while role="none" and aria-hidden="true" serve similar purposes, they should be used in different contexts depending on the nature of the element you want to hide or ignore.