In this exercise, we will be going over 2 examples of when to use aria-hidden (hint: decoration) and when to use hidden.

In the first example, we will be hiding a "middle dot" that we have for formatting. This middle dot isn't necessary to be read out, so we add an aria-hidden attribute on that span.

When we use hidden, we will completely hide things from the viewport AND the screen reader.

https://app.egghead.io/api/v1/lessons/aria-aria-hidden-vs-hidden/subtitles

aria-hidden vs. hidden

Lindsey Kopacz: [0:00] We're going to go over two attributes, aria-hidden and hidden. In my markup, I have a link to my Twitter home page. Then I have two spans. The first span has my display name. The second span has the Twitter handle. Right outside of this link, we have a span that has a dot in the middle of it.

[0:21] Let's see how that sounds when we turn on the screen reader.

[0:23] [voiceover]

Lindsey: [0:24] This little dot right here is actually decorative. We don't really need to hear that from a screen reader perspective.

[0:29] In this span, we will just add the attribute aria-hidden="true." Now let's turn on our screen reader again and hear that.

[0:45] [voiceover]

Lindsey: [0:46] You see how when we have that aria-hidden="true" on that dot, we don't read it out. It just skips right to the next heading level. This is different if we add the hidden attribute to the span in the hidden section.

[1:06] If I refresh this page, you see now that that disappears. It's worth mentioning that not only is this taken out of our visual sight, but it's also taken out of the screen reader flow.

[1:24] [voiceover]

Lindsey: [1:26] As you can see, as I was trying to get past heading level two, hidden, I couldn't. That's because the span right after that h2 had that hidden attribute.

aria-hidden vs. hidden

Share this video with your friends