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

Question

我目前正在制作一个可访问的网站，其中包括 ARIA 标签。我突然想到，对于我的 CSS 目标来说，诸如此类的属性aria-invalid将是很好的选择器，而不是使用.error类。

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

score 18 · Accepted Answer

属性选择器是管理大规模 CSS 样式的一种非常灵活的方式，因为属性选择器总是具有0-0-1-0.

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

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

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

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

使用属性而不是类的隐藏好处之一是 JavaScript 的性能提升。浏览器无需检查元素上的类是否存在（这非常容易出错），浏览器已经支持getAttribute,hasAttribute和setAttribute很长时间了。

score 0 · Accepted Answer

您需要了解aria-invalid应该首先避免使用类似的属性。如果可用（例如required在输入元素上），您应该始终使用本机语义。这被称为ARIA 的第一条规则。

我认为您真正想要的是为计算的ARIA 状态和属性添加样式。不幸的是，目前 CSS 不支持这一点。

总而言之：[aria-invalid]作为 CSS 选择器使用没有任何问题。它不会对您有太大帮助，因为您应该首先避免该属性。

2 回答 2