ARIA-hidden — Friend or Foe?
The aria-hidden attribute enables web developers to hide content for assistive technology. It is a powerful way of reducing the amount of unnecessary content that a screen reader has to read before locating the desired content on a webpage. When used correctly, this feature greatly increases the level of AX (Accessible eXperience) for users of screen readers. But what are the consequences when aria-hidden is not used correctly? Here I’ll share some of my own personal experiences as a screen reader user.
1. Modal dialog boxes
It is common practice to use aria-hidden for hiding content that is outside modal dialog boxes. This prevents screen readers from getting lost in the inert content since you hide it from them. But did you know that if you set aria-hidden on an element, you hide the entire element including all its descendants? Perhaps this sounds obvious, and yet there are numerous websites today that set aria-hidden on the body element itself in an attempt at hiding content that is outside the dialog box. If you would like to know what this feels like for a screen reader user, then I invite you to also set CSS “visibility: hidden” on elements that match the [aria-hidden] selector. And before you ask, aria-hidden=”false” has no effect on an element if one of its ancestors has aria-hidden=”true”.
Special note about react-modal: The appElement prop is used to set aria-hidden on the app element. If your app does not live inside an app container, then do not even think about using document.body as appElement. Set the ariaHideApp prop to false instead. It’s also worth noting that @reach/dialog does not suffer from this issue.
2. Hiding inaccessibility issues
Yes, there are cases where aria-hidden should be used to hide content that is inaccessible. For example if your website is serving external content such as advertisements from a provider that doesn’t care about creating accessible content. With that said, make sure you do not hide something that is relevant
for the service you provide. Even if you know full well that you have created something inaccessible, please don’t use aria-hidden to obfuscate it. Experienced users of assistive technology know many workarounds for common accessibility issues that you may not know about. But if you set aria-hidden on that part of the web app, then you don’t even give them a chance to try.
Bottom line is that aria-hidden is meant to hide 100% irrelevant content. It is not meant for setting up additional obstacles. It is an obstacle if I have to open up the inspector in my web browser just to remove aria-hidden before I can place an order at an online store.
