ARIA 在 CSS 中

Jeremey 对 Sara 的推文 进行了回应，该推文介绍了在您应用的样式直接与 ARIA 状态相关时，使用 [aria-*] 选择器代替类。

… 这是我首选的连接 CSS 和 JavaScript 交互的方式。这里有一个 旧的 CodePen，您可以看到它在行动

这是一场经典对决

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

还有更多机会。以标签设计组件为例

由于这些标签（使用 Reach UI）已经为活动标签等内容应用了正确的 ARIA 状态，它们甚至不使用类名操作。要为活动状态设置样式，您可以选择带有数据属性和 ARIA 状态的 <button>，例如

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

包含内容的面板？它们具有 ARIA 角色，因此以这种方式设置样式

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

ARIA 有时也与变体相匹配，例如…

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

如果您想问，什么是 ARIA？Heydon 的新节目 _Webbed Briefs_ 有 一个有趣的 ARIA 简介 作为试播集。