ARIA in CSS

ARIA States Make Better CSS Hooks Than Classes

When an element’s ARIA state directly drives its visual treatment, developers debated recently whether attribute selectors deserve to replace class-based styling. Jeremy Keith endorses the approach: in an older CodePen demonstration, he shows how CSS and JavaScript can converge on the same semantic hook instead of juggling two separate concerns.

The classic contrast comes down to a familiar pattern:

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

A tabbed interface built on Reach UI makes the case for skipping class name toggling altogether. Since the component already exposes the active tab through ARIA, you can target the right <button> purely by its data attribute and state:

[data-reach-tab][aria-selected="true"] {
  background: white;
}

Content panels are similarly identified — their ARIA role alone gives you enough to apply the desired styles:

[role="tabpanel"] {
  background: white;
}

There are even cases where an ARIA attribute aligns with a UI variation, not just a state:

[aria-orientation="vertical"] {
  flex-direction: column;
}

Need an ARIA primer? Heydon Pickering’s new Webbed Briefs series opens with a lighthearted intro that covers the essentials.