使用aria标签作为样式选择器的最佳实践 [英] Best practice to use aria-label as a selector for styling

问题描述

我正在设计一个表格，其中的表格单元格带有（非交互式）对勾标记。复选标记图标通过CSS添加。由于其中没有可访问的内容，因此在其中添加了 aria-label 。现在，我想知道是否可以使用此属性作为CSS选择器来添加如下所示的选中标记图标：

I am styling a table that has table cells with (non-interactive) checkmarks in it. The checkmark icons are added via CSS. As there is no accessible content in it, I added an aria-label to it. Now I wonder if it is a good idea to use this attribute as a CSS selector to add those checkmark icons like this:

td[aria-label="yes"] {
  &:after {
    content: '\f00c';
    font-family: $font-family-icons;
  }
}

我了解到，使用ARIA属性作为选择器通常是好的做法，至少对于与状态相关的属性（例如 aria隐藏， aria扩展等）而言，在这种情况下，对我而言，将td样式与相应的标签相结合是很有意义的。但是，当然，如果这些标签有时会改变，那么我也需要修改CSS。

I learned that using ARIA attributes as selectors is generally a good practice, at least for state related attributes like aria-hidden, aria-expanded etc. In this case it made sense to me to have the td styling coupled to the corresponding label. But of course if those labels change at some time I'll need to adapt the CSS too.

除了此以外，您还知道其他缺点吗？还是您有关于如何更优雅地解决此问题的想法？

Do you know any other drawbacks apart from that? Or do you have ideas on how to solve this more elegantly?

推荐答案

为表示HTML中未原生传达的控制状态，例如扩展（例如），然后依靠ARIA属性作为样式选择器就很合适。

To represent control states that are not natively conveyed in HTML, such as expanded (for example), then leaning on ARIA attributes as style selectors can be a good fit.

在这种情况下，您依赖CSS将内容添加到基于ARIA的页面，我认为您不需要。首先，支持 aria标签（在< td> 上以及其他元素上）在较旧的浏览器/屏幕阅读器组合上可能会摇摇欲坠，其次是由较旧的浏览器/屏幕阅读器组合对CSS生成的内容的支持可能会更加不稳定。我对您的用户一无所知，但是不知道这是否重要。

In this case you are relying on CSS to add content to a page based on ARIA I do not think you need. First, support for aria-label (on <td>s as well as other elements) can be shaky on older browser / screen reader combos, and second, support for CSS generated content by older browser / screen reader combos can be more shaky. I know nothing about your users, however, to know if this matters.

这也假定CSS加载没有任何问题（网络掉落等）。

This also assumes the CSS loads without any issue (network drops, etc).

这意味着某些用户可能永远听不到或看不到单元格中的值。

This means some users may never hear nor see the value in the cell.

我尝试确保原始内容是不管CSS是否加载以对其进行样式设置，并且我还尝试限制对ARIA的依赖。

I try to ensure that the raw content is available regardless of whether the CSS loads to style it, and I also try to limit my reliance on ARIA.

话虽这么说， aria-hidden 从历史上讲，支持通常比我上面提到的两个问题要好。

That being said, aria-hidden support is generally historically better than the two issues I raise above.

让我以您的方式提出另一个想法。这不一定更好，但是考虑到未知的用户AT配置和潜在的网络问题，我认为它会更健壮。

Let me toss another idea your way. This is not necessarily better, but I think it is more robust when considering unknown user AT configurations and potential network issues.

我在< td> 。如果CSS永不加载（或者用户使用的是真正的旧浏览器），那么没什么大不了的。将会发生的最糟糕的情况是用户看到/听到是的检查。

I put both the text and checkmark into the <td>. If the CSS never loads (or the users is on a really old browser), no big deal. The worst that will happen is a user sees / hears "Yes check."

然后 aria隐藏的使确保没有向屏幕阅读器宣告该复选标记。 CSS对可见的用户隐藏文本。而且我认为您具有想要的效果。

Then the aria-hidden makes sure the checkmark does not get announced to screen readers. The CSS hides the text from sighted users. And I think you have the effect you want.

<td>
 <span class="visually-hidden">Yes</span>
 <span aria-hidden="true">&#10004;</span>
</td>

.visually-hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding:0 !important;
  border:0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

这篇关于使用aria标签作为样式选择器的最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！