ARIA in CSS

Sara tweeted something recently that resonated with me:

Also, Pro Tip: Using ARIA attributes as CSS hooks ensures your component will only look (and/or function) properly if said attributes are used in the HTML, which, in turn, ensures that they will always be added (otherwise, the component will obv. be broken)

Yes! I didn’t mention it when I wrote about accessible interactions but this is my preferred way of hooking up CSS and JavaScript interactions. Here’s old Codepen where you can see it in action:

[aria-hidden='true'] {
  display: none;
}

In order for the functionality to work for everyone—screen reader users or not—I have to make sure that I’m toggling the value of aria-hidden in my JavaScript.

There’s another advantage to this technique. Generally, ARIA attributes—like aria-hidden—are added by JavaScript at runtime (rather than being hard-coded in the HTML). If something goes wrong with the JavaScript, the aria-hidden value isn’t set to “true”, which means that the CSS never kicks in. So the default state is for content to be displayed. There’s no assumption that the JavaScript has to work in order for the CSS to make sense.

It’s almost as though accessibility and progressive enhancement are connected somehow…

Have you published a response to this? :

Responses

Sara Soueidan

“ARIA in CSS” adactio.com/journal/17566 in which @adactio elaborates on my previous tweet on using ARIA attributes as style hooks in #CSS — “the default state is for content to be displayed. There’s no assumption that the JavaScript has to work in order for the CSS to make sense”

6 Likes

# Liked by Chris Taylor on Tuesday, October 27th, 2020 at 6:31pm

# Liked by Aleksi Peebles on Tuesday, October 27th, 2020 at 6:46pm

# Liked by Marty McGuire on Tuesday, October 27th, 2020 at 7:08pm

# Liked by Lucid00 on Tuesday, October 27th, 2020 at 8:00pm

# Liked by George Salib® on Tuesday, October 27th, 2020 at 9:42pm

# Liked by Zachary Dunn on Wednesday, October 28th, 2020 at 1:01pm

Previously on this day

9 years ago I wrote Stallmania

Surprise parrot.

14 years ago I wrote Comments on comments

Examining the results of the comment experiment.

17 years ago I wrote Banksy in Brighton

It looks like graffiti artist Banksy was in Brighton recently. I spotted some of his work near the North Laine.

19 years ago I wrote A brush with fame

Chris (my upstairs neighbour and bandmate) had an interesting encounter this morning.