Do you know the stylish ARIA?

When working to make the web more accessible and inclusive, we often add ARIA attributes to our components. But did you know that you can easily use those same attributes when styling your components?

nav button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

button[aria-disabled="true"] {
  color: grey;
}

With this approach, we don’t need extra CSS classes to handle states like ‘expanded’ or ‘disabled’. The examples above show how useful it can be, and there are plenty more possibilities. Once you start experimenting, you’ll find even more ways to take advantage of it, so give it a go!