Control state semantically with ARIA attributes

Designers will often assign visual state changes to UI components via classes such as .loading, .current, .open, or .hidden. Classes, however, are simply arbitrary strings which have no explicit meaning to a computer, add bloat to code, and require documentation. These same classes could be substituted for aria-busy, aria-current, aria-expanded, and aria-hidden, respectively, in most circumstances.

ARIA attributes and properties can be interpreted by screen readers and carry implied semantics while providing clean CSS selectors and JavaScript hooks. It is worth familiarising one's self with each and using them wherever possible.

/* e.g. highlight current navigation item */
nav a {
  color: var(--tint);
}
nav a[aria-current="true"] {
  color: var(--foreground);
}

/* e.g. indicate activity while a button performs a task */
button {
  cursor: pointer;
}
button[aria-busy="true"] {
  cursor: busy;
}