Are there reasons not to use ARIA states and roles as selectors in CSS?

Question

I'm currently working on making an accessible site using, among other things, ARIA tags. It occurred to me that attributes such as aria-invalid would be good selectors for my CSS to target, rather than using a .error class.

The benefit of this is leaner, more meaningful HTML, which is easier for me to hook into from CSS (and JS). That said, I haven't seen this done elsewhere so I'm suspicious there are downsides to leveraging accessibility tags for styling. I suspect the use of unconstrained attribute selectors makes for less performant CSS, but are there other downsides I haven't considered?

Answer 1

Attribute selectors are a very flexible way to manage styles for large-scale CSS because the attribute selectors will always have a specificity of 0-0-1-0.

[aria-*] selectors are perfectly fine to use as styling hooks, and I also recommend using custom [data-*] attributes to fill in the gaps where you might need a one-off. Certainly class selectors should continue to be used, however you can do some very elegant style extensions with attribute selectors:

[data-foo] {
    color: red;
}
[data-foo="bar"] {
    color: blue;
}
[data-foo="fizz"] {
    color: green;
}

Each of these selectors has the same specificity, and the cascade will allow the styles to be applied appropriately.

You could create your own form of classes by using the [attr~="value"] selector if need be.

Using the "attribute contains" selector can be useful for a technique that I call "classy images"

---

One of the hidden benefits to using attributes over classes is a performance gain in JavaScript. Instead of having to check for the presence of a class on an element (which is remarkably easy to get wrong), browsers have supported getAttribute, hasAttribute, and setAttribute for a long time.