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

Question

我目前正致力于使用ARIA标签制作一个可访问的网站.在我看来,像aria-invalid我这样的CSS的目标是优秀的选择器,而不是使用.error类.

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

Answer 1

属性选择器是一种非常灵活的方式来管理大规模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很长一段时间.