是否有理由不在CSS中使用ARIA状态和角色作为选择器？

Question

我目前正致力于使用ARIA标签制作可访问的网站。在我看来，像aria-invalid这样的属性对我的CSS来说是一个很好的选择器，而不是使用.error类。

这样做的好处是更精简，更有意义的HTML，这对我来说更容易从CSS（和JS）挂钩。也就是说，我没有在其他地方看到过这种情况，所以我怀疑利用辅助功能标签进行样式设计会有缺点。我怀疑使用不受约束的属性选择器会降低性能，但还有其他缺点吗？

Answer 1

属性选择器是一种非常灵活的方式来管理大型CSS的样式，因为属性选择器总是有specificity of 0-0-1-0。

[aria-*]选择器非常适合用作样式挂钩，我还建议使用自定义[data-*]属性来填补您可能需要一次性的空白。当然应该继续使用类选择器，但是你可以使用属性选择器做一些非常优雅的样式扩展：

[data-foo] {
    color: red;
}
[data-foo="bar"] {
    color: blue;
}
[data-foo="fizz"] {
    color: green;
}

这些选择器中的每一个都具有相同的特异性，级联将允许适当地应用样式。

如果需要，您可以使用[attr~="value"]选择器创建自己的类形式。

使用"attribute contains" selector对a technique that I call "classy images"

非常有用

---

在类上使用属性的一个隐藏好处是JavaScript中的性能提升。浏览器长期以来一直支持getAttribute，hasAttribute和setAttribute，而不必检查元素是否存在类（非常容易出错）。

Answer 2

您需要了解，一开始应避免使用诸如aria-invalid之类的属性。您应该始终使用本机语义（例如，输入元素上的required）。这称为first rule of ARIA。

我认为您真正想要的是为 computing ARIA状态和属性添加样式。不幸的是，目前CSS不支持此功能。

总结：将[aria-invalid]用作CSS选择器没有任何问题。这样做对您没有多大帮助，因为您首先应该避免使用该属性。