ARIA in CSS

Jeremy responded to Sara's tweet advocating for using [aria-*] selectors in CSS instead of classes when styling is directly tied to ARIA attributes. He highlighted this as his preferred method for connecting CSS and JavaScript interactions, referencing an older CodePen example.

A classic illustration is:

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

This approach extends to more complex scenarios. Consider a tab component (using Reach UI, for example): Since ARIA attributes already manage the active state, class manipulation is unnecessary. Styling the active tab is achieved directly:

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

Similarly, content panels styled by ARIA role:

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

ARIA attributes also allow for styling variations:

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

For those unfamiliar with ARIA, Heydon's Webbed Briefs pilot episode offers a humorous introduction.

The above is the detailed content of ARIA in CSS. For more information, please follow other related articles on the PHP Chinese website!