Have you ever wondered about the correct and wrong uses of the aria-hidden attribute? In this video, I focus on when to apply it to decorative elements versus keeping essential content accessible to screen readers.
- The aria-hidden attribute should never be applied to focusable elements like buttons, checkboxes, or any input fields, as this would make them inaccessible to assistive technologies.
- Decorative icons, such as checkmarks in a feature list that don’t convey unique meaning, are appropriate candidates for aria-hidden=true since they don’t provide essential information to users.
- Using aria-hidden on informational content like form instructions or descriptive text is wrong, as it prevents screen reader users from accessing crucial context they need to understand and interact with the content.
- When icons serve an informative purpose (like distinguishing between included and excluded features), they should not use aria-hidden since their meaning needs to be conveyed to all users.
Transcript
I’m Gen Herres, and in this video, we’re going to talk about aria hidden. I get a lot of questions about when should you use aria hidden and when should you not use it?
We’re going to talk about a correct use and an incorrect use. Before we get to the examples, I just want to clarify. You should never use aria hidden on focusable content. For example, a button, a checkbox, any input field. None of these things should ever have aria hidden used.
Now for our examples. Our first example is using aria hidden for an icon. Here we have an icon and it’s a checkmark, and we are showing that we have this feature. This is really commonly used in an icon list or a feature list. In this case, this checkmark is decorative.
If, for example, we had check marks showing things that were included and Xs showing things that were not included, then these would, in fact, be informative, and therefore, we would not want to use aria hidden. But in this case, this is a decorative checkmark. The checkmark does not actually convey any meaning. In this case, we will have the text in our HTML that says aria-hidden=true.
Now, we’re going to go on to the wrong example. Here we have a fieldset with some languages. At the top, we have a description area. This description area says, “Choose the languages you want to support”. This is informational text. This gives the user instructions on what they are supposed to do with this language checkboxes.
This is important information to convey to the user. I would consider to be essential information to convey to the user. In this case, using aria-hidden=true is wrong. We do not want to do that at all because this is essential content. Instead, we just delete it, and then the content is presented as expected to the user, and a screen reader going over this will read it out or any other assistive technology being used.
That wraps us up. One example of how to use aria-hidden=true correctly, and one example of how to use it incorrectly. Remember, anything that’s essential for the user, you do not want to put aria hidden on. You always want that to be visible to the user.