Designing accessible web experiences means understanding that our content will be accessed by a diverse range of users with a wide range of needs. We need to design for more than just visual users.
This is where the aria-hidden attribute comes in. Its purpose is to hide purely decorative or redundant elements from the accessibility tree. This allows us to deliver a cleaner, more focused experience for users of assistive technologies by removing unnecessary clutter.
When Not to Use aria-hidden
- When we need to hide elements that show up after an interaction, e.g., after clicking a dropdown menu. Using aria-hidden will result in hiding the element from the accessibility tree with no way of bringing it back.
- When we have necessary text to follow steps or instructions, e.g., an input’s help text when choosing a new password.
- When we have inputs in a form that are shown after choosing a specific answer, e.g., when we click on a checkbox and a new question pops up.
When We Should Use It
- When there is a text that is repeated or that works as a visual element.
- When we have decorative icons that do not add to the message we need to communicate, such as an arrow next to the text in a ‘View More’ button.
- When there are icons that already have equivalent text, like a magnifying glass next to the ‘Search’ text in an input.
- When there are state icons next to visible text, such as an ‘X’ next to ‘error’.
Warning
If we leave an empty alt attribute for an image, the screen reader will automatically ignore it. That’s why aria-hidden is not necessary in those scenarios, unlike with SVG icons mentioned above.
The challenge of delivering inclusive experiences lies in finding the best tools so that assistive technologies can generate equivalent experiences, always providing the necessary information. The aria-hidden attribute is just another tool to make this possible. Can you think of other uses for aria-hidden?
