在CSS中使用ARIA状态和角色作为选择器有没有不适合的原因？

Question

20

我目前正在制作一个可访问的网站，其中使用了ARIA标签等内容。我意识到像aria-invalid这样的属性将是我的CSS选择器的好选择，而不是使用.error类。

这样做的好处是HTML更加简洁、有意义，对于我从CSS（和JS）中挂钩更加容易。尽管如此，我还没有在其他地方看到这样的实践，所以我怀疑利用无障碍标签进行样式设计会有缺陷。我猜想使用未受限制的属性选择器会导致性能较差的CSS，但是是否还存在其他我没有考虑到的缺点呢？

- ehdv

1

W3C建议在CSS选择器中使用ARIA标签- https://www.w3.org/TR/wai-aria-practices/#accessiblewidget，第2.7节。 - Alexei Levenkov

2个回答

0

你需要明白像 aria-invalid 这样的属性应该尽量避免使用。如果有本地语义可用，你应该始终使用本地语义（例如在输入元素上使用 required）。这被称为ARIA 的第一条规则。

我认为你真正想要的是添加样式到计算的 ARIA 状态和属性。不幸的是，目前 CSS 不支持这个功能。

总之：使用 [aria-invalid] 作为 CSS 选择器没有问题。但它并不能帮助你太多，因为你应该尽量避免使用那个属性。

- tobib

“computed” 状态和属性是什么意思？ARIA 属性可以像其他 HTML 属性一样被查询和设置，并且可以用作 CSS 选择器。#foo[aria-busy="true"] 是有效的 CSS，div[aria-checked="false"] 也是如此。 - slugolicious

<input required value=""> 和 <input aria-invalid="true"> 都是无效的。一个使用本地语义，另一个使用 ARIA 属性。 - tobib

好的，但是我不明白你所说的“computed” ARIA属性是什么意思。就像其他属性一样，它们与CSS选择器一起使用完全没有问题。而required属性并不是一个ARIA属性。 - slugolicious

是的，我在谈论ARIA状态和属性。它们可以通过HTML属性明确给出，但也可以隐含在本地HTML语义中。 - tobib

如果您不希望浏览器处理验证错误的显示，那么您就不能在输入框上使用setCustomValidity方法。在这种情况下，aria-invalid="true"对于告诉浏览器输入失败了某些JS检查是有用的。 - ehdv

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zzzzBov · 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，而不是必须检查元素上是否存在类（这很容易出错）。